Append to a JavaScript array: push, spread, concat (and prepend with unshift)

Javascript append to array at the end is usually done with Array.prototype.push, optionally with the spread operator to js append to array values from another array in one call. For a new array without touching the old reference, use concat or [...existing, ...more]. This guide matches how to add to an array in JavaScript (broader insert/splice coverage) but focuses on end append patterns. For front insertion, see unshift below and JavaScript unshift(); for ... syntax in general, see the spread operator in JavaScript.

Tested on: Node.js v20.18.2. A short note after each snippet describes what you should see in the console.

Quick reference

End-of-array work is either mutate (push, unshift) or allocate (concat, spread)—the right row depends on whether other code still relies on the original array reference.

push — append one or more values (mutates)

push appends elements and returns the new length, not the array reference.

let fruits = ["apple", "banana", "orange"];
fruits.push("tangerine");
console.log(fruits);

You should see one line like: [ 'apple', 'banana', 'orange', 'tangerine' ].

push returns the new length, not the array:

const arr = ["a", "b"];
const n = arr.push("c");
console.log(n);
console.log(arr);

You should see 2 lines: 3, then [ 'a', 'b', 'c' ].

push(...otherArray) — append array to array in place

Spread the source so each element is appended; a bare array argument becomes a single nested element.

let numbers = [13, 72, 93];
const newNumbers = [88, 45, 70];
numbers.push(...newNumbers);
console.log(numbers);

You should see one line like: [ 13, 72, 93, 88, 45, 70 ].

Without ..., the second array becomes one nested element:

const a = [1, 2];
a.push([3, 4]);
console.log(a);

You should see one line like: [ 1, 2, [ 3, 4 ] ].

Spread literal — append to array javascript immutably

Build a new array so callers still holding the old reference see the previous contents.

let fruits = ["apple", "banana", "orange"];
fruits = [...fruits, "tangerine"];
console.log(fruits);

You should see one line like: [ 'apple', 'banana', 'orange', 'tangerine' ].

Merge two arrays into a new value:

let numbers = [1, 2, 3];
const newNumbers = [4, 5, 6];
numbers = [...numbers, ...newNumbers];
console.log(numbers);

You should see one line like: [ 1, 2, 3, 4, 5, 6 ].

concat — new array, originals unchanged

concat does not change fruits or newFruits; only the returned array combines them.

const fruits = ["apple", "banana", "orange"];
const newFruits = ["tangerine", "watermelon"];
const allFruits = fruits.concat(newFruits);
console.log(allFruits);

You should see one line like: [ 'apple', 'banana', 'orange', 'tangerine', 'watermelon' ].

unshift — prepend at the start (not the end)

Strictly this is not “append,” but the same ... pattern is often paired with push in tutorials. unshift mutates and returns the new length.

let fruits = ["apple", "banana", "orange"];
fruits.unshift("tangerine");
console.log(fruits);

You should see one line like: [ 'tangerine', 'apple', 'banana', 'orange' ].

Prepend all elements of another array:

let numbers = [13, 72, 93];
const newNumbers = [88, 45, 70];
numbers.unshift(...newNumbers);
console.log(numbers);

You should see one line like: [ 88, 45, 70, 13, 72, 93 ].

Optional: push.apply (no spread)

const arr = [0, 1, 2];
const arr2 = [3, 4, 5];
Array.prototype.push.apply(arr, arr2);
console.log(arr);

You should see one line like: [ 0, 1, 2, 3, 4, 5 ].

Summary

• push / push(...items) mutates at the end and returns the new numeric length.
• Spread or concat builds a new array when you must not disturb existing references.
• unshift prepends; push.apply is the classic pre-spread escape hatch.
• Remember push(otherArray) nests the array unless you spread it.

References

MDN references for mutating and immutable array assembly.

• MDN: Array.prototype.push()
• MDN: Array.prototype.unshift()
• MDN: Array.prototype.concat()
• MDN: Spread syntax (...)
• MDN: Array