I have seen some YouTubers not use array.push() to add items to an array but rather do something like:

let item = 3
let array = [1, 2];

array = [...array, item]; // Why not use array.push()?

Is there any difference between the two methods and which one should i use?

I have seen some YouTubers not use array.push() to add items to an array but rather do something like:

let item = 3
let array = [1, 2];

array = [...array, item]; // Why not use array.push()?

Is there any difference between the two methods and which one should i use?

• javascript
• arrays

• Try let array2 = array; and then push or [...], then pare array and array2 and you'll see the difference. – deceze ♦ Commented May 24, 2021 at 9:51
• 2 [...array, item] - this will: 1. create a new array. 2. copy (shallow) all the items from array into this newly created array. 3. add the item in the newly created array. Difference lies in the creation of the new array as pared to manipulating the existing array incase of push() method. – Yousaf Commented May 24, 2021 at 9:57
• 1 Has anyone tested this form a performance point of view? Is array.push() actually more efficient or is it the same? – Gianluca Filitz Commented Feb 9, 2023 at 15:04

3 Answers 3

Push: Use push when you want to add data in the existing array and don't want to cra

When you use the push method, you are adding the element to the existing one i.e not creating a new array.

The push() method adds one or more elements to the end of an array and returns the new length of the array. - MDN

const arr = [1, 2, 3, 4, 5];
const returnValue = arr.push(6);

console.log(arr);
console.log(returnValue)

Spread Syntax: Use spread syntax if you want to add elements in new array(it can be from spread or can add more new elements also) but will create a new array []

This is called spread syntax

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

let array = [1, 2];
let item = 3

result = [...array, item];
console.log(result === array);

In the above snippet you are creating a new array and assigning values 1, 2 then you are using spread syntax to spread it into a new array. You can also add new elements also like item whose value is 3.

array.push manipulates the existing array. The latter makes a new copy with the new value.

Array push is used to push items kn exisiting array but if we want a copy of an element of an array as a new array variable- you can use […array] operator.