How to Reverse a String in JavaScript

When it comes to running strings in JavaScript, one of the simple tasks is reversing a string.

Either you’re a beginner learning JavaScript or a professional developer looking for different methods, and this article will help you to learn how to reverse a string in JavaScript.

In this article, we will discuss different methods, best practices, and FAQs related to string reversal.

Methods to Reverse a String in JavaScript

The following are the methods to revers a string in JavaScript:

Method 1: Using a Loop

One of the methods to reverse a string in JavaScript is by using a loop.

Here’s an example code of how you can do this:

function reverseStringExample(str) {
  let reversedSample = "";
  for (let x = str.length - 1; x >= 0; x--) {
    reversedSample += str[x];
  }
  return reversedSample;
}

const originalStringExample = "Welcome, to Itsourcecode!";
const reversedSampleString = reverseStringExample(originalStringExample);
console.log(reversedSampleString);

Output:

In the code example above, we specify a function reversedSampleString that takes a string as an argument.

Then, we create an empty string called reversed, and then iterate through each character of the input string in reverse order.

Next, through appending each character to the reversed string, we create the reversed version of the original string.

Finally, the function returns the reversed string.

Method 2: Using the split(), reverse(), and join() Functions

Another method to reverse a string in JavaScript is by using the split(), reverse(), and join() methods.

Let’s see an example of how this can be achieve:

function reverseStringSample(str) {
  return str.split("").reverse().join("");
}

const originalStringExample = "Welcome to the Tutorial of Reverse String!";
const reversedStringSample = reverseStringSample(originalStringExample);
console.log(reversedStringSample);

Output:

In this method, we use the split(“”) method to convert the string into an array of characters.

Then, we apply the reverse() method to reverse the order of the array elements.

Finally, we use the join(“”) method to convert the reversed array back into a string.

Method 3: Using Recursion

Recursion is another powerful method that can be used to reverse a string in JavaScript.

Here’s an example code:

function reverseStringExample(str) {
  if (str === "") {
    return "";
  } else {
    return reverseStringExample(str.substr(1)) + str.charAt(0);
  }
}

const originalSampleString = "Welcome to Itsourcecode!";
const reversedSampleString = reverseStringExample(originalSampleString);
console.log(reversedSampleString);

Output:

In this recursive method, we check if the input string str is empty.

If it is, we return an empty string as the base situation.

Otherwise, we recursively call the reversedSampleString function, passing in a substring of str starting from the second character, and append the first character at the end.

This process continues until the entire string is reversed.

Two More Modern Methods to Reverse a String

Method 4: Spread Operator (ES6+)

The cleanest one-liner in modern JavaScript uses the spread operator to convert the string to an array, then reverses and joins:

const reversed = [...str].reverse().join("");
console.log(reversed);  // works for "hello" → "olleh"

This is functionally identical to str.split("").reverse().join("") but reads cleaner. Both approaches work fine for ASCII strings.

Method 5: Array.from() with reverse()

const reversed = Array.from(str).reverse().join("");

Slightly more verbose than the spread version but does the same thing. Use it when the rest of your codebase already uses Array.from() for consistency.

Unicode and Emoji Strings — The Hidden Trap

Every method above looks correct on simple ASCII text. They break in subtle ways on Unicode-heavy strings, especially emojis and accented characters:

const text = "👨‍👩‍👧";  // family emoji (made of multiple code points)
console.log(text.split("").reverse().join(""));
// ❌ Output: garbled mess of half-characters

console.log([...text].reverse().join(""));
// ✓ Output: still has issues but better — spread iterates by code point

// SAFEST: use Intl.Segmenter for full grapheme awareness
const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
const segments = [...segmenter.segment(text)].map(s => s.segment);
console.log(segments.reverse().join(""));
// ✓ Output: emoji preserved correctly

The reason: emojis like the family character are MULTIPLE Unicode code points combined with zero-width joiners. The split("") method splits at each UTF-16 unit, which cuts emojis in half. The spread operator iterates by code point which is better, but still does not handle grapheme clusters perfectly.

For BSIT capstone projects with Filipino names (which can include é, ñ, ï), the spread method works fine. For apps with heavy emoji content, use Intl.Segmenter.

Performance: Which Method Is Fastest?

The recursion approach is a classic interview question but produces a stack overflow on strings longer than about 10,000 characters in most browsers. Never use it in production code.

Real-World Use Cases

• Palindrome check. Reverse the string and compare to the original: s === [...s].reverse().join("") tells you if it reads the same backwards.
• Right-to-left languages. For displaying Arabic or Hebrew text in a LTR context, you may need to reverse certain substrings.
• Interview questions. “Reverse a string without using built-in methods” is a classic FAANG-style question that tests loop logic.
• URL slug debugging. Reverse a slug to spot patterns in date-based or ID-based URL structures.
• Password strength visualization. Some UI patterns animate the password being typed, which uses reversed strings briefly during the animation.

Common Mistakes Reversing Strings

• Calling reverse() on a string directly. Strings do not have a reverse() method. "hello".reverse() throws an error. You must convert to array first.
• Forgetting that strings are immutable. All these methods return a NEW string. The original string is unchanged. Always assign the result: str = str.split("").reverse().join("").
• Using split() with emojis. "😀".split("") returns 2 broken halves of the emoji. Use the spread operator or Intl.Segmenter for Unicode strings.
• Recursion stack overflow on long inputs. Recursive reverse implementations crash on strings longer than 10,000 characters in most browsers. Use an iterative method for production code.
• Reversing each character vs reversing words. “Hello World” reversed character-by-character is “dlroW olleH”. To reverse WORDS only (“World Hello”), split by space first: str.split(" ").reverse().join(" ").

Related JavaScript Tutorials

• Remove Commas from JavaScript String
• JavaScript nodeType Values
• JavaScript Math.round Function
• JavaScript Backend Frameworks
• JavaScript Tutorial Series

FAQs

Conclusion

In conclusion, reversing a string in JavaScript is a simple task that can be done using different methods.

In this article, we have discussed the three different methods: using a loop, utilizing the split(), reverse(), and join() methods, and using recursion.

We also answered some frequently asked questions related to string reversal. Now within this knowledge, you can confidently reverse strings in JavaScript smoothly.

Additional Resources

• How to Hide Google Map API Key in JavaScript
• How to Set Default Selected Value in Dropdown Using JavaScript
• How to print in JavaScript