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
Top comments (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 👏
Some comments may only be visible to logged-in visitors. Sign in to view all comments.