Course: JavaScript

Progress (0%)

  1. Foundation

  2. Numbers

  3. Strings

  4. Conditions

  5. Loops

  6. Arrays

  7. Functions

  8. Objects

  9. Exceptions

  10. HTML DOM

  11. CSSOM

  12. Events

  13. Drag and Drop

  14. opt Touch Events

  15. Misc

  16. Project: Analog Clock

Exercise: Manual Uppercasing

Exercise 15 Easy

Prerequisites for the exercise

  1. JavaScript Strings — Unicode
  2. All previous chapters

Objective

Create a manual string uppercasing function without using the toUpperCase() string method.

Description

In the previous chapter, we saw the toUpperCase() string method that merely returns the uppercase form of the calling string. The method does some simple arithmetic to perform the uppercasing (at least for the English alphabet) which is surely hidden from the programmer.

In this exercise, you have to create a manual string uppercasing function strToUpper(), without using the toUpperCase() string method.

The function should take the string whose uppercase version we desire, as an argument, and then return back that uppercased version.

Moreover, the function must only consider the English alphabet. It's not impossible to go extremely tedious and consider every alphabet in the Unicode range, but that isn't required by this function.

Hints

Hint 1

Iterate over every character of the string to determine whether it needs to be uppercased.

Hint 2

Determine the offset to add to the code of a lowercase character (from the English alphabet) to go to its corresponding uppercase character.

View Solution

New file

Inside the directory you created for this course on JavaScript, create a new folder called Exercise-15-Manual-Uppercasing and put the .html solution files for this exercise within it.

Solution

First thing's first, let's decide the way the actual algorithm would work.

While going over each character in the given string, if it's lexicographically larger than or equal to 'a' or lexicographically smaller than or equal to 'z' (i.e. in the range 'a'-'z'), that simply means that the character needs to be uppercased.

Uppercasing is as simple as figuring out the code of the character and then subtracting 32 from it in order to go to the corresponding uppercase character.

'A' has the decimal code point 65 while 'a' has 97. Hence, if we need to go from 'a' to 'A', we merely need to subtract 32 from the code 97. Similarly, we could also add -32 to 97.

If the current character isn't in the aforementioned range, then it doesn't need to be uppercased.

Altogether, we get to the following code:

function strToUpper(str) {
   const UPPERCASE_OFFSET = -32;
   var uppercaseStr = '';

   for (var i = 0; i < str.length; i++) {
      // If the character is anything from lowercase 'a' to lowercase 'z',
      // uppercase it.
      if ('a' <= str[i] && str[i] <= 'z') {
         uppercaseStr +=
            String.fromCharCode(str[i].charCodeAt(0) + UPPERCASE_OFFSET);
      }

      // Otherwise, use the character as it is.
      else {
         uppercaseStr += str[i];
      }
   }

   return uppercaseStr;
}

Notice the constant in line 2. This is considered a very good programming practice.

Instead of using the literal -32 in the code above directly, it's much better to label it with a name by creating it as a constant. This also has the added benefit that if we ought to change the constant anywhere, we only need to make the change in one place, i.e. in the constant declaration statement.

Shown below is an example of the usage of this function:

strToUpper('abc')
'ABC'
strToUpper('ABC')
'ABC'
strToUpper('Hello World!')
'HELLO WORLD!'
strToUpper('1 2 3')
'1 2 3'