Exercise: Title Casing

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

First, let's set up the basic structure of the function:

function toTitleCase(str) {
   // Code to go here.
}

Now, let's convert the given string str into a sequence of words (whose definition is given in the exercise's description above).

This can very easily be accomplished using the split() string method, passing in the string ' ' as the delimiter, as follows:

function toTitleCase(str) {
   var words = str.split(' ');
}

With the array of words in hand, what we ought to do next is to uppercase the first character of every word. This can be done by iterating over all the words and replacing each one with its corresponding first-character-uppercased version.

In the code below, we do exactly this:

function toTitleCase(str) {
   var words = str.split(' ');

   for (var i = 0, len = words.length; i < len; i++) {
      words[i] = words[i][0].toUpperCase() + words[i].slice(1);
   }
}

• The first character of words[i], which is the current word in the loop, is accessed as words[i][0] and then uppercased using the method toUpperCase().
• Then this uppercased character is concatenated with the remainder of the string, which is extracted with the help of the slice() method.
• Finally, the result of the concatenation is written back to words[i].

Now, as the second-last step, we just need to join all the words in the array words using a space character in between them. That is, if words is ['A', 'B', 'C'], then we need to produce the string 'A B C', with a space between each of the words.

This also can be accomplished very simply using a for loop and an accumulator string variable meant to hold the concatenation of all words along with the space character, as demonstrated below:

function toTitleCase(str) {
   var words = str.split(' ');

   for (var i = 0, len = words.length; i < len; i++) {
      words[i] = words[i][0].toUpperCase() + words[i].slice(1);
   }

   var titleCasedStr = words[0];
   for (i = 1, i < len; i++) {
      titleCasedStr += ' ' + words[i];
   }
}

Perfect, so far.

The final thing left is to just return the string titleCasedStr. This is done below:

function toTitleCase(str) {
   var words = str.split(' ');

   for (var i = 0, len = words.length; i < len; i++) {
      words[i] = words[i][0].toUpperCase() + words[i].slice(1);
   }

   var titleCasedStr = words[0];
   for (i = 1; i < len; i++) {
      titleCasedStr += ' ' + words[i];
   }

   return titleCasedStr;
}

Seemingly, we might think that we've completed our function's definition, but that's not the case.

When the given string is '', the return value must ideally be ''. But, as of now, our toTitleCase() function doesn't return '' when it's passed in with ''. In fact, it returns nothing, but instead throws an error.

The snippet below illustrates this:

toTitleCase('')

The error message hints us that the problem lies in the line where the toUpperCase() method is invoked, and that is in line 5.

So what could be the problem there?

Well, when we split the empty string '' using the split() string method, we get back an array consisting of one single item, which is an empty string as well. That is, we get the array [''].

In the subsequent for loop (lines 4 - 6), when we access words[i][0], the expression words[i] resolves to '', and then words[i][0] resolves to undefined. Thereafter, accessing the toUpperCase() method on undefined throws an error.

Now the solution of this problem is to address the empty string string right at the start of the function. But still that won't solve all such problems. For instance, if we provide ' ' as the string, split() produces the array ['', ''], whereby there are two empty strings.

Therefore, a more generic, and a working, solution is to check if words[i] is '', and if it ain't, only then proceed with invoking the toUpperCase() method. And for this, we'll use the && operator.

Shown below is the complete definition of toTitleCase():

function toTitleCase(str) {
   var words = str.split(' ');

   for (var i = 0, len = words.length; i < len; i++) {
      words[i] = words[i] && words[i][0].toUpperCase() + words[i].slice(1);
   }

   var titleCasedStr = words[0];
   for (i = 1; i < len; i++) {
      titleCasedStr += ' ' + words[i];
   }

   return titleCasedStr;
}

Now, let's test this function:

toTitleCase('This is great.')

toTitleCase('An awe-inspiring story!')

toTitleCase('10 tips to become successful')

toTitleCase('hello world!')

toTitleCase('HELLO WORLD!')

toTitleCase(' ')

toTitleCase('')

Voila! It works just as desired.