# How to reverse a string in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published May 6, 2019, updated Oct 4, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/string-reverse-javascript

> Learn how to reverse a string in JavaScript using built-in methods like split(), reverse(), and join().

To reverse a string in JavaScript:

1. Use the `split()` method to [split a string](https://attacomsian.com/blog/javascript-string-split) into an array of substrings using a separator.
2. Pass the array to the `reverse()` method to reverse the order of the elements in an array.
3. Use the `join()` method to join all elements of an array into a string and returns the new string.

```javascript
const str = 'john doe'

const tokens = str.split('')
// [ 'j', 'o', 'h', 'n', ' ', 'd', 'o', 'e']

const reversed = tokens.reverse()
// ['e', 'o', 'd', ' ', 'n', 'h', 'o', 'j']

const finalStr = reversed.join('')
console.log(finalStr)
// eod nhoj
```

The `reverse()` method reverses the order of the elements in an array. The first element becomes the last, and the last element becomes the first.

The `join()` method joins all elements of an array into a string and returns the new string.

You can also combine these three methods together and create a function as shown below:

```javascript
const reverseStr = str => {
  return str.split('').reverse().join('')
}

reverseStr('hello world!')
// => !dlrow olleh
```

## Reverse a string using a decrementing loop

Reversing a string using for loop might appear naive, but it works well. We can use decrementing (or even incrementing) loop to iterate over each character of the string and create a new reversed string:

```javascript
const reverseStr = str => {
  let reversed = ''
  for (let i = str.length - 1; i >= 0; i--) {
    reversed += str[i]
  }
  return reversed
}

reverseStr('hello world!')
// => !dlrow olleh
```

A modern for loop syntax using ES6 [`for...of`](https://attacomsian.com/blog/javascript-for-of-loop):

```javascript
const reverseStr = str => {
  let reversed = ''
  for (const c of str) {
    reversed = c + reversed
  }
  return reversed
}
```

## Reverse a string using recursion

Recursion is another way to reverse a string in JavaScript. This approach involves two JavaScript functions: `substr()` and `charAt()`. 

The first method returns a substring of a string and the second method returns the specified character of a string.

```javascript
const reverseStr = str => {
  return str ? reverseStr(str.substr(1)) + str[0] : str
}

reverseStr('hello world!')
// => !dlrow olleh
```

The number of times the recursive function is called, depends on the length of the string. It will become slow if the string is very long. So this is not a very good solution but still a way to solve the challenge.

## Reverse a string using the `reduce()` method

Another rarely used approach to reverse a string in JavaScript is using the [`Array.reduce()`](https://attacomsian.com/blog/javascript-array-reduce) function. 

This method reduces the array to a single value. Since this function works for arrays, we first need to split the string into an array using the `split()` method.

``` javascript
const reverseStr = str => {
  return str.split('').reduce((r, c) => c + r, '')
}

reverseStr('hello world!')
// => !dlrow olleh
```

## Summary

There are tons of different ways to reverse a string in JavaScript. In this tutorial, we have discussed 4 different approaches to solving the reverse string challenge:

1. Using built-in JavaScript functions like `split()`, `reverse()`, and `slice()`. It is straightforward and perhaps the best approach.
2. Using for loop to iterate over all characters of a string and create a new reversed string.
3. Recursively convert the string into a substring until the empty string is reached, and then combine them to form a reversed string. It may become slow if the string is large.
4. Splitting the string into an array and then reducing the array into a single value using the `Array.reduce()` function.