The Challenge

You can find the Kata linked here. The objective is to complete a function that transforms words separated by dashes or underscores into Camel Case. Specifically, the first word should retain its original capitalization (known as Upper Camel Case or Pascal Case), while all subsequent words must begin with an uppercase letter.

For example:

• "the-stealth-warrior" converts to "theStealthWarrior"
• "The_Stealth_Warrior" becomes "TheStealthWarrior"

My Approach

To tackle this problem effectively, it's beneficial to decompose it into manageable steps. This strategy is especially useful when you’re uncertain of the most efficient solution.

The steps involved are:

1. Identify the characters that separate the words (in this case, "_" and "-").
2. Locate the character that follows the special character.
3. Convert that character to uppercase.
4. Eliminate the special characters.
5. Return the final result.

Initially, I considered using a regular expression to accomplish this. However, since I couldn’t recall the exact syntax, I opted for a hybrid approach.

I utilized the String.split() method to break the string into individual words. For a single separator, it’s straightforward:

const stringSplitted_A = str.split("-");

const stringSplitted_B = str.split("_");

When multiple separators are involved, things can become complex. Thus, I employed a regex to accommodate two or more characters:

const stringSplitted = str.split(/[_-]+/g);

This regex functions as follows:

• + indicates one or more occurrences.
• [] specifies a set of characters (in this case, "_" and "-").
• g ensures the search spans the entire string.

This method results in an array of words.

Next, I needed to capitalize the first letter of each word. FreeCodeCamp provides an excellent guide on this topic (link). I used the String.charAt() method to extract the first character and the String.toUpperCase() method to transform it to uppercase. The String.slice() method helped me retrieve the remainder of the word:

const capitalizeFirstLetter = (w) => w.charAt(0).toUpperCase() + w.slice(1);

The following step involved iterating through the array elements. My initial thought was to use the Array.map() method:

const camelized = stringSplitted.map((w) => capitalizeFirstLetter(w));

However, this code inadvertently capitalized the first letter of the entire string. The challenge specifies that the first character should remain lowercase. Thankfully, Array.map() allows access to the index of each element, enabling me to modify only the subsequent words:

const camelized = stringSplitted.map((w, i) =>

i > 0 ? capitalizeFirstLetter(w) : w

);

Finally, I combined the words back together using the Array.join() method. Here’s the complete code for my solution:

const capitalizeFirstLetter = (w) => w.charAt(0).toUpperCase() + w.slice(1);

function toCamelCase(str) {

const stringSplitted = str.split(/[_-]+/g);

const camelized = stringSplitted.map((w, i) =>

i > 0 ? capitalizeFirstLetter(w) : w

);

return camelized.join("");

}

The Optimized Solution

One of the most enlightening aspects of CodeWars is the opportunity to review solutions from other participants. I discovered a more elegant approach to converting a string to Camel Case. Many users suggested the following method:

const toCamelCase = (s) => s.replace(/[-_](.)/g, (_, c) => c.toUpperCase());

In this instance, the String.replace() method is employed. I learned that you can pass a function as an argument to this method, which was a new insight for me.

The regex used here captures any character following the special characters:

• [-_] identifies either "-" or "_".
• (.) captures the character immediately following the special character.

The replace method's second argument is a function that utilizes the captured character, allowing for a concise transformation.

This challenge was particularly rewarding as it demonstrated the powerful capabilities of regular expressions. It was also the first in this DevAdvent series that truly challenged my problem-solving skills.

Thank you for reading! Be sure to stay tuned for my next article by signing up for my Medium email list.

The first video titled "Code Wars Javascript Tutorial 'Convert String to Camel Case'" provides an insightful guide on this topic.

The second video titled "String to Camel Case in JavaScript" further elaborates on the conversion techniques.

Looking to elevate your tech startup with effective content? Check out Circuit for expert advice and tailored solutions to enhance your tech product or service awareness.