Understanding string reversal in Javascript

String reversal is a very common interview question, and luckily it’s quite simple. There are many different ways to do this, but here are four methods, starting from the simplest and going to the most complex.

Use arrays

This is a very straightforward method that leverages existing language features in order to accomplish a task. Most interviewers would ask you to perform the same task in a more ‘manual’ way if you tried this, but it demonstrates an awareness of Javascript, and is what I’d use in real life to accomplish this.

Javascript allows you to call the reverse method on arrays. You can see some examples in the documentation here.

So we would create a function that does the following:

• Converts the string to an array

• Reverses the array

• Transforms the array back into a string and returns it

reverse = str => {
  return str
    .split("")
    .reverse()
    .join("")
}

Calling reverse('Ruairidh') would return hdiriauR for example.

Use a loop

This is more of a classic interview answer and reverses the string in a more manual way. All you need to do is loop through each character in the string, and reverse its order.

Take a look at the following code:

reverse = str => {
  let reversed = ""

  for (let character of str) {
    reversed = character + reversed
  }

  return reversed
}

All we are doing here is creating an empty reversed string in which we will push our characters.

Then we loop through the string we receive using an ES6 for...of loop (see the docs) and pushing each character to the reversed string.

So if we had hello then we would loop through and add h to a blank string. Then our next character is e which would be added to our string which has now become eh. Run in sequence you get:

h
eh
leh
lleh
olleh

This is pretty straighforward and has a time complexity of O(n).

Using Javascript helpers

Reduce is a Javascript array method which is really useful. I would use this in an interview to show that I’m aware of ES6 features, and it has the benefit of some quite compact syntax.

If you haven’t seen reduce() in action then it’s just a way to run a function on each item of the array and return a single value at the end. You can read a bit more in the docs.

As for a code example, it looks a little like this:

reverse = str => {
  return str.split("").reduce((rev, char) => char + rev, "")
}

So there are a few things going on here. Firstly, we convert our string to an array using split. Then we reduce each item of our array and in the callback we provide our accumulated results so far (rev), then we add the next character in the array to rev. We also shorten the syntax through arrow functions and an implicit return.

The logic is actually exactly the same as our loop above, but we use javascript to do some of the heavy lifting.

Conclusion

As you have seen above, it’s actually very simple to reverse a string once you have seen a few examples. Any of the above will accomplish your task though I recommend the last two for an interview.

Personally I prefer the second option as it shows your working a bit more than the last option which relies more on ES6 features.

Got another way to reverse a string? Tweet me!. Or try your hand at reversing strings on LeetCode.