Title Case a Sentence

In this freeCodeCamp algorithm we take a look at how to capitalize the first letter of each word in a given string. More importantly, we also get to take a look at the awesome Array.map() method.

Spec

Return the provided string with the first letter of each word capitalized. Make sure the rest of the word is in lower case.

For the purpose of this exercise, you should also capitalize connecting words like "the" and "of".

Requirements

• titleCase("I'm a little tea pot") should return a string
• titleCase("I'm a little tea pot") should return I'm A Little Tea Pot
• titleCase("sHoRt AnD sToUt") should return Short And Stout
• titleCase("HERE IS MY HANDLE HERE IS MY SPOUT") should return Here Is My Handle Here Is My Spout

Real-World Use Cases

As you could imagine, when using a text editor or when writing some text on the web you may want to have the ability to capitalize the first letter of each word. In fact, in CSS you have a text-transform property that you can give a value of capitalize which will do just that. Not to mention text editors like Google Docs and the like also have this feature.

Psuedocode

// Create a function that accepts a string
    // Take the string and convert it to lowercase
    // Take the string and split it into individual words
    
    // Loop through each item in the array
        // Take the first letter of every word and capitalize it
        
    // Join the array of words back into a string
    // Return the string

Solving the Algorithm

Setting up our function

Let's create a function that accepts a string, str, as an argument.

function titleCase(str) {

}

Convert Entire String to Lowercase

In order to convert a string to lowercase, there's a super easy method to do just that. You'd probably never be able to tell by the name, but that's exactly what the String.toLowerCase() method is for.

Let's try it out:

function titleCase(str) {
    var newStr = str.toLowerCase();
    return newStr;
}

titleCase("I'm a little tea pot"); // Returns: "i'm a little tea pot"

Test this code in your browser console

Split the String Into Individual Words

So if you've made it to this algorithm on freeCodeCamp, you should be familiar with the String.split() method by now.

We know that we can split a given string, in this case, str at a specified separator.

How would we split a string of multiple words into individuals substrings...🤔?

As an argument to the .split() method, we can simply pass a space character and it'll split our string at each space.

Hint: Try chaining the .toLowerCase() and .split() methods together! ⛓

Let's give it a shot:

function titleCase(str) {
    var newStr = str.toLowerCase().split(' ');
    return newStr;
}

titleCase("I'm a little tea pot"); // Returns: ["i'm", "a", "little", "tea", "pot"]

Capitalize The First Letter of Each Word

Here's where we can take a look at the Array.map() method which is super handy in this algorithm.

In short, the .map() method allows us to create a new array as a result of a function that iterates over each item in the original array.

In our case, we will pass in a variable char to our .map() callback function. With that said, char will represent each individual item or word of the array.

We will then use the .replace() method to replace the first character of every word, char[0], with it's uppercase character using the .toUpperCase() method which, as you might've guessed, does just the opposite of toLowerCase().

Solving the Algorithm

function titleCase(str) {

  	var newStr = str.toLowerCase().split(' ');

	var capStr = newStr.map((char)=>{
		return char.replace(char[0], char[0].toUpperCase())
	})
	return capStr.join(' ');
}

titleCase("I'm a little tea pot");

Recap

This one of the lengthier beginner algorithms so hopefully you found this to be a helpful walkthrough on the freeCodeCamp algorithm on how to "Title Case a Sentence"!

Shoot me an email at [email protected] with any questions and if you enjoyed this, stay tuned and subscribe below! 👇