Hedegare's Blog

Building - Learning - Optimizing - Growing

Beginner

Challenges

Javascript

How to Convert a String to Camel Case

String manipulation is an important skill in programming, often used in data parsing, formatting, and preparing values for further processing. In this coding problem, the task is to convert a string containing words separated by dashes (kebab-case) or underscores (snake case) into camel case.

These naming conventions help keep code consistent and easier to read, making it more maintainable and future-proof. We’ll be using Javascript to solve this problem.


Before diving into the full problem statement, it’s helpful to understand these naming conventions and how they differ. Here’s a quick breakdown:

The problem

This challenge comes from Codewars.

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). The next words should be always capitalized.

This is the starting code:

index.js
function toCamelCase(str) {
}

Examples:

kebabs-taste-Very-Good gets converted to kebabsTasteVeryGood

snakes_are_reptiles gets converted to snakesAreReptiles

The_Last-Example gets converted to TheLastExample

The plan

  1. Break the string into a list of words based on the delimited - and _;
  2. Keep the first word unchanged;
  3. Capitalize the remaining words;
  4. Join everything together into a string.

The implementation

Start by using the split function to break the string into a list of words. The split function takes a separator parameter that defines where each split should occur.

Since there are two cases where a string can be separated (- and _), using a regular expression (regex) is a good choice to use as a separator. The regex /-|_/g finds all dashes and underscores in the string.

index.js
function toCamelCase(str) {
var result = str.split(/-|_/g);
return result;
}

Now that the words are separated and stored in an array, we can iterate through it and start capitalizing each word. But first, we need to make sure that the first word maintains its original form.

index.js
function toCamelCase(str) {
var result = str.split(/-|_/g);
result = result.map((word, index) => {
if (index === 0) {
return word;
} else {
return word.charAt(0).toUpperCase() + word.slice(1);
}
});
return result;
}

We use the map iterative method to go through each word and capitalize it, but only if it’s not the first word in the list; this is done by checking the index value.

The final step is to join all the words back into a single string.

index.js
function toCamelCase(str) {
var result = str.split(/-|_/g);
result = result.map((word, index) => {
if (index === 0) {
return word;
} else {
return word.charAt(0).toUpperCase() + word.slice(1);
}
});
result = result.join("");
return result;
}

Running this code with the examples above will show that it successfully converts the strings into camelCase.

The problem is solved, but we can simplify the code further by rewriting the function as a concise one-liner, like this:

index.js
function toCamelCase(str) {
return str.split(/-|_/)
.map((word, index) => {
return index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)
})
.join("");
}

Instead of storing the result in a variable and changing it step by step, we directly return the transformed string by chaining methods together. The map callback uses a ternary operator instead of a if ... else statement.

These changes make the code more concise and easier to read without changing its result.

The recap

Let’s recap what we’ve done:

String manipulation is a classic coding exercise. This challenge is a great way to practice logic, string operations, and array transformations in a clean and practical way.

Additional Resources

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions

Last updated on 2025-07-06