FreeCodeCamp Algorithm Challenge Guide - Reverse a String

This is the first algorithm challenge from the FreeCodeCamp (FCC) curriculum, which means it could be the first time you’ve had to write code based on specifications.

Note: A working code solution is at the end of this article.

The Challenge

Reverse the provided string. You may need to turn the string into an array before you can reverse it. Your result must be a string.

Let’s first break down what it’s asking us to do:

  • Reverse the provided string.
  • You may need to turn the string into an array before you can reverse it.
  • Your result must be a string.

FCC have kindly given us some clear instructions for this challenge.

We need to write a function that takes a string as the argument and returns a reversed version of the string. Let's write this function!

Step 1: Converting the string to an array

javascript string to array

The first step is to convert the provided string into an array. Why would we bother doing this?

String values in JavaScript are immutable. That means the value of the variable can't be mutated (changed) after being declared.

For example:

var a = "stuff"

There is no way to rearrange "stuff". A deeper explanation on value immutability can be found here.

Note: We can store a new value in a. It's the specific value of "stuff" that can't be changed.

What does this mean for us?

There's no way to change the string's value in its current form. We need to split up the individual characters of the string and store them in an array for reversing.

Luckily, there’s a simple way to convert a string into an array of characters in JavaScript. The .split() method can do this for us. FCC gives us a like to the Mozilla Developer Network to explain split().

The split method is fairly straightforward: it splits a string into an array of smaller strings (in our case, individual characters). Arrays are mutable in JavaScript, so the values can be changes.

Here’s an example of the split method:

var a = "hello";

var b = a.split("");

console.log( b );

In the above, b will log the following array:

["h", "e", "l", "l", "o"]

To use .split(), you need to pass it a separator property in the parentheses. If you provide it with an empty string argument (""), it will split the string into individual characters.

If you provide it anything else, it will split the string each time it finds the provided property inside the string. Read more on .split() here.

That’s step one finished. Next up, let's reverse our new array!

Step 2: Reversing

JavaScript Reverse Method Right now, you should have an array containing all the individual characters from the provided string.

The next step is reversing the contents of this array.

We’re in luck again! JavaScript has another built-in method that does exactly what we need: .reverse(). You can read more about the reverse method here.

The reverse method reverses an array in place, which means it changes whatever array you call it on. It doesn’t take any arguments.

Let’s see an example:

var b = ["h", "e", "l", "l", "o"];

b.reverse();

console.log( b );

The following would be logged:

["o", "l", "l", "e", "h"]

Sweet! Our array is reversed. But it’s still not ready to be returned. Now we need to join it back into a string.

Step 3: Joining the array

JavaScript Join Method You should have an array containing the original string’s characters in reversed order.

To join the array’s elements into a string, we’re going to use another built-in JavaScript method: .join().

Using .join() is similar too .split(), as it also needs a separator argument.

Here’s an example:

var b = ["o", "l", "l", "e", "h”];

var c = b.join("");

console.log( c );

The following would be logged:

"olleh"

That’s what we need! But what’s going on here?

You need to tell the join method what to put between each element. If you left out the empty string inside the parenthesis (""), .join() would automatically join the array elements with a comma instead of nothing: "o,l,l,e,h".

That’s it! If you’ve followed the above three steps, your function should be reversing the provided string.

All that's left is to return the reversed string:

return yourString;

Finished Code Example

Spoiler alert! Stop here if you don't want to see the final code. Warning Code Ahead

Here’s the finished code (yours may look different, which is fine):

function reverseString(str) {
   //Splitting the string into an array.
   stringArray = str.split("");

   //Reversing the array.
   stringArray.reverse();

   //Joining the array into a string.
   str = stringArray.join("");

   //Returning the reversed string
   return str;
}

reverseString("hello");

FreeCodeCamp has a guide for this challenge here.

Tweet at me if you need any help: @AmoreJosh.