Javascript Array Method: Simply Reverse a String / .reverse() vs .toReversed() / .join()

When first dipping our toes into the possibilities of programming, learning to reverse a string is a small milestone that we all cross on…

Javascript Array Method: Simply Reverse a String / .reverse() vs .toReversed() / .join()

When first dipping our toes into the possibilities of programming, learning to reverse a string is a small milestone that we all cross on our code learning journey. The task is the crux of many codewars and leetcode problems, as well as the many junior interview code questions (on the easier end of the scale..). This article breaks down a simple way to carry this out by chaining a few javascript methods.

The first step is splitting the string into an array. The reason being we will next be chaining on a javascript array method, therefore it only functions on an array.

const string = "Hello World!"

const split = string.split("")

console.log(split)

console // [
  'H', 'e', 'l', 'l',
  'o', ' ', 'W', 'o',
  'r', 'l', 'd'
]

As we can see, by running the .split() method, targeting a split between each character by not entering anything between our split quotation marks, we now have our string in array form. You can read more about this method in my .split() it up! article.

const string = "Hello World";

const split = string.split("");

const reverse = split.reverse();

console.log(reverse)

[
  'd', 'l', 'r', 'o',
  'W', ' ', 'o', 'l',
  'l', 'e', 'H'
]

console.log(split)

[
  'd', 'l', 'r', 'o',
  'W', ' ', 'o', 'l',
  'l', 'e', 'H'
]

The aformentioned array method is the simple but effective .reverse(), as we can see we now have a reversed array stored in the reverse variable. Below this we can see that when logging our split variable it now also returns as reversed. This is because the .reverse() method mutates the original array it is declared upon.

const string = "Hello World";

const split = string.split("");

const toReversed = split.toReversed();

console.log(toReversed)

[
  'd', 'l', 'r', 'o',
  'W', ' ', 'o', 'l',
  'l', 'e', 'H'
]

console.log(split)

[
  'H', 'e', 'l', 'l',
  'o', ' ', 'W', 'o',
  'r', 'l', 'd'
]

The above snippet identifies a method that does not carry this same mutation. This shows a utilastion of the .toReversed() method and we can see that when logging the split variable, it is in its original order.

Although it makes no difference to our task of reversing a string, it is handy to have this knowledge of the outcomes of the two similar methods.

const string = "Hello World";

const split = string.split("");

const reverse = split.reverse()

const toReversed = split.toReversed();

const reverseJoin = reverse.join("")

const toReversedJoin = reverse.join("")

console.log(reverseJoin, toReversedJoin)

console // dlroW olleH , dlroW olleH

To complete our task we use the .join() method. This method gives us our correct output when declared on reversed arrays from both of our array reversal methods. I see the .join() method as the opposite of the .split() method.

By parsing nothing betwen the quotation marks we convert the array to a string with nothing between each item of the array. If we were to parse a space between the quotation marks we would place spaces between each item of the array when converting our array to a string i.e.

const reverseJoin = reverse.join(" ")

// const toReversedJoin = reverse.join(" ")

console.log(reverseJoin)

console // d l r o W   o l l e H

So to wrap this all up, we can chain all of these methods together within a function.

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

console.log(reverseString("Hello World")

console // dlroW olleH

JRS CODING
twitter.com

Thanks as always for reading :)