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 ]

console.log(morefruits)
//[ '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']

console.log(morefruits)
//[ '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
12:	Array Recipes