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.

constfruits= ["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.

constnumbers= [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.

constcolors= ["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.

constoriginal= [1,2,3];
constupdated= [...original,4];

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

Add to the beginning:

constupdatedStart= [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

consttasks= ["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

constmessages= ["Older message"];

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

Example 3: Insert a priority item in the middle

constqueue= ["Low","Medium","High"];

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

Example 4: Add items immutably in state management

conststate= ["A","B"];

constnewState= [...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:

constarr= [1,2];
constresult=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:

constoriginal= [{ id:1 }];
constcopy= [...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:

constcopy=original.map(item => ({ ...item }));

Mistake 3: Misusing splice() parameters

What you might do:

constarr= [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.