JavaScript Challenge 6: Convert string to camel case

This article was originally posted on my blog. Head over to inspiredwebdev.com for more articles and tutorials. Check out my JavaScript course on Educative to learn everything from ES6 to ES2020.

In this article we will solve together the Convert string to camel case challenge from CodeWars, you can find it at this link. The difficulty of this challenge is easy.

Let's read the task together:

Complete the method/function so that it converts dash/underscore delimited words into camel casing. The first word within the output should be capitalized only if the original word was capitalized (known as Upper Camel Case, also often referred to as Pascal case).

Examples
toCamelCase("the-stealth-warrior") // returns >"theStealthWarrior"

toCamelCase("The_Stealth_Warrior") // returns "TheStealthWarrior"

The easiest way to solve this challenge will be with RegEx and we don't even need a complicate one in this case:

Write the RegExp

/[-_]\w/ig this is all we need.

• [-_] will match all the underscore and dashes
• \w will match any character right after a dash or underscore
• /ig will perform a global case insesitive search.

The trick that will help us complete the challenge more easily is the \w which allows us to capture the letter right after a dash or underscore, meaning we can easily make it uppercase in one go.

When you want to play around with RegEx, this is a great playground that also explains how they work regexr.com.

Now that we have the most important piece of our function, let's try and build a function around it.

function toCamelCase(str){
      const regExp = /[-_]\w/ig;
      return str.replace(regExp,(match) => {
          console.log(match);
       });
}
toCamelCase("the-stealth-warrior")
// -s
// -w

String.replace() can take not only a substring but only a RegExp as the first parameter and will pass the result in the second one.

As you can see our RexExp matched each dash and the first character after.

Completing the function

Now what we are left to do with the function is to return only the uppercase letter without the dash or underscore.

function toCamelCase(str){
      const regExp = /[-_]\w/ig;
      return str.replace(regExp,(match) => {
          return match[1].toUppercase()
       });
}
toCamelCase("the-stealth-warrior")

That's it, the last line we added will return S instead of -s and W instead of -w.

here are many other ways of solving this problem, let me know yours in the comment.

If you liked this type of content, please let me know in the comments and I'll create more of these.

If you want to learn everything about JavaScript from ES6 all the way to ES2020, please check out my book available to read for free on Github. A course is also on Educative