In this article we're going to see how you can change an array immutably
Add new values at the end (push)
const boringSuperpowers = [
'X-ray vision',
'Invisibility',
'Super strength',
];
const yourSuperpowers = [
...boringSuperpowers,
'Programming in JavaScript',
'Using immutability',
];
/*
yourSuperpowers = [
'X-ray vision',
'Invisibility',
'Super strength',
'Programming in JavaScript',
'Using immutability',
]
*/
Add new values at the beginning (unshift)
const starWarsBefore2000 = [
'A New Hope',
'The Empire Striked Back',
'Return of the Jedi',
];
const starWarsAfter2000 = [
'The Phantom Menace',
'Attack of the Clones',
'Revenge of the Sith',
...starWarsBefore2000,
];
/*
starWarsAfter2000 = [
'The Phantom Menace',
'Attack of the Clones',
'Revenge of the Sith',
'A New Hope',
'The Empire Striked Back',
'Return of the Jedi',
]
*/
Remove the last item (pop)
const week = [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
];
const weekIdLike = week.slice(0, week.length - 1);
/*
weekIdLike = [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
]
*/
Remove the first item (shift)
const countdown = [3, 2, 1];
const almostMidnight = countdown.slice(1);
/*
almostMidnight = [2, 1]
*/
Replace an item inside an array
const starters = [
'Bulbasaur',
'Squirtle',
'Charmander',
];
const sorrySquirtle = [
...starters.slice(0, 1),
'Rattata',
...starters.slice(2),
];
/*
sorrySquirtle = ['Bulbasaur', 'Rattata', 'Charmander']
*/
Remove an item inside an array
Note: You can remove any portion of the array with this technique, not just a single item
const pickACard = [
'Queen of Hearts',
'Ace of Spades',
'2 of Pikes',
];
const remainingCards = [
...pickACard.slice(0, 1),
...pickACard.slice(2),
];
/*
remainingCards = [
'Queen of Hearts',
'2 of Pikes',
]
*/
Sort and/or reverse an array
const people = [
'Bob',
'Alice',
'Charlie',
];
const sorted = [...people].sort();
const reverseSorted = [...sorted].reverse();
/*
sorted = [
'Alice',
'Bob',
'Charlie',
];
reverseSorted = [
'Charlie',
'Bob',
'Alice',
];
*/
Photo by Pietro Rampazzo on Unsplash
Top comments (0)