How to Capitalize Each Word in a String in JavaScript

A lot of programming languages provide some convenience methods to manipulate strings. JavaScript has several, but capitalizing each word in a string is not one of those convenience methods. Fortunately, as a programmer, capitalizing each word in a string is very straight forward to do in JavaScript.

Below is an example of how this could be done:

const name = 'john foderaro';
const capitalized = name.split(' ').map((c) => `${c.charAt(0).toUpperCase()}${c.slice(1)}`).join(' ');
console.log(capitalized); // prints: John Foderaro

Ok, so this looks pretty ridiculous. And it does because I went for that cool one-liner effect (funny story, I once had a senior engineer leave a comment on a slick one-liner in a pull request referring to it as something along the lines as “nice code golf” – I think he was being sarcastic).

Let’s break down this JavaScript chaining madness into something more digestible and explainable:

const name = 'john foderaro';
const words = name.split(' ');
const capitalizedWords = => {
  return `${word.charAt(0).toUpperCase()}${word.slice(1)}`;
const capitalizedName = capitalizedWords.join(' ');
console.log(capitalizedName); // prints: John Foderaro

First, split the string on its empty space characters – this of course is operating under the pretense that each substring appearing between spaces is indeed a word that is in need of capitalization.

Next, iterate over this new array of substrings using the map array method, which itself will return a new array after executing a callback function on each item within the words array. Within this map callback function, return a new string template literal, per word. It is here where the word itself will be capitalized, via the toUpperCase string method on the substring’s first letter, using the string method chartAt with the argument of 0 – which represents the first character’s index. slice is then used with just a single argument to create a new string from a specific substring.

In this case, the substring is everything from and including index 1 to the end of the string, as the rest of the original string after the first character needs to be retained. Note how both new strings are created between the ${} characters within the backticks of the template literal. This is concatenating the two new strings together, e.g., concatenating the J and ohn as well as the F and oderaro. This new string is then returned in the map callback and is now a capitalized version of the word parameter originally passed to the map callback.

Lastly, the array of capitalizedWords can be “stringified” using join, the opposite of split, where each array index is joined via the argument provided – in this case, an empty space character.

Something a bit more polished, testable, reusable, and that could strike a balance between verbosity and code golf-y, could look like this function:

function capitalizeWords(string) {
  return string.split(' ').map((a) => {
    return `${a.charAt(0).toUpperCase()}${a.slice(1)}`;
  }).join(' ');

Like what you've read?