How to Reverse string in JavaScript

#webdev #javascript #beginners #programming

Hello and welcome to my first article! As a tech newbie myself, I understand how daunting it can be to dive into the world of technology. But fear not! This article is designed to provide you with a basic introduction to the topic at hand, and I hope it will help you gain a better understanding of the subject.

So sit back, relax, and get ready to learn something new. Let's dive into the fascinating world of technology together!

In programming, string manipulation is a common task that is required to achieve various objectives. One such task is to reverse a string. A string reversal means to change the order of the characters in a string. For instance, reversing the string "Hello" will give "olleH". In this article, we will discuss how to reverse a string in JavaScript.

There are several ways to reverse a string in JavaScript. We will discuss some of the most commonly used methods below.

Using the split(), reverse(), and join() methods This is the most commonly used method to reverse a string in JavaScript. It involves splitting the string into an array of characters, reversing the array, and then joining the array back into a string. Here's how to do it:

const str = "Hello";
const reversedStr = str.split("").reverse().join("");

console.log(reversedStr);

The split() method splits the string into an array of characters, the reverse() method reverses the order of the elements in the array, and the join() method joins the elements of the array back into a string.

Using a for loop

Another way to reverse a string is to use a for loop. This method involves iterating through the string from the last character to the first character and concatenating the characters into a new string.

Here's how to do it:

const str = "Hello";
let reversedStr = "";
for (let i = str.length - 1; i >= 0; i--) {
  reversedStr += str[i];
}
console.log(reversedStr);

This method initializes an empty string and then iterates through the original string from the last character to the first character using a for loop. In each iteration, the current character is concatenated to the new string.

Using recursion

Another way to reverse a string is to use recursion. This method involves calling a function recursively to reverse the string.

Here's how to do it:

function reverseString(str) {
  if (str === "") {
    return "";
  } else {
    return reverseString(str.substr(1)) + str.charAt(0);
  }
}
console.log(reverseString("Hello"));

This method checks if the string is empty. If it is, it returns an empty string. If it is not empty, it calls the function recursively with the substring starting from the second character and concatenates the first character to the end.

In conclusion, there are several ways to reverse a string in JavaScript. The most commonly used method involves using the split(), reverse(), and join() methods. Other methods include using a for loop and recursion. Each method has its advantages and disadvantages, and the best method to use depends on the specific requirements of the project.

Thank you for reading to this point, I hope this was helpful in some way.

Top comments (11)

Hakki • Mar 28 '23 • Edited

Using split('') might not work well with Unicode characters, especially with characters outside the Basic Multilingual Plane (BMP). To properly handle Unicode characters, you can use the Array.from() method to create an array of characters while preserving the Unicode characters.

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

peerreynders • Mar 28 '23

It returns an iterator that yields the Unicode code points of the string value as individual strings.

To reverse a unicode string you need an iterator over the grapheme clusters.

String.prototype[@@iterator]() - JavaScript | MDN

The @@iterator method of a string implements the iterable protocol and allows strings to be consumed by most syntaxes expecting iterables, such as the spread syntax and for...of loops. It returns an iterator that yields the Unicode code points of the string value as individual strings.

developer.mozilla.org

Jon Randy 🎖️ • Mar 27 '23

Using :str.split('') does not work at all well with Unicode characters. [...str] is much better, but still not perfect.

peerreynders • Mar 27 '23 • Edited

import ReverseString from "./reverse-string"

// …

it('emoji grapheme clusters', () => {
    // multi-codepoint grapheme clusters
    const emojis =   [
      '\uD83C\uDF37',
      '\uD83C\uDF81',
      '\uD83D\uDCA9',
      '\uD83D\uDE1C',
      '\uD83D\uDC4D',
      '\uD83C\uDFF3\uFE0F\u200d\uD83C\uDF08'
    ];
    const input = emojis.join('');
    const expected = emojis.reverse().join('');
    expect(ReverseString.reverse(input)).toEqual(expected);
  })

grapheme-splitter

Intl.Segmenter - JavaScript | MDN

The Intl.Segmenter object enables locale-sensitive text segmentation, enabling you to get meaningful items (graphemes, words or sentences) from a string.

developer.mozilla.org