Problem Statement
How do you reverse a string in JavaScript? Explain multiple approaches.
Explanation
There is no built-in method to reverse a string in JavaScript, but there are several approaches.
Approach 1: Split Reverse Join
Split string into array of characters. Use array reverse method. Join array back to string. This is the most common and readable approach.
Approach 2: For Loop
Loop through string backwards from end to start. Build new string by concatenating characters. More verbose but shows understanding of loops.
Approach 3: Reduce
Use reduce on array of characters. Prepend each character to accumulator. Functional programming style.
Approach 4: Recursion
Recursively take last character and add to reversed rest of string. Good for interviews to show recursion knowledge. Not practical for long strings due to stack limit.
Approach 5: Array From with Map
Use Array from with mapping function. Access characters in reverse order. More concise but less readable.
Best approach:
Split reverse join is the standard solution. It is readable, short, and efficient. Use this in production code.
Common mistakes:
Trying to reverse string directly. Forgetting strings are immutable. Not handling Unicode characters properly.
String reversal is a classic interview question testing array manipulation and understanding of immutability.
Code Solution
SolutionRead Only
const str = 'Hello World';
// APPROACH 1: Split, Reverse, Join (most common)
function reverseString1(str) {
return str.split('').reverse().join('');
}
console.log(reverseString1(str)); // 'dlroW olleH'
// One-liner
const reversed = str.split('').reverse().join('');
// APPROACH 2: For Loop (backwards)
function reverseString2(str) {
let reversed = '';
for (let i = str.length - 1; i >= 0; i--) {
reversed += str[i];
}
return reversed;
}
console.log(reverseString2(str)); // 'dlroW olleH'
// APPROACH 3: For Loop (forwards)
function reverseString3(str) {
let reversed = '';
for (let char of str) {
reversed = char + reversed; // Prepend
}
return reversed;
}
console.log(reverseString3(str));
// APPROACH 4: Reduce
function reverseString4(str) {
return str.split('').reduce((reversed, char) => char + reversed, '');
}
console.log(reverseString4(str));
// APPROACH 5: Recursion
function reverseString5(str) {
if (str === '') return '';
return reverseString5(str.slice(1)) + str[0];
}
console.log(reverseString5(str));
// Alternative recursion
function reverseString6(str) {
return str.length <= 1 ? str : reverseString6(str.slice(1)) + str[0];
}
// APPROACH 6: Array.from with map
function reverseString7(str) {
return Array.from(str, (_, i) => str[str.length - 1 - i]).join('');
}
console.log(reverseString7(str));
// APPROACH 7: Spread operator
function reverseString8(str) {
return [...str].reverse().join('');
}
console.log(reverseString8(str));
// PERFORMANCE COMPARISON
console.time('split-reverse-join');
for (let i = 0; i < 100000; i++) {
str.split('').reverse().join('');
}
console.timeEnd('split-reverse-join');
console.time('for-loop');
for (let i = 0; i < 100000; i++) {
let r = '';
for (let j = str.length - 1; j >= 0; j--) r += str[j];
}
console.timeEnd('for-loop');
// HANDLING UNICODE (emojis)
const emoji = 'Hello 👋 World 🌍';
// Wrong way (breaks emojis)
console.log(emoji.split('').reverse().join(''));
// '🌍 dlroW 👋 olleH' (might show broken emojis)
// Correct way for Unicode
function reverseStringUnicode(str) {
return [...str].reverse().join('');
}
console.log(reverseStringUnicode(emoji));
// PRACTICAL USE CASES
// Check if palindrome
function isPalindrome(str) {
const cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, '');
return cleaned === cleaned.split('').reverse().join('');
}
console.log(isPalindrome('A man a plan a canal Panama')); // true
console.log(isPalindrome('hello')); // false