Subscribe

Reverse an Array in Vanilla JavaScript

✍️

In today's guide we will learn how to reverse arrays using Vanilla JavaScript. See the code examples in Codepen!

9 Feb, 2021 · 2 min read

You will often need to reverse an array in JavaScript.

Imagine you’re receiving data based on a date, for example. In the frontend, you’ll most likely want to show the data reversed, meaning the most recent date first.

This is where the JavaScript reverse method comes in handy.

It’s a super cool array method, and it’s easy to use.

To do an array reverse in JavaScript, call the reverse method on a variable, like this:

const array = ['a', 'b', 'c'];
array.reverse();
// [ 'c', 'b', 'a' ]

As you can see, the method reversed our initial input array.

JavaScript reverse array but keep original

You might not want to reverse the original array in some cases but want to create a copy.

This is where we can use the JavaScript spread operator.

const array = ['a', 'b', 'c'];
const reverse = [...array].reverse();
// array: [ 'a', 'b', 'c' ]
// reverse: [ 'c', 'b', 'a' ]

And that is how to reverse an array in JavaScript. You learn two methods: One changes the original array and the other creates a new array in reversed order.

Reversing arrays is pretty straightforward and comes in super handy.

See the example code in this Codepen

You can have a play with today’s code here:

See the Pen Vanilla JavaScript reverse an array by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Removing all vowels with JavaScript

3 Dec, 2022 · 2 min read

Removing all vowels with JavaScript

10 games to learn JavaScript

2 Dec, 2022 · 3 min read

10 games to learn JavaScript

Join 2097 devs and subscribe to my newsletter