How to reverse a string in JavaScript

Here is a really simple way to reverse a string in Javascript.

let string = "abcdef";
let reverseString = string.split('').reverse().join('');

Let’s go over the code.

For starters, strings in JavaScript behave like arrays but are not actually arrays so handy array methods like reverse() cannot be used on them. So we use the split method for string objects to convert the string into an array.

This is the split function according to MDN: “The split() method takes a pattern and divides a String into an ordered list of substrings by searching for the pattern, puts these substrings into an array, and returns the array.”

When we use an empty string as the separator, it simply returns an array with all of the individual characters as elements. So split with an empty string is a very simple way to turn a string into an array.

Next up, we have the reverse method for array objects. Since the split method has converted our string into an array, we can now simply call reverse on it to reverse the array.

This is the join method according to MDN.

“The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.”

Since we are calling join with an empty string as the separator, the elements in the array will simply be concatenated together and returned in a string.

Now we have reversed a string with three simple method calls.

Hope this helps. There are other methods to reverse strings in JavaScript, please feel free to leave a comment down below with your favorite method!

These are the sources I’ve used for this tutorial and will link them in below.

This method was documented in Chris Wellons’s blog “null program” in an excellent article titled “JavaScript Strings as Arrays” https://nullprogram.com/blog/2012/11/15/

And of course MDN is an excellent resource used for the method definitions if you want an in-depth look at how the methods work and their idiosyncrasies: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

I’m making these tutorials as I’m learning JavaScript so I hope it comes in handy for other beginners. Hope you guys stay sane and safe out there and I’ll catch you guys next time.