How to Reverse a String in JavaScript

In this tutorial, you’ll be going to learn how to reverse a string in javascript. The simple way to use a combination of javascript inbuilt functions which are Array.Split(), Array.reverse() and Array.join().

There are two ways we implement how to reverse a string in javascript. One of them is to use a combination of javascript inbuilt function and the second one is to reverse a string without using javascript inbuilt function.

Reverse a string in javascript is not a big task but how a developer achieves this task is matter. So in this post, I will tell you multiple ways how to implement this task.

There are many times as a developer you are facing this question in an interview so stick to the end of the post so you can learn the concept because a concept works in all technology stack.

Also, see our other javascript series-

  1. Find Max and Min Value from an Array in JavaScript
  2. How To Empty An Array In JavaScript
  3. Check if the object is empty in javascript
  4. How to check if array is empty in javascript
How to Reverse a String in JavaScript
JavaScript: How to Reverse a String

How to Reverse a String in JavaScript

Table Of Content

  1. Reverse a String With Built-In Functions — with split(), reverse() and join()
  2. Using Spread Operator, reverse() and join()
  3. ES5 Reduce Method To Reverse String
  4. Reverse String Using For Loop – Without built-in Function
  5. Using While Loop – Without built-in Function
  6. Reverse String Using Recursion

So you’ll be going to learn all above point to reverse a string in a javascript step by step and choose any point for yourself to implement in your project.

With Built-In Functions — with split(), reverse() and join()

To implement this method, we need to use a javascript array function which is Array.split(), Array.reverse() and Array.join().

  • Array.split() method split a string into an array of a string by separating the string to substring.
  • Array.reverse() method reverse the array elements so the first element of an array in the last place and the last element comes in the first place.
  • Array.join() join all the elements of the array into a string.

Now let’s move on to a code section.

let split_string = "codekila"

let string_array = split_string.split("")
// split array method => [ "c" , "o" , "d" , "e" , "k" , "i" , "l" , "a" ] 

let reverse_array = string_array.reverse()

// reverse array method => [ "a" , "l" , "i" , "k" , "e" , "d" , "o" , "c" ]

// join array => alikedoc
let reverse_string = reverse_array.join("")


console.log(reverse_string)

// result => alikedoc

So it’s just three methods which will help to reverse a string in javascript. But instead of writing a lot of line of code to implement reverse a string.

You can also implement a chaining method to get that same result just by writing one line of code. Let’s look for a below code.

let reverse_string = "codekila"

reverse_string = reverse_string.split("").reverse().join("")
// split array method => [ "c" , "o" , "d" , "e" , "k" , "i" , "l" , "a" ] 
// reverse array method => [ "a" , "l" , "i" , "k" , "e" , "d" , "o" , "c" ]
// join array => alikedoc

console.log(reverse_string)

// result => alikedoc

So it’s an easy approach to reverse a string in javascript but you can also make a reusable function to get a same result. Let’s look at the below example.


// function to reverse string
function reverse_string(string){

  // split array method => [ "c" , "o" , "d" , "e" , "k" , "i" , "l" , "a" ] 
  // reverse array method => [ "a" , "l" , "i" , "k" , "e" , "d" , "o" , "c" ]
  // join array => alikedoc

  return string.split("").reverse().join("")

}

let string = "codekila"

console.log(reverse_string(string))

// result => alikedoc

So the above example belongs to dynamic coding, where a function is can be reused multiple times.

Using ES6 Spread Operator, reverse() and join()

As we can also use a spread operator with reverse and join an array method to reverse a string. Now let’s look an example.


// function to reverse string
function reverse_string(string){

  // spread operator
  // reverse array method => [ "a" , "l" , "i" , "k" , "e" , "d" , "o" , "c" ]
  // join array => alikedoc

  return [...string].reverse().join("")

}

let string = "codekila"

console.log(reverse_string(string))

// result => alikedoc

The spread operator also a good approach it is used at a place of the split() method.

ES5 Reduce Method To Reverse String

In ES5, we have a very nice method which reduces which also use to reverse a string in javascript. It loops through an array and adds a string after we split a string.

Now let’s see it an action.


// function to reverse string
function reverse_string(string){

  return string.split("").reduce((rev, char)=> char + rev, ''); 

}

let string = "codekila"

console.log(reverse_string(string))

// result => alikedoc

As to reduce first callback argument act as an accumulator which play the main role to reverse a string.

Reverse a String Using For Loop – Without built-in Function

So now we implement how to reverse a string in javascript without using an inbuilt function. We have a traditional approach to iterate an array in javascript and do what you want.


// function to reverse string
function reverse_string(string){
     let reverse = ""
     // looping a string
     for (var i = string.length - 1; i >= 0; i--){        
       reverse += string[i];
     }
     return reverse 
}

let string = "codekila"

console.log(reverse_string(string))

// result => alikedoc

To reverse a string without using any javascript function. We looping a string and concatenate a string in reverse order.

Using While Loop – Without built-in Function

While loop can also be used in place of for loop to reverse a string. It runs until it satisfies the condition. For this, we need to take a length of string and runs until the end of string length.


// recursion function to reverse string
function reverse_string(string){
     let reverse = ""
     let i = string.length - 1
     // looping a string
     while (i>=0){        
       reverse += string[i];
       i--;
     }
     return reverse 
}

let string = "codekila"

console.log(reverse_string(string))

// result => alikedoc

So there are many traditional approaches which do not require any built-in function to complete a certain task and definitely, a reverse string is one of them.

Reverse String Using Recursion

As we can also use recursion method to reverse a string in javascript. In recursion, function calling function until a certain condition. Recursion is an important approach to dealing with many kinds of problem.

Let’s see a recursion reverse string example.


// recursion function to reverse string
function reverse_string(str){
 return str ? reverse_string(str.substr(1)) + str[0] : str
}

let string = "codekila"

console.log(reverse_string(string))

// result => alikedoc

So, recursion is in action. We achieve the same result as our string is reversed.

Conclusion :

As you can see there are many ways you can implement to how to reverse a string in javascript

We have used only functions and functionality provide by JavaScript only like an Array.spit(), Array.reverse(), Array.join() and also ES5 method like reduce and more.

And we have also implemented the same thing without using any built-in function. Using a traditional approach to reverse a string.

I hope you read the full article and I am very excited to get a comment on this post to get your review.

If you have any question please feel free to ask me in the comment section and also let me know if you have any suggestion is also acceptable. Also, like our Facebook Page.

You can also check :

  1. Phone Number Validation in HTML5
  2. Convert PHP array to JavaScript array
  3. Get Multiple Elements By Id Using Javascript
  4. Remove duplicates from a javascript array

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *