Exercise: Camel Words

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

So where should we start from?

Well, first let's set up the basic wireframe of the function and then reason about its implementation.

This is done below:

function getWords(str) {
}

Actually, we could define more here, before we start writing the real code. That is, if str is '', we could immediately return []:

function getWords(str) {
   if (str === '') {
      return [];
   }
}

So far, so good.

Let's now get to real deal — thinking about how to extract all of the words from str. Well, it's really not that difficult to accomplish.

Here's what we could do:

1. Iterate over each character of str, while keeping an index-tracking variable at hand — let's call it index, initially set to 0 — to help us slice a given substring if we are sure that it represents a single word.
2. In the iteration, we check whether the current character is uppercase.
3. If it is one, this means that the preceding substring is a word.
4. This preceding substring starts at index index (inclusive) and ends at the index of the current character (exclusive).
5. To extract this word, we use the string slice() method.
6. In the end, we call slice() once more to slice the string from index upto its very end.

And this is just the algorithm that we need.

Let's take the help of an example to understand this better.

Suppose that str is 'firstChild'. Moreover, index = 0.

Simple?

In the code below, we implement this algorithm in getWords(), adding each extracted word onto an array words which ought to be returned in the end by the function:

function getWords(str) {
   if (str === '') {
      return [];
   }

   var words = [];
   var index = 0;
   for (var i = 0, len = str.length; i < len; i++) {
      if ('A' <= str[i] && str[i] <= 'Z') {
         words.push(str.slice(index, i));
         index = i;
      }
   }
   words.push(str.slice(index));

   return words;
}

Now the question is: can we be sure that this code works correctly for every input as shown in the exercise's description above?

Well, the best way is to just go and check it:

getWords('helloWorld')

['hello', 'World']

getWords('innerHTML')

['inner', 'H', 'T', 'M', 'L']

Oops! The second call here, i.e. getWords('innerHTML'), produces the wrong result. It considers HTML to be four words, whereas it's just one single word.

Clearly, something has to be changed/added to our getWords() function.

But what?

Well, let's walk through the algorithm with str set to 'innerHTML'. This will help us see exactly how our current approach leads to the wrong output for 'innerHTML' and then think about how to solve it.

Suppose that str is 'innerHTML', and that index = 0.

The problem is pretty apparent. Whenever we encounter an uppercase character, we just perform the preceding word's extraction without even checking if the uppercase character is preceded by another uppercase character.

The question remains: how to solve this?

Well, a pretty straightforward way is to check the preceding character each time an uppercase character is encountered.

• If the preceding character is NOT uppercase, i.e. it's lowercase, this means that it's part of that preceding word, and so we should extract that word.
• Otherwise, we shouldn't do anything.

Simple?

Adding this notion into our current approach, we get the following code:

function getWords(str) {
   if (str === '') {
      return [];
   }

   var words = [];
   var index = 0;
   for (var i = 0, len = str.length; i < len; i++) {
      if ('A' <= str[i] && str[i] <= 'Z'
      && 'a' <= str[i - 1] && str[i - 1] <= 'z') {
         words.push(str.slice(index, i));
         index = i;
      }
   }
   words.push(str.slice(index));

   return words;
}

To our surprise, even this code misses to address an edge case.

Let's see if you could figure out that edge case. Hint: it's already there in the console snippet in the exercise's description.

The problem with the approach above is that it only checks the preceding character when an uppercase character is encountered, not the next character.

Consider the third statement below:

getWords('helloWorld')

['hello', 'World']

getWords('innerHTML')

['inner', 'HTML']

getWords('lastHTMLElement')

['last', 'HTMLElement']

As stated in the description of this exercise, if a sequence of uppercase characters is followed by a lowercase character, then the sequence, excluding the last character, constitutes a word.

Hence, the sequence of uppercase characters HTMLE in 'lastHTMLElement' constitutes the word 'HTML', not 'HTMLE', as it's followed by l.

So how to address this case?

Well, we just need to add another check to our existing if conditional. With this check added, the if statement would be read as follows:

The text in bold here represents the new condition while the parameters represent a group expression.

Converting this idea into the glyphs of code, we get the following:

function getWords(str) {
   if (str === '') {
      return [];
   }

   var words = [];
   var index = 0;
   for (var i = 0, len = str.length; i < len; i++) {
      if ('A' <= str[i] && str[i] <= 'Z'
      && ('a' <= str[i - 1] && str[i - 1] <= 'z'
      || 'a' <= str[i + 1] && str[i + 1] <= 'z'))
      {
         words.push(str.slice(index, i));
         index = i;
      }
   }
   words.push(str.slice(index));

   return words;
}

And now, the function getWords() works just as desired, without leaving off any edge cases.

Below we try it out on a couple of strings:

getWords('helloWorld')

['hello', 'World']

getWords('innerHTML')

['inner', 'HTML']

getWords('lastHTMLElement')

['last', 'HTML', 'Element']

getWords('insertAdjacentElement')

['insert', 'Adjacent', 'Element']

getWords('insertAdjacentHTML')

['insert', 'Adjacent', 'HTML']

getWords('')

[]

Superb!