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
Discussion (13)
I saw my name a lot here๐๐.
Lol, itโs a good name! Hopefully itโs just Benjamin and not Benjamin button ๐
Lol... just Benjamin๐๐๐
Phew! Cause I donโt think I know a doctor for that otherwise ๐
Good Tips. Something New Learn Today.
Hey Samantha,
I have a question: What is the runtime of Array.reverse() method ?
Thank you ๐
Good Tipps
Thanks! Glad you found it helpful ๐
Thank you Samantha, I think if you text the best way fpr the performance, it will be a great article.
I decided to test another way of thinking this. Here are the results:
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.
Fantastic! Thanks for sharing this! Iโll add this to my notes ๐๐๐
Good work man!
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! ๐ฏ