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: