Arrays: Modifying an existing array without mutating it

The best way to add an item to the array without mutating its content, in other words creating a new array, is to use the spread operator.

Check this example:

const fruits = ['banana', 'pear', 'apple']

const morefruits = ['orange', ...fruits ]

//[ 'orange', 'banana', 'pear', 'apple' ]

How does it work? When we use ...fruits we basically expand the content of fruits. Since we enclosed that in the array literal syntax [], we’ll end up creating a new array morefruits, with the original content of fruits, plus anything we add to it.

We used ['orange', ...fruits ] to add an orange to the list of fruits, in the first position.

In the same way, you can append to the end of the array using [...fruits, 'orange']:

const fruits = ['banana', 'pear', 'apple']

const morefruits = [...fruits, 'orange']

//[ 'banana', 'pear', 'apple', 'orange' ]

Lessons in this unit:

0: Introduction
1: Number of items in an array
2: Create a new array from an existing array
3: Adding an item to an existing array
4: Adding at the beginning of an array
5: Adding multiple items to the array
6: Removing an item from an array
7: ▶︎ Modifying an existing array without mutating it
8: Arrays of arrays
9: Filling an array
10: Array destructuring
11: Check if an array contains a specific value
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!