An Interview Question: How many ways can you reverse a string in JavaScript?
Reversing a string in any programming language is a very common interview question. There are multiple solutions to this problem. In my opinion, you should answer based on the personality of the interviewer. When interviewer asks you this type of question, they want you to code your solution without using too many built-in functions. Regardless, a one line solution is if you use ES2015 syntax. Let’s start with some built-in functions.
The three solutions to answer this question are :
Using built-in functions
const s = 'TechSith';const result = s.split('').reverse().join('');console.log(result); // 'htiShceT'
What’s the logic?
Logic behind the solution mentioned above is to convert string to an array, where each char is an element of the array. Next, reverse that array and then convert back to string. In the end, you will have a string that has char arranged in reverse order.
Method:
In the above solution, we have used three methods: split(), reverse(), and join().
- split() is a string’s prototype method that converts a string to an array. Providing an empty string as an argument means split by each character. So the resulting array would have each character as an element of the array.
- reverse() is a prototype method of the array that reverses the array.
- join() is a prototype method of the array that converts array to string by joining each element by given argument. In the above solution, the argument is an empty string which means join each character without any space.
Instead of using split(), you can also use a spread operator which does the same thing. Let’s look at an example of spread operator:
const s = 'TechSith';const result = [...s].reverse().join('');console.log(result); // 'htiShceT'
Using Reduce function
const s = 'TechSith';const result = [...s].reduce((a,c) => c + a);console.log(result); // 'htiShceT'
What’s the logic?
Read character by character and append it to the result string. Instead of adding the new character to the end, add it to the front of the result. As a result, we will get a reversed string.
Method:
In this solution, we have used the reduce() method. It is a built-in prototype method of the array.
First, convert string to an array by using the spread operator. The result will be an array with each character as an element. Using the reduce() method returns single value. here it will return the reversed string. it has callback function as an argument with two arguments a and c, a is called accumulator, c is each character. add each character to the front of the accumulator. This actually reverses the string . lets say your string is ‘ab’, you take the first character which is ‘a’ and make it your accumulator. now the add the second char ‘b’ to the front of the accumulator such that you will get ‘ba’, a reversed string.
This is my favorite way, It shows that you can use all the latest syntax, like arrow function, spread operator and functional programming paradigm like reduce.
Using recursion
const s = 'TechSith';const rev = s => (!s) ? '' : rev(s.substr(1)) + s.charAt(0);console.log(reverse(s)) // 'htiShceT'
What’s the logic?
This is the only logic where we are not going to convert string to an array. The logic is pretty simple, recursively take each character out from the front and add it to the end.
Methods used:For this solution, we have used two methods: substr(1) and charAt(0).
- substr(1) is a prototype method of a string that allows you to remove one character from front.
- charAt(0) is a prototype method of a string that allows you to get the first char out of the string.
So, you get each character out and add it to the back.
Using this method in the interview shows that you are a seasoned programmer. Also, mention to your interviewer that there is a risk involved in using recursion, since JavaScript currently doesn’t have tail optimization available, you will get stack overflow error if your string is more that few thousand characters.
What about the complexity?
It’s always important to talk to your interviewer what the complexity of each algorithm would be. In all three methods, complexity would be o(n) because we only visit each element once. However, in the first two methods we are converting string to array so we need that extra little space. The third method is the best in space and time complexity.
What about the edge cases?
In a real interview, you always have to think about edge cases, for example, what if you get an empty array, or an array that is too long. or what if instead of an array someone passes a different data structure. You can check if the argument is string or not by using ‘typeof’ operator before reversing it.
If you have a method that i have not mentioned here, please share with me via comment. And, good luck with your interview! 😊
