How to Append Element to end of Array in JavaScript

There are 5 ways to easily append element to the end of Array in JavaScript where most of them are 1 liner code. 2 are non-mutating and 3 will mutate the original array. Let’s explore the methods.

Methods to Append Element to end of Array in JavaScript

Here are the list of 5 methods where we can easily append element to the end of array. Since each of them have their own properties and features, we can choose which to use depending on our needs.

• Array concat() Method
• Spread Operator(...) Method
• Array push() Method
• Array splice() Method
• .length Method

Let’s look into each details with illustration below.

Array concat() Method

concat() is part of original Array standard built-in object method in JavaScript.

Its features includes:

• Create a new array by merging 2 or more arrays
• No change to the original arrays

Below shows the example of merging 2 arrays. First, we create an array with the new elements we want to add. Then we merge both of them using concat().

const myArray = ['one', 'two', 'three'];
const addElements = ['four', 5];

const newArray = myArray.concat(addElements) ;

console.log(newArray);  // ["one", "two", "three", "four", 5]

Spread Operator(...) Method

Spread Operator(...) is one of the expression in JavaScript that spread out any iterable objects. Its usage is to put 3 dots ... in front of the variable we want to spread.

Its features includes:

• Pass all the values in the array to the new list
• The spread ordering will be in the same order as original array
• No change to the original arrays

Below shows the example where we will create a new array. Subsequently, we spread the original array inside the []. Then, we place the new elements.

const myArray = ['one', 'two', 'three'];
const newArray = [...myArray, 'four', 5,];

console.log(newArray); // ["one", "two", "three", "four", 5]

Array push() Method

push() is part of original Array standard built-in object method in JavaScript.

Its features includes:

• Append one or more elements to the array
• Returns the new length of array during operation
• Updates the original array

Below shows the example where we use push() to append 1 and 2 items into the array respectively.

const myArray = ['one', 'two', 'three'];

let arrayLength = myArray.push('four');
console.log(arrayLength);  // 4
console.log(myArray);      // ["one", "two", "three", "four"]

arrayLength = myArray.push(5, 6);
console.log(arrayLength);  // 6
console.log(myArray);      // ["one", "two", "three", "four" 5, 6]

Array splice() Method

splice() is part of original Array standard built-in object method in JavaScript. It takes in the start index, delete count and a list of new elements as parameters.

Its features includes:

• Support replacing, adding or removing of elements from array
• Updates the original array

Below shows the example where we are using splice() method. We will indicate length-of-array as the start index, 0 as the delete count and 'four', 5 as the value to insert.

const myArray = ['one', 'two', 'three'];

myArray.splice(myArray.length, 0, 'four', 5);
console.log(myArray); // ["one", "two", "three", "four", 5]

.length Method

length is part of original Array standard built-in object attribute in JavaScript. Although the intention of the attribute is only to get the number of element in an array, we will use it to help append element.

Its features includes:

• Get the length of array
• Use length number as the next available index to assign a value
• Updates the original array one at a time

Below shows the example of adding 2 elements to original array.

const myArray = ['one', 'two', 'three'];

myArray[myArray.length] = 'four';
myArray[myArray.length] = 5;

console.log(myArray);   // ["one", "two", "three", "four", 5]

Conclusion

We have look into 5 different methods to add new element to the end of array.

Array concat() and spread operator(...) are all simple enough to use. But since they are non-mutating methods, we need to create a placeholder for new created array.

For mutating method, array unshift() and array splice() is very easy to use in this context. Both of these methods can append multiple elements unlike .length where we can only assign 1 element.