How to reverse a String in JavaScript

Reversing a string is a very popular algorithm challenge you can get on a job interview. There are multiple ways to do it. If you don't know how to do, don't sweat. We will go through three different ways how to do it.

Let's start with using your old friend the for loop.

Foor loop

const reverseString = (str) => {
    let reversedString= "";

    for(let i= 0; i <str.length; i++) {
         reversedString =  str[i] + reversedString;
    }

    return reversedString;
}

reverseString("pizza");

We first declare a variable and set it to be an empty string. Next we iterate over the str argument and add every char to reversedString. Let's inspect the value of the reversedString for every iteration.

i = 0
reversedString =  "p" + "";
// we set reversedString to be p + empty string

i = 1
reversedString = "i" + "p";
// we set reversedString to be i + p

i = 2
reversedString =  "z" + "ip";
// we set reversedString to be z + ip

i = 3
reversedString =  "z" + "zip";
// we set reversedString to be z + zip

i = 4
reversedString = "a" + "zzip";
// we set reversedString to be a + zzip

// done, reversedString will now be azzip
 

Built-in functions

Here we will use three built-in functions.

split
Split a string into to an array, takes two optional parameters. A separator that tells where each split should occur. Limit parameter, maximum limits of splits.

rerverse
Reverses an array.

join
Build a string from an array. Takes an optional separator as the parameter.

const reverseString = str => str.split("").reverse().join("");

reverseString("games");

str.split("") 
// Here we split the string and each character becomes an element in the array. 
// ["g", "a", "m", "e", "s"]

.reverse()
// Here we reverse the array
// ["s, "e", "m", "a", "g"]

.join("");
// and finally the array will be transformed back to a string.
// "semag"

Using the reduce function

const reverseString = (str) => {
  return str.split("")
  .reduce((acc, curr) => curr + acc, "");
}

reverseString("house"); // esouh

We first turn the str into an array with the split function. Same as we did in the example above.

reduce takes an array and outputs a single value. We pass reduce a callback, this function will be iterated over every value in the array. We also supply an empty string as the initial value. For the callback, we pass it an accumulator and the current value.

Accumulator This will either be the initial value or the last value returned from the callback.

Current value The current value is the value we are working with.

Closing notes

We have talked about three ways how to reverse a string in JavaScript, hopefully you learned something new. It's good to master all three ways and practice on the listed things.

• for loop
• split
• reverse
• join
• reduce

These are fundamentals of the language that every JavaScript developer should have in their toolbox, it can be applied to solve other problems.