How to Capitalize the First Letter of Each Word (Titlecase) in JavaScript

In this quick article, we’ll see how you can capitalize the first letter of all words in a string in JavaScript—also known as converting the text to titlecase.

JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for plugins. In this series, we’re discussing different tips and tricks that will help you in your day-to-day JavaScript development.

As a JavaScript developer, sometimes you need to capitalize the first letter of all words in a string—for example if you are emitting an Envato Tuts+ style title. There’s no built-in function in JavaScript which allows you to capitalize all words in a string, but there are different ways that you could use to achieve it. Specifically, there are different JavaScript functions that you can use to achieve the desired effect.

We’ll discuss how to do it along with a couple of examples.

JavaScript Example: Capitalize the First Letter of All Words

In this section, we’ll build a custom JavaScript function which allows you to capitalize the first letter of all words in JavaScript.

Let’s have a quick look at the following example.

As you can see, we’ve made the convertFirstLetterToUpperCase JavaScript function, which takes a single argument. You need to pass a string as the first argument of the convertFirstLetterToUpperCase JavaScript function, and it processes the input string and returns the string by capitalizing the first letter of all words.

Let’s understand how it works. Firstly, we’ve used the toLowerCase JavaScript string method to convert the input string to lowercase letters. It makes sure that the resulting string is in lowercase. Next, we’ve used the split JavaScript string method to split the string with white space, and as a result, we’ve an array of strings.

Now, we just need to loop through all elements of an array and capitalize the first letter of each element. Firstly, we’ve used the charAt JavaScript string method to get the first character, and then we’ve used the toUpperCase JavaScript string method to make it uppercase. Finally, we’ve used the substring JavaScript string method to get the rest of the string. By concatenating these two strings, it gives us the capitalized string.

Finally, we’ve used the join JavaScript array method to join all the elements of an array with the white space and it returns the string. So that’s how it capitalizes the first letter of all words in a string.

JavaScript Example: Capitalize the First Letter of All Words With the Map Method

In the previous section, we discussed the JavaScript example to demonstrate how you can capitalize the first letter of all words in a string.

In this section, we’ll revise the aforementioned example with the map JavaScript array method. Let’s have a quick look at the following example.

As you can see, it’s a single line function which allows you to do it much more easily. Thanks to the map method, which allows us to loop through array elements with the much cleaner syntax. If you could notice, we’ve used the slice JavaScript array method instead of the substring method in this version.

Conclusion

Today, we discussed how to capitalize the first letter of all words in JavaScript along with a couple of real-world examples.