Reversing a string is one of the most commonly asked JavaScript questions in the technical round of interviews. Interviewers may ask you to write different ways to reverse a string, reverse a string without using in-built methods, or they may even ask you to reverse a string using recursion!

There are potentially a lot of ways to do it, excluding the built-in reverse method for strings, as JavaScript does not have one.

Below are ten different ways to solve the problem of reversing a string in JavaScript.

Important Notes

• Given an input string and the task is to reverse the input string.

• If we are using a variable to use it to hold the reversed string remember to assign it first to empty quotes ([ "''" ] or [ "\"\"" ]) or it will add [ "undefined" ] to the reversed string :).

• if we are using a loop that increment or assign a value every loop aside from the variable that holds the reversed string, we will declare that variable outside the loop or it will be declared every loop for example instead of:

1const reverseString = (str) => {
2	// ...
3	for (let i; i < str.length; i++) {
4		// ...
5	}
6	// ...
7};

we will do:

1const reverseString = (str) => {
2	// ...
3	let i;
4
5	for (i; i < str.length; i++) {
6		// ...
7	}
8	// ...
9};

A minor optimization :).

• if we are going to use an array method we are going to use the spilt string method first to transform the string to an array of characters for example:

1const reverseString = (str) => {
2	// ...
3	str.split('');
4	// If str = "Hi"
5	// It will return ["H", "i"]
6	// ...
7};

• About the previous point, instead of using the split string method we can use the ES6 spread syntax for example

1const reverseString = (str) => {
2	// ...
3	[...str];
4	// If str = "Hi"
5	// It will return ["H", "i"]
6	// ...
7};

The traditional for loop to reverse the string

In here using the for loop we will loop at the string but we can do it in two different ways by incrementing or decrementing.

Incrementing

1const reverseString = (str) => {
2	let reversedStr = '';
3	let i;
4
5	for (i = 0; i < str.length; i++) {
6		reversedStr = str[i] + reversedStr;
7	}
8	// Can be shortened (but not recommended for readability) to:
9	// for (i = 0; i < str.length; i++) reversedStr = str[i] + reversedStr;
10
11	return reversedStr;
12};
13
14const str = 'Hello World!';
15const reversedStr = reverseString(str); // !dlroW olleH
16console.log(`The reversed of <${str}> is <${reversedStr}>`);

In this example as we loop from the first index we will add the character to the first of the [ "reversedStr" ] variable.

Decrementing

1const reverseString = (str) => {
2	let reversedStr = '';
3	let i;
4
5	for (i = str.length - 1; i >= 0; i--) {
6		reversedStr += str[i];
7	}
8	// Can be shortened (but not recommended for readability) to:
9	// for (i = str.length - 1; i >= 0; i--) reversedStr += str[i];
10
11	return reversedStr;
12};
13
14const str = 'Hello World!';
15const reversedStr = reverseString(str); // !dlroW olleH
16console.log(`The reversed of <${str}> is <${reversedStr}>`);

In this example as we loop from the last index we will add the character to the end of the [ "reversedStr" ] variable.

The for of loop

1const reverseString = (str) => {
2	let reversedStr = '';
3	let char;
4
5	for (char of str) {
6		reversedStr = char + reversedStr;
7	}
8	// Can be shortened (but not recommended for readability) to:
9	// for (char of str) reversedStr = char + reversedStr;
10
11	return reversedStr;
12};
13
14const str = 'Hello World!';
15const reversedStr = reverseString(str); // !dlroW olleH
16console.log(`The reversed of <${str}> is <${reversedStr}>`);

In this example as we loop from the first character we will add it to the first of the [ "reversedStr" ] variable.

The forEach array method

1const reverseString = (str) => {
2	let reversedStr = '';
3
4	str.split('').forEach((char) => {
5		char += str;
6	});
7	// Or
8	// str.split('').forEach(char => char += str);
9
10	return reversedStr;
11};
12
13const str = 'Hello World!';
14const reversedStr = reverseString(str); // !dlroW olleH
15console.log(`The reversed of <${str}> is <${reversedStr}>`);

In this example as we loop from the first character in the array and we will add it to the first of the [ "reversedStr" ] variable.

The reverse array method

1const reverseString = (str) => str.split('').reverse().join('');
2
3const str = 'Hello World!';
4const reversedStr = reverseString(str); // !dlroW olleH
5console.log(`The reversed of <${str}> is <${reversedStr}>`);

In this example as we will use the reverse array method then join it return the string.

ES6 standard

The spread syntax

Like in the previous example we can use the spread syntax instead of the the split string method.

1const reverseString = (str) => [...str].reverse().join('');
2
3const str = 'Hello World!';
4const reversedStr = reverseString(str); // !dlroW olleH
5console.log(`The reversed of <${str}> is <${reversedStr}>`);

The reduce array method

At last we can use the reduce array method.

1const reverseString = (str) =>
2	str.split('').reduce((reversedStr, char) => char + reversedStr, '');
3
4const str = 'Hello World!';
5const reversedStr = reverseString(str); // !dlroW olleH
6console.log(`The reversed of <${str}> is <${reversedStr}>`);

Recursion

1. We will assign the reversedStr [ "reversedStr = ''" ] which mean it has the length of zero!

2. We will add a self explanatory if check [ "if (reversedStr.length >= str.length)" ] if true we will return [ "reversedStr" ].

3. If the check is false we will call the function we are in again, but here we will provide the original string as the first argument again, and as for the second argument we will provide [ "reversedStr" ] but we will add the first character of the [ "str" ] to it first.

1const reverseString = (str, reversedStr = '') => {
2	if (reversedStr.length >= str.length) return reversedStr;
3
4	return reverseString(str, str[reversedStr.length] + reversedStr);
5};
6
7const str = 'Hello World!';
8const reversedStr = reverseString(str); // !dlroW olleH
9console.log(`The reversed of <${str}> is <${reversedStr}>`);