DEV Community

loading...

CodeRecipe: How to reverse an array in JavaScript

samanthaming profile image Samantha Ming ・2 min read

CodeTidbit by SamanthaMing.com

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


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

Discussion (13)

pic
Editor guide
Collapse
ogurinkaben profile image
Ogurinka Benjamin

I saw my name a lot here😁😁.

Collapse
samanthaming profile image
Samantha Ming Author

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

Collapse
ogurinkaben profile image
Ogurinka Benjamin

Lol... just Benjamin😂😂😂

Thread Thread
samanthaming profile image
Samantha Ming Author

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

Collapse
realandersonca profile image
Real Anderson

Good Tips. Something New Learn Today.

Collapse
afozbek profile image
Abdullah Furkan Özbek

Hey Samantha,

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

Thank you 😊

Collapse
mzahraei profile image
Ardalan

Good Tipps

Collapse
samanthaming profile image
Samantha Ming Author

Thanks! Glad you found it helpful 👏

Collapse
mohamedbenoba profile image
Mohamed_Benoba

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

Collapse
aminnairi profile image
Amin • Edited

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.

Collapse
samanthaming profile image
Samantha Ming Author

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

Collapse
mohamedbenoba profile image
Mohamed_Benoba

Good work man!

Collapse
samanthaming profile image
Samantha Ming Author

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! 💯