Andrew Xanthos

Interview Questions: Reversing a String in JavaScript

posted 11 days ago

While this type of interview question is unpopular on places like Reddit and Hacker News, you will almost definitely encounter them during your job search. Personally, I view questions like this as a fun way to practice and learn.

Over the coming weeks, I will be working through these interview-style questions and sharing my thought processes with you. Note that I am not an expert, I am actually working through these problems as I write.

Let's get to work!

Before we get started, let's lay out some groundwork. It's possible that the question will be presented to you like this, or there may be no code whatsoever. Either way, we'll need to define a function that takes in a string and returns a new string.

const reverseString = (str) => {

return reversedStr;

};

With the boilerplate out of the way, let's start thinking about our problem. When I need to manipulate a string in any way, my first thought is that we should turn the string into an array. In my opinion, arrays are typically easier to reason about. Plus, JavaScript's built-in array methods are pretty powerful. We can turn a string into an array using the String.prototype.split() method (MDN). Let's do that first.

const reverseString = (str) => {

const splitStr = str.split('');

return reversedStr;

};

Notice that the String.prototype.split() method takes one parameter, representing the character it should split on. The MDN article linked above contains a few examples. Here we are splitting the string into individual characters, so if our input string (str) was "hello" then splitStr is ["h", "e", "l", "l", "o"].

Alright, so now we have an array of letters. How does that help us? Well, we can now make use of the array methods that I mentioned before. You can read about all of the array instance methods on MDN, but we only need one of them for this step, Array.prototype.reverse(). This method's functionality is in its name -- it reverses an array. Let's update our code to make use of it.

const reverseString = (str) => {

const splitStr = str.split('');

const reversedArr = splitStr.reverse();

return reversedStr;

};

The power of JavaScript's array prototype methods can not be overstated. We've completed a huge part of the task at hand with a single line. If we take a look at reversedArr, we'd now see ["o", "l", "l", "e", "h"].

Let's review what we've done so far:

  1. We defined a function called reverseString that takes a single parameter, str.

  2. We took the input string, str, and turned it into an array named splitArr using the String.prototype.split() method with empty quotation marks as a parameter.

  3. Finally, we took splitArr and reversed it using the handy Array.prototype.reverse() method. We named this reversed array reversedArr.

We're not done yet, though! There's one last thing we need to get done. The question specifies that we need to return a string. Unsurprisingly, there's an array method that will take care of this for us, Array.prototype.join(). Once we get this step out of the way, we're done! Let's finish writing our code and add some comments to make things clearer.

const reverseString = (str) => {

// Split the string into an array.

// e.g. "hello" -> ["h", "e", "l", "l", "o"]

const splitStr = str.split('');

// Reverse the array.

// e.g. ["h", "e", "l", "l", "o"] -> ["o", "l", "l", "e", "h"]

const reversedArr = splitStr.reverse();

// Finally, turn the array back into a string.

const reversedStr = reversedArr.join('');

return reversedStr;

};

Note that, like String.prototype.split(), Array.prototype.join()takes one parameter: the character that will go in between each array element as it is converted to a string. We don't want anything between the letters of our word, so we'll just provide an empty string.

And that's it! There's one last thing we could do though...

The One-Liner

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

We can take advantage of method chaining, arrow function syntax, and implicit returns to write this on one line. If I were doing this for an actual project, I would most likely write it like this.

Thank you!

Thanks for following along. I hope you were able to learn something. For my next challenge, I'm going to work on the same problem, but I won't be able to use the Array.prototype.reverse()method. I'm hoping for a good challenge!