How to Reverse a String in JavaScript

This article is about practicing different JavaScript functions and creating algorithms because it is important to practice in order to perform well in technical interviews. This article will teach you several approaches to solving a common technical interview question, reversing a string.

Reversing a string in JavaScript may seem like a simple task, but there are several steps involved and, in the context of a technical interview, it provides opportunities to showcase your knowledge of JavaScript and trade-offs / edge cases considered. It is good practice to make sure you understand the problem and any constraints before beginning to write code.

Some of the constraints may be given to you upfront, such as: “Write an algorithm that reverses a string in place without using built-in functions like .reverse() or .charAt(). It is always a good idea to ask clarifying questions before jumping in and attempting to solve the problem. In this case we are asked to reverse a string. Some questions we could ask include:

Let’s start with the least amount of constraints and work our way up:

With this challenge, we are not provided with any restrictions on the functions we can use. We can also ask our clarifying questions if the string input will contain any special characters or if there are any conditions. For this challenge, let’s assume the answer is the input will only contain regular ASCII characters.

Now that we have asked our clarifying questions, you can restate the problem with the new information to buy yourself more time to think and get used to communicating your thought process out loud. You could say something like:

Now that you have restated the problem as you understand it based on the responses to your clarifying questions, this may be a good point to write some simple examples.

Now that we understand the problem, the input and expected output, we can break it down into steps.

Next we can test the function with the examples we created above, again communicating our thought process out loud by saying something like:

Now that the function works, we can refactor it to make it more DRY.

Now let’s suppose we are given the same problem but with more constraints

For the sake of brevity, let’s assume the same answers to our clarifying questions above. We can use the same approach for the first problem, but just with different steps given the new constraints.

The reason we want to add each character to the beginning of the reversed string is because if we added them to end of the string, we would just be reconstructing the input string as is and we want the return value to be a reversed string.

In step 3 we are just concatenating the character in each iteration with the reversed string, (being careful to add it to the beginning) and reassigning the concatenated string back to the reversed variable. In other words, starting with the character and adding (concatenating) the reversed string to the end of it; then reassigning this combined string to the reversed variable.

If we put reversed = reversed + char, that would be the opposite of what we want and would just reconstruct the input string (reverse('hello') === 'hello').

Also, step 2 uses the for...of statement introduced in ES2015. The syntax is easier to read and it creates a loop that iterates over iterable objects. If the interviewer asks you to not use ES2015, you can always use a traditional for loop; but if you do not have that restriction, I think using for...of loops are better because the syntax is simpler and they reduce the chances of unintentional errors being introduced (like using a comma instead of a semi-colon to separate the initial expression, condition and incremental expression).

For our last challenge, let’s suppose we are given the same problem but the input strings may contain more than just ASCII characters.

If we use our initial function to reverse a string containing Unicode characters, we get weird and unexpected results. Let’s include an emoji in the string because, why not?!

We can get around this by using the Array.from() method to create a new array from an array-like or iterable object (in our case a string).

Now that you have learned about different ways to approach the reverse a string algorithm in JavaScript, take a look at:

Related posts:

block3 is a blockchain Studio who advocate a pragmatic approach to where and how blockchain technologies can be applied to existing businesses and also to create new business and organisational…