JavaScript Add Item to Array Guide

Arrays are core to JavaScript. You often need to add items to them. This guide shows you the best ways to do it.

We cover all methods. Each method has clear examples. You will learn when to use each one.

Why Add Items to Arrays?

Arrays store lists of data. You add items to update those lists. Common tasks include adding user input or new records.

JavaScript offers several ways. The right choice depends on where you want to add the item.

Method 1: push() – Add to End

The push() method adds items to the end of an array. It is the most common method.

It modifies the original array. It returns the new length of the array.

 
// Example: push() adds items to the end
let fruits = ['apple', 'banana'];
// Add one item
let newLength = fruits.push('orange');
console.log(fruits);
// Output: ['apple', 'banana', 'orange']
console.log(newLength);
// Output: 3

['apple', 'banana', 'orange']
3

Important:push() is very fast. Use it when order matters and you add to the end.

Method 2: unshift() – Add to Start

The unshift() method adds items to the beginning of an array.

It also modifies the original array. It returns the new length.

 
// Example: unshift() adds items to the start
let numbers = [2, 3, 4];
let newLength = numbers.unshift(1);
console.log(numbers);
// Output: [1, 2, 3, 4]
console.log(newLength);
// Output: 4

[1, 2, 3, 4]
4

Important:unshift() is slower than push(). It shifts all existing elements. Use it only when you must add to the start.

Method 3: splice() – Add Anywhere

The splice() method is powerful. It can add, remove, or replace items anywhere.

It modifies the original array. It takes three arguments: start index, delete count, and items to add.

 
// Example: splice() adds items at index 2
let colors = ['red', 'green', 'blue'];
// Add 'yellow' and 'purple' at index 2 (before 'blue')
colors.splice(2, 0, 'yellow', 'purple');
console.log(colors);
// Output: ['red', 'green', 'yellow', 'purple', 'blue']

['red', 'green', 'yellow', 'purple', 'blue']

Important: Set delete count to 0 when only adding. This prevents removing existing items.

Method 4: Spread Operator – Create New Array

The spread operator (...) creates a new array. It does not modify the original.

This is useful for immutability. You get a fresh copy with added items.

 
// Example: spread operator creates new array
let oldArray = [1, 2, 3];
// Add item at the end
let newArray = [...oldArray, 4];
console.log(oldArray);
// Output: [1, 2, 3]
console.log(newArray);
// Output: [1, 2, 3, 4]
// Add item at the start
let anotherArray = [0, ...oldArray];
console.log(anotherArray);
// Output: [0, 1, 2, 3]

[1, 2, 3]
[1, 2, 3, 4]
[0, 1, 2, 3]

Important: Use spread for clean code. It works well with React or state management.

Method 5: concat() – Merge Arrays

The concat() method merges two or more arrays. It returns a new array.

It does not change the original arrays. It is safe for immutable operations.

 
// Example: concat() merges arrays
let arr1 = ['a', 'b'];
let arr2 = ['c', 'd'];
let merged = arr1.concat(arr2);
console.log(merged);
// Output: ['a', 'b', 'c', 'd']
console.log(arr1);
// Output: ['a', 'b']

['a', 'b', 'c', 'd']
['a', 'b']

Important:concat() is slower for single items. Use push() or spread for better performance.

Choosing the Right Method

Pick based on your needs. Use push() for speed at the end. Use unshift() for the start.

Use splice() for precise positions. Use spread or concat() for immutability.

For more details, check our JavaScript Array Methods Guide.

Common Mistakes

Beginners often forget that push() and unshift() modify the array. Always check if you need a copy.

Another mistake is using splice() with wrong indices. Always test your code.

For variable handling, see our JavaScript Array Variables Guide.

Performance Tips

push() is fastest for adding to the end. unshift() is slowest for large arrays.

Spread operator is slower than push() but safer for immutability. Use it wisely.

For large data, prefer push() in loops. Avoid splice() in hot paths.

Conclusion

Adding items to arrays is easy in JavaScript. Use push() for the end, unshift() for the start, and splice() for anywhere.

Spread and concat() create new arrays. Choose based on performance and mutability needs.

Practice with examples. Soon you will master array manipulation. For a full overview, explore our JavaScript Array Methods Guide.