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! ๐Ÿ’ฏ