How to Reverse a String in JavaScript

Why Reversing a String Is a Classic Coding Challenge

Before diving into code, it helps to understand why reversing a string comes up so often in interviews and coding exercises. The problem is deceptively simple: take the string "hello" and return "olleh." Yet solving it well touches on fundamental programming concepts: string immutability, array manipulation, iteration, recursion, and algorithm efficiency.

In JavaScript specifically, strings are immutable — you cannot change individual characters in place. To reverse a string you must produce a new string. This constraint makes the problem more interesting because it forces you to think about how you will build the output, not just modify the input.

Beyond interviews, real-world uses for string reversal include palindrome detection, certain encryption algorithms, and text processing tasks like reversing lines in a log file for bottom-up reading. If you just need to reverse text right now without writing any code, our Text Reverser tool does it instantly in your browser.

Method 1: The Classic split().reverse().join() One-Liner

The most widely taught approach to reverse a string in JavaScript chains three built-in methods together:

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

console.log(reverseString('hello')); // 'olleh'
console.log(reverseString('ToolsBox')); // 'xoBslooT'

Here is what each step does:

• split('') — splits the string into an array of individual characters: ['h','e','l','l','o']
• reverse() — reverses the array in place: ['o','l','l','e','h']
• join('') — concatenates the array back into a string: 'olleh'

This is clean, readable, and works perfectly for ASCII text and most common strings. Its main limitation is with multi-code-point Unicode characters, which we cover below. For nearly all practical purposes, this is the approach you should use first.

Method 2: Reversing a String with a for Loop

If you want explicit control over the iteration — or if you are working in an environment where you prefer to avoid creating intermediate arrays — a simple for loop achieves the same result:

function reverseString(str) {
  let reversed = '';
  for (let i = str.length - 1; i >= 0; i--) {
    reversed += str[i];
  }
  return reversed;
}

console.log(reverseString('JavaScript')); // 'tpircSavaJ'

This loop starts at the last character (index str.length - 1) and works backwards, appending each character to a new string. While this is more verbose than the one-liner, it is explicit and easy to understand line by line — making it a strong choice when you need to explain your code to others or step through it with a debugger.

A minor performance note: repeated string concatenation with += can be slow in some older JavaScript engines because strings are immutable and each concatenation creates a new string object. In modern V8 (Node.js and Chrome) this has been optimised away, but for very large strings you could push characters into an array and join at the end for guaranteed efficiency.

Method 3: Reversing a String with Recursion

Recursion is a technique where a function calls itself until it reaches a base case. Reversing a string recursively looks like this:

function reverseString(str) {
  if (str.length <= 1) return str;
  return reverseString(str.slice(1)) + str[0];
}

console.log(reverseString('recursion')); // 'noisrucer'

The logic: take everything from the second character onwards, reverse that substring recursively, then append the first character at the end. The base case is a string of length 0 or 1, which is already "reversed."

Recursive solutions are elegant demonstrations of the concept but are not recommended for production use with large strings. Each recursive call adds a frame to the JavaScript call stack. Strings longer than around 10,000 characters may cause a "Maximum call stack size exceeded" error. Use the split/reverse/join method or a for loop for anything beyond small inputs.

Method 4: Using the Spread Operator for Unicode Safety

The standard split('') approach has a problem: it splits strings by UTF-16 code units, not by Unicode code points. Characters outside the Basic Multilingual Plane — including most emoji and many non-Latin scripts — are represented by surrogate pairs (two UTF-16 code units). Splitting by code unit will break these characters apart, producing garbled output.

// Broken with emoji
'😀😂'.split('').reverse().join(''); // '??'  (garbled)

// Unicode-safe with spread operator
[...'😀😂'].reverse().join(''); // '😂😀'  (correct)

The spread operator [...str] iterates over Unicode code points rather than UTF-16 code units, so emoji and other supplementary characters are treated as single units. If your application handles user input that might contain emoji, flags, or non-Latin text, always prefer the spread operator over split('').

For even more robust Unicode handling — covering combining characters like accented letters composed of a base character plus a combining mark — look at the Intl.Segmenter API (available in modern browsers) or the open-source esrever library.

Reversing the Order of Words in a Sentence

Sometimes you do not want to reverse individual characters — you want to reverse the order of words. For example, "Hello World" becomes "World Hello." The approach is almost identical but you split on spaces instead of empty strings:

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

console.log(reverseWords('Hello World')); // 'World Hello'
console.log(reverseWords('one two three four')); // 'four three two one'

This is useful for natural language processing tasks, building word games, or reversing the display order of a list. Note that this simple version does not handle multiple consecutive spaces. If that is a concern, you can normalise whitespace first using a Whitespace Remover before reversing.

Our Text Reverser tool supports both character-level reversal and word-order reversal with a single toggle, saving you from writing any code at all when you just need a quick result.

Checking Whether a String Is a Palindrome

A palindrome is a word or phrase that reads the same forwards and backwards — "racecar," "level," "madam." String reversal is the foundation of palindrome detection:

function isPalindrome(str) {
  const cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, '');
  return cleaned === [...cleaned].reverse().join('');
}

console.log(isPalindrome('racecar'));       // true
console.log(isPalindrome('A man a plan a canal Panama')); // true
console.log(isPalindrome('hello'));         // false

The cleaned variable removes spaces, punctuation, and case differences before comparison so that phrases like "A man, a plan, a canal: Panama" are correctly identified as palindromes. This is a common follow-up question in coding interviews once you have demonstrated basic string reversal.

If you are working with text manipulation more broadly, you might also find our Word Counter and Text Case Converter useful for preprocessing text before applying reversal logic.

Frequently Asked Questions

Does JavaScript have a built-in string reverse method?

No, JavaScript strings do not have a native reverse() method. However, arrays do. The classic workaround is to split the string into an array of characters, call reverse() on the array, then join the characters back into a string: str.split('').reverse().join('').

How do I reverse only the words in a sentence, not the individual characters?

Split the string on spaces instead of individual characters: str.split(' ').reverse().join(' '). This reverses the order of words while keeping each word's characters intact. Our Text Reverser tool offers both character reversal and word-order reversal as separate options.

Will reversing a string work correctly with emoji or Unicode characters?

The simple split('').reverse().join('') method can break multi-code-point Unicode characters like emoji. For correct Unicode handling use the spread operator ([...str].reverse().join('')) or a library like esrever that is aware of Unicode surrogate pairs.

What is the fastest way to reverse a string in JavaScript for large inputs?

For very large strings, a for-loop that builds the reversed string by iterating from the last character to the first tends to be the most memory-efficient approach. The split/reverse/join method creates two intermediate arrays and is slightly slower, but for strings under a few megabytes the difference is negligible.