Josh Amore Blog

FreeCodeCamp Algorithm Challenge Guide - Reverse a String

June 19, 2017

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

Let’s step through the challenge!

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

The Challenge

Here is the FCC challenge specification:

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 has 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

freecodecamp string to array swap

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:

let 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 provides 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 between 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

freecodecamp javascript reverse

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

The next step is reversing the content inside our 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 the array you call it on. It doesn’t take any arguments.

Let’s see an example:

let 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

FreeCodeCamp javascript join

You should now 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:

let b = ["o", "l", "l", "e", "h"]

let 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 also has a guide for this challenge on their forum.

Stuck on this challenge? Tweet at me and I’ll try and help: @AmoreJosh.

Written by Josh Amore who lives and works in Melbourne, Australia. You can contact him here.

© 2022, Built with ☕