How to Add an Element to an Array in JavaScript: 5 Ways with Examples

Online Python Trainer for Beginners

Learn Python easily without overwhelming theory. Solve practical tasks with automatic checking, get hints in Russian, and write code directly in your browser — no installation required.

Start Course

How to Add an Element to an Array in JavaScript? Full Breakdown with Examples

\n\n

You're writing code in JavaScript, and suddenly a question arises: "How do I add a new element to the end of an array? What about the beginning? Or maybe the middle?". If you've ever Googled "How to append something to an array?" — you are not alone. This question on Stack Overflow has gathered thousands of views, and today we'll break it down once and for all.

\n\n

Arrays are the foundation of working with data in JS. Knowing how to quickly and correctly add elements will save you hours of debugging and make your code cleaner. In this tutorial, I'll show you 5 ways to add an element to an array, from the classic push() to the modern spread operator. Let's go!

\n\n

1. The push() Method: Adding to the End of an Array

\n\n

The most popular way. push() adds one or more elements to the end of an array and returns the new length.

\n\n

const fruits = ['apple', 'banana'];\nconst newLength = fruits.push('orange');\n\nconsole.log(fruits);    // ['apple', 'banana', 'orange']\nconsole.log(newLength); // 3\n

\n\n

You can add multiple elements at once:

\n\n

fruits.push('pear', 'grape');\nconsole.log(fruits);\n// ['apple', 'banana', 'orange', 'pear', 'grape']\n

\n\n

When to use: when you need to add data to the end of a list — for example, a new item to a cart, a message to a chat, a record to a log. The method works fast (O(1)) and mutates the original array.

\n\n

2. The unshift() Method: Adding to the Beginning of an Array

\n\n

If you need to insert an element at the beginning, use unshift(). It shifts all existing elements to the right.

\n\n

const numbers = [2, 3, 4];\nnumbers.unshift(1);\n\nconsole.log(numbers); // [1, 2, 3, 4]\n

\n\n

It also works with multiple elements:

\n\n

numbers.unshift(-1, 0);\nconsole.log(numbers); // [-1, 0, 1, 2, 3, 4]\n

\n\n

Important: unshift() is slower than push() for large arrays because it needs to shift all elements. If the array contains 100,000 elements — it's better to consider a different data structure (for example, a deque queue).

\n\n

3. The splice() Method: Inserting at Any Position

\n\n

The universal soldier. splice() can delete, replace, and of course, add elements at any position in the array.

\n\n

Syntax: array.splice(start, deleteCount, item1, item2, ...)

\n\n

start — the index to start from
deleteCount — how many elements to delete (set to 0 if only adding)
item1, item2, ... — elements to insert

\n\n

Example: inserting 'cherry' at the second position (index 1):

\n\n

const colors = ['red', 'blue', 'green'];\ncolors.splice(1, 0, 'cherry');\n\nconsole.log(colors);\n// ['red', 'cherry', 'blue', 'green']\n

\n\n

You can insert multiple elements at once:

\n\n

const letters = ['a', 'd'];\nletters.splice(1, 0, 'b', 'c');\n\nconsole.log(letters); // ['a', 'b', 'c', 'd']\n

\n\n

When to use: when you need to insert an element strictly in the middle of an array — for example, adding a new menu item between existing ones. Remember: splice() mutates the array.

\n\n

4. The concat() Method: Creating a New Array

\n\n

Unlike the previous methods, concat() does not modify the original array, but returns a new one, combining two or more arrays (or elements).

\n\n

const arr1 = [1, 2, 3];\nconst arr2 = [4, 5];\nconst result = arr1.concat(arr2);\n\nconsole.log(result); // [1, 2, 3, 4, 5]\nconsole.log(arr1);   // [1, 2, 3] — unchanged\n

\n\n

You can add not only arrays but also individual values:

\n\n