How to Add to an Array in JavaScript

What you’ll build or solve

You’ll add elements to an array in different positions.

When this approach works best

Adding to an array works best when you:

• Collect items dynamically, such as form inputs or API results.
• Maintain a list of tasks, messages, or products.
• Insert values into a specific position in a sorted list.
• Build arrays step by step during processing.

Avoid adding values blindly inside performance-critical loops when the array grows very large. In those cases, consider batching or using more specialized data structures.

Prerequisites

• A browser console or Node.js
• Basic understanding of arrays and variables

No additional setup is required.

Step-by-step instructions

Step 1: Add to the end with push()

Use push() to append one or more items to the end of an array.

const fruits = ["apple", "banana"];

fruits.push("orange");
console.log(fruits);

You can add multiple items at once:

fruits.push("mango", "kiwi");
console.log(fruits);

What to look for:

• push() modifies the original array.
• It returns the new length of the array.

Step 2: Add to the beginning with unshift()

Use unshift() to add items to the start of an array.

const numbers = [2, 3];

numbers.unshift(1);
console.log(numbers);

Add multiple values:

numbers.unshift(-1, 0);
console.log(numbers);

What to look for:

• unshift() also modifies the original array.
• It shifts existing elements to the right.

Step 3: Insert at a specific position with splice()

Use splice() when you need to insert at a certain index.

const colors = ["red", "blue", "green"];

colors.splice(1, 0, "yellow");
console.log(colors);

Explanation:

• First argument: index to start.
• Second argument: how many items to remove.
• Remaining arguments: items to insert.

To insert without removing, set the second argument to 0.

What to look for:

• splice() modifies the original array.
• Index starts at 0.

Step 4: Add items without mutating using spread

If you want to keep the original array unchanged, use spread syntax.

const original = [1, 2, 3];
const updated = [...original, 4];

console.log(original);
console.log(updated);

Add to the beginning:

const updatedStart = [0, ...original];
console.log(updatedStart);

What to look for:

• Spread creates a shallow copy.
• Nested objects remain shared references.

Examples you can copy

Example 1: Add tasks to a to-do list

const tasks = ["Buy milk"];

tasks.push("Call Alex");
tasks.push("Write report");

console.log(tasks);

Example 2: Add a new message at the top of a feed

const messages = ["Older message"];

messages.unshift("New message");
console.log(messages);

Example 3: Insert a priority item in the middle

const queue = ["Low", "Medium", "High"];

queue.splice(1, 0, "Urgent");
console.log(queue);

Example 4: Add items immutably in state management

const state = ["A", "B"];

const newState = [...state, "C"];
console.log(newState);

Useful in React or other UI libraries where you avoid mutating state directly.

Common mistakes and how to fix them

Mistake 1: Expecting push() to return the updated array

What you might do:

const arr = [1, 2];
const result = arr.push(3);

console.log(result);

Why it breaks:

push() returns the new length, not the updated array.

Correct approach:

arr.push(3);
console.log(arr);

Mistake 2: Using spread but still mutating nested objects

What you might do:

const original = [{ id: 1 }];
const copy = [...original];

copy[0].id = 2;
console.log(original[0].id);

Why it breaks:

Spread copies the array structure, but objects inside remain shared.

Correct approach:

const copy = original.map(item => ({ ...item }));

Mistake 3: Misusing splice() parameters

What you might do:

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

Why it breaks:

The second argument removes one item. If you only meant to insert, you accidentally removed an element.

Correct approach:

arr.splice(1, 0, 4);

Troubleshooting

• If your array becomes a number, check whether you stored the return value of push() or unshift().
• If elements disappear, review your splice() second argument.
• If original data changes unexpectedly, confirm you are not mutating shared references.
• If you see TypeError: arr.push is not a function, confirm the variable is actually an array.

Quick recap

• Use push() to add to the end.
• Use unshift() to add to the beginning.
• Use splice() to insert at a specific index.
• Use spread (...) to create a new array without mutating.
• Remember that some methods modify the original array.