CodeRecipe: How to reverse an array in JavaScript

Here's a Code Recipe to keep around if you need to reverse the order of the elements of an array. You can use the array method, "reverse()" ⏪

Trying a new segment called #CodeRecipes. I want to cover questions that I often google. These are recipes that you should definitely keep handy because it's not a matter "if" you use it, but "when" 😉

const benjamin = ['👶','👦', '👨', '👴'];

const benjaminButton = benjamin.reverse();

console.log(benjaminButton);
// ['👴', '👨', '👦', '👶']

Modifies Original Array

One thing to note is that it mutates the original array.

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reverse();

console.log(originalArray); // [ 'c', 'b', 'a' ]
console.log(newArray); // [ 'c', 'b', 'a' ]

How to Reverse Array Without Mutating Original Array

Here are some recipes that won't mutate the original array. Let's take a look 👀

Using slice and reverse

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.slice().reverse();

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

Using spread and reverse

const originalArray = ['a', 'b', 'c'];
const newArray = [...originalArray].reverse();

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

Using reduce and spread

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reduce((accumulator, value) => {
  return [value, ...accumulator]
}, []);

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

Using reduceRight and spread

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reduceRight((accumulator, value) => {
  console.log(value);
  return [...accumulator, value]
}, []);

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

Or using push

const originalArray = ['a', 'b', 'c'];
const newArray = originalArray.reduceRight((accumulator, value) => {
  accumulator.push(value);
  return accumulator;
}, []);

console.log(originalArray); // ['a', 'b', 'c']
console.log(newArray); // [ 'c', 'b', 'a' ]

Community Input

@aminnair: I decided to test another way of thinking this. Here are the results:

with slice and reverse: 83.085ms
With one loop: 309.763ms

Source code and tests are available here

Resources

• MDN Web Docs: reverse
• w3schools: reverse
• Stack Overflow: Reverse array in Javascript without mutating original array

---

Thanks for reading ❤
Say Hello! Instagram | Twitter | Facebook | Blog | SamanthaMing.com

Comments

[Ogurinka Benjamin]

I saw my name a lot here😁😁.

[Samantha Ming]

Lol, it’s a good name! Hopefully it’s just Benjamin and not Benjamin button 😂

[Ogurinka Benjamin]

Lol... just Benjamin😂😂😂

[Samantha Ming]

Phew! Cause I don’t think I know a doctor for that otherwise 😂

[Real Anderson]

Good Tips. Something New Learn Today.

[Abdullah Furkan Özbek]

Hey Samantha,

I have a question: What is the runtime of Array.reverse() method ?

Thank you 😊

[Ardalan]

Good Tipps

[Samantha Ming]

Thanks! Glad you found it helpful 👏

[Mohamed_Benoba]

Thank you Samantha, I think if you text the best way fpr the performance, it will be a great article.

[Amin]

I decided to test another way of thinking this. Here are the results:

with slice and reverse: 83.085ms
With one loop: 309.763ms

Source-code and tests are available here.

I though that using one for loop (compared to a chained call using slice & reverse) would be more performant. I was wrong.

What Samantha showed is great work, I'm trying to show alternatives and another way of thinking this through.

[Samantha Ming]

Fantastic! Thanks for sharing this! I’ll add this to my notes 👏👏👏

[Mohamed_Benoba]

Good work man!

[Samantha Ming]

You’re right I should of done test 😅

If someone is reading this and you’ve done test. Drop it in the comments and I’ll add it to my code notes! 💯