JavaScript add to array: push, unshift, splice, concat, spread, length

Javascript add to array and js add to array almost always mean either mutating the same array (push, unshift, splice, length) or building a new array (concat, spread, toSpliced). For javascript add array to array, common patterns are first.push(...second), first.concat(second), or [...first, ...second]. Pick based on whether callers must keep the old reference unchanged—see how to append to an array in JavaScript and JavaScript unshift() for deeper method guides, and the spread operator in JavaScript for ... syntax.

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

Quick reference

Most “add to array” tasks are either mutate in place (push, unshift, splice, length) or return a new array (concat, spread, toSpliced)—pick based on whether other owners still hold the old reference.

1. push — javascript add element to array at the end

push appends one or more elements and returns the new length—ideal for stacks and growing buffers when sharing the same array reference is intentional.

const arr = [11, 22, 33];
arr.push(34);
console.log(arr);

You should see one line like: [ 11, 22, 33, 34 ].

To javascript add array to array into the same array, spread the second array so each element is appended (not nested as a single element):

const vegetables = ["parsnip", "potato"];
const moreVegs = ["celery", "beetroot"];
vegetables.push(...moreVegs);
console.log(vegetables);

You should see one line like: [ 'parsnip', 'potato', 'celery', 'beetroot' ].

2. unshift — js array add at the beginning

unshift shifts existing indices upward; like push, it mutates and returns the new length.

const arr = [11, 22, 33];
arr.unshift(10);
console.log(arr);

You should see one line like: [ 10, 11, 22, 33 ].

3. splice — insert at an index (mutating)

splice(start, deleteCount, ...items) can remove or insert at any position; see JavaScript splice for delete/replace patterns.

const arr = [1, 2, 3];
arr.splice(1, 0, 4);
console.log(arr);

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

4. toSpliced — same idea as splice, new array (ES2023)

Useful when you want add to array javascript semantics without mutating the source (similar spirit to toSorted / toReversed).

const arr = [1, 2, 3];
const next = arr.toSpliced(1, 0, 4);
console.log(arr);
console.log(next);

You should see 2 lines: [ 1, 2, 3 ], then [ 1, 4, 2, 3 ].

5. concat — new array, originals unchanged

const arrOne = ["wow", 31, true, "GoLinux"];
const arrTwo = arrOne.concat("JavaScript");
console.log(arrOne);
console.log(arrTwo);

You should see 2 lines: [ 'wow', 31, true, 'GoLinux' ], then [ 'wow', 31, true, 'GoLinux', 'JavaScript' ].

Javascript add array to array with concat (one level of array elements merged):

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

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

If you need a single nested array as one element, wrap it: a.concat([b]) → [ 1, 2, [ 3, 4 ] ] (not shown; easy to confuse with concat(b)). When concat nesting was accidental, flatten array in JavaScript with flat() or flat(Infinity) opens the extra levels.

6. Spread + slice — immutable insert in the middle

const arr = [11, 22, 33];
const newArr = [...arr.slice(0, 2), 44, ...arr.slice(2)];
console.log(arr);
console.log(newArr);

You should see 2 lines: [ 11, 22, 33 ], then [ 11, 22, 44, 33 ].

Equivalent merge without mutating either input:

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

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

7. length — grow (empty slots) or shrink

Growing length adds empty slots; Node prints them as <n empty items> until you assign.

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

You should see 3 lines: 4, then [ 1, 2, 3, 4, <2 empty items> ], then [ 1, 2, 3, 4, 5, 6 ].

Shrinking length truncates from the end (like repeated pop); see JavaScript Array.prototype.pop for removing the last element explicitly.

const numbers = [1, 2, 3, 4];
console.log(numbers.length);
numbers.length = 2;
console.log(numbers);

You should see 2 lines: 4, then [ 1, 2 ].

Summary

Mutators (push, unshift, splice, length) change the same array reference; copiers (concat, spread, toSpliced) build new arrays for immutable-style pipelines.

• End: push or push(...items); start: unshift.
• Middle, mutate: splice; middle, copy: toSpliced or slice + spread.
• New top-level array: concat, spread, or toSpliced.
• length grows or shrinks in place; new slots are holes until assigned.

References

MDN references for the main mutators and immutable variants used in javascript add to array flows.

• MDN: Array.prototype.push()
• MDN: Array.prototype.unshift()
• MDN: Array.prototype.splice()
• MDN: Array.prototype.toSpliced()
• MDN: Array.prototype.concat()