Reverse String on JavaScript

Published in

CodeX

4 min readDec 23, 2021

Did you ever try to read an open book from the mirror with the reverse letters? I did try reading reverse letters, perhaps you too. More people also tried reading that opened book from a mirror when they were kids. We were all curious kids, and we didn’t have YouTube or Tik Tok, so we got all the time in our hands to find out letters look reversed in front of a mirror.

Do you know who’s also curious? The next hiring manager you’ll have a technical interview with will probably ask you this question; “Can you reverse a string?” During my mock technical interview a few months ago, the interviewer asked me to create a function that reverses a string. It is a known fact the reverse string algorithm is among the most discussed in technical interviews.

So let’s get into it and reverse some strings in different ways with JavaScript.

Reverse With For Loop

First of all, let’s see the logic behind all the one-liners we’ll do by taking a look at the code using a for loop. This will also help solve the problem if asked to do it in another code.

function reverseWordsForLoop(str) {
  let newString = ""
 
  for (let i = str.length - 1; i >= 0; i--) {
    newString += str[i];
  }
  return newString;
}

As you can see in the for loop, the i starting point represents the last character of the string. As long as i is longer or equals 0, i will decrement. For each iteration, the last character will be added to newString, forming the result reversed string we want.

So if we call;

reverseWordsForLoop(“loop”)

We get a pool.

Reverse String One Line

Now that we tried reversing with the good old for loop, let’s go ahead and do some JavaScript tricks. First, let’s reverse a single-word string with a one-line code.

function reverseString(str) {
  return str.split('').reverse().join('')
}

What we’ll do is return a string using the following methods:

split() to return a new array.
reverse() to reverse that new array.
join() to join all the elements of the new array into a string.

That way, we’ll call;

reverseString(“look”)

And get Robert “Kool” Bell from Kool and The Gang himself.

Reverse Words Order

Let’s suppose we only want to reverse the words and not the letters. We can also overcome any additional space and return that string without any whitespace and the letter in a reversed order. Here’s the function that we’ll write to get the job done.

function reverseWordsOrder(str) {
  return str.split(' ').filter(word => word !== "").reverse().join(' ')
}

Here, we add .filter after the split method, and in this case, we’ll use word as the argument but, you can use any letter if you’d like to make the code a little bit shorter. We’re going to filter everything that’s not equal to whitespace and proceed with the rest of the progress we’ve been doing so far.

That way, you can exclaim winning a game of Uno with the reverse card any way you want;

reverseWordsOrder(“Win my reverse card Uno”)

Reverse Each Word of a Sentence

Our final exercise reversing strings will be an entire sentence.

function reverseWordsLetters(str) {
  return str.split(' ').map(el => el.split('').reverse().join('')).join(' ')
}

In this case, the method we’ll call after split is .map to call each element of the created array with split. After closing the parenthesis, let’s call join again, so we’ll get the string as wanted.

Note: I know this might be confusing. I suggest removing some of the methods and running the code to understand how the function is working.

Write any sentence, and it will be like reading a comic book from a mirror.

reverseWordsLetters("I bet it made you feel just fantastic")

Now that we know how to reverse a string, let’s keep learning new algorithms and tricks to impress and get some beautiful one-line solutions.

Happy Coding!

Overview

Introduction to the Reverse algorithm.
Reverse with a For loop.
Reverse with one-line functions.
Reverse word order.
Reverse complete sentences.

Reference

MDN Web Docs, Reverse