How to Append Items to JS Array

Web developers commonly use JavaScript arrays to store and manipulate data. JS arrays are easy to use and offer tons of functions to do many different things with them. Sometimes, web developers need to append items to JS array. There are several simple ways to do this. In this article, we will learn how to append items to JS array.

How to Append Items to JS Array

Here are the different ways to add items to JS array.

1. Using push()

Every JS array supports push() function that allows you to append one or more items to the array. Here is its syntax.

array.push(item1, item2, ...)

Here is an example to push one item to an array.

a = [1, 2, 3]
a.push(4)
console.log(a) // [1, 2, 3, 4]

Here is an example to push multiple items to an array.

a = [1, 2, 3]
a.push(4, 5)
console.log(a) // [1, 2, 3, 4, 5]

This method will alter the original array after appending new item.

2. Using concat()

The above solution is useful when you want to add separate items to an array. If you want to add items of one array to another array then you can use concat() function. Here is its syntax.

array1.concat(array2)

Here is an example to add items of one array to another, using concat() function.

a1 = [1, 2, 3];
a2 = [4, 5, 6];
a1=a1.concat(a2)
console.log(a1) // [1, 2, 3, 4, 5, 6]

It is very important to determine the array for which you call concat() function and the array that is passed as the argument. Please note what happens when you swap the two arrays in concat() function call.

a1 = [1, 2, 3];
a2 = [4, 5, 6];
a2=a2.concat(a1)
console.log(a2) // [ 4, 5, 6, 1, 2, 3 ]

As you can see above, the output in above two cases is completely different. So the order of concatenation is very important.

Also, if you have common items in the two array, the result will contain each copy of the common item.

a1 = [1, 2, 3];
a2 = [3, 4, 5];
a1=a1.concat(a2)
console.log(a1) // [1, 2, 3, 3, 4, 5]

In the above example, you will see that both arrays a1 and a2 contain item ‘3’. So the result contains two copies of item ‘3’.

You can also chain concat() functions one after the other to append items from multiple arrays into a single array. Here is an example to demonstrate it.

a1 = [1, 2, 3];
a2 = [4, 5, 6];
a3 = [7, 8, 9];
a1=a1.concat(a2).concat(a3)
console.log(a1) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Please note, the concat() returns a new array after concatenation and does not alter any of the original arrays used for concatenation. So if you want to append items of one array to another, then you need to re-assign the result of concatenation to either of the arrays.

3. Using spread operator

You can also use spread operator ‘…’ to concatenate items of one array to another. Here is its syntax.

[...array1, ...array2, ...]

a1 = [1, 2, 3];
a2 = [4, 5, 6];
a3 = [7, 8, 9];
a1=[...a1,...a2]
console.log(a1) // [1, 2, 3, 4, 5, 6]

You can use spread operator to append items from multiple arrays to an array.

a1 = [1, 2, 3];
a2 = [4, 5, 6];
a3 = [7, 8, 9];
a1 = [...a1,...a2,...a3]
console.log(a1) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Like concat() method, spread operator also returns a new array containing the result, instead of modifying any of the original arrays. So you will need to assign the result to one of the original arrays, in order to alter it.

4. Using unshift()

If you want to prepend an item, to the beginning of an array, instead of appending it to the end, then you can use unshift() method.

array.unshift(item)

Here is an example to append item ‘0’ to an array.

var a = [1, 2, 3];
a.unshift(0);
console.log(a); // [ 0, 1, 2, 3 ]

5. Using length property

You can also use the length property of the array as an index value to append an item to the array.

array[array.length] = item

Here is an example.

a1 = [1, 2, 3];
a1[a1.length]=4;
console.log(a1) // [1, 2, 3, 4]

Conclusion

In this article, we have learnt several simple ways to easily append items to JS array. We learnt how to add items using push(), concat() and unshift() methods. We also learnt how to do it using spread operator and length property. For small arrays, using length property is a faster way to append items to an array. On the other hand, for large arrays, using push() method is the faster way to append items. You can use any of these solutions as per your requirement.

Also read:

How to Check if String is a Valid Number
How to Get Difference Between Two Arrays
How to Remove Character from String in JavaScript