How to Append Element to Array in JavaScript

by

Arrays in JavaScript are list-like objects whose prototype has methods to perform traversing and modifying operations. You can change the array’s length at any time, and data can be stored at non-contiguous locations.

Javascript append to array

To append an element to an array in JavaScript, use the array.push() method. JavaScript array push() is a built-in method to insert or append an element to the array.

The push() function adds new elements to the end of an array and returns the new length.

let se_education = ["Otis", "Maeve", "Eric", "Adam"];

console.log("Before appending an element:", se_education)

se_education.push("Lilly");

console.log("After appending an element:", se_education)

Output

Before appending an element: [ 'Otis', 'Maeve', 'Eric', 'Adam' ]

After appending an element: [ 'Otis', 'Maeve', 'Eric', 'Adam', 'Lilly' ]

Here, we have defined an array using square brackets and then append an element using the push() function.

The push() function adds an element at the end of an array, as you can see in the output.

You can see that the push() method changes the length of the array.

What if you want to append an element at the end of an array? Well, let’s see how to do that.

JavaScript append at the beginning of an array

To append elements at the beginning of an array, use the unshift() method. The unshift() is a built-in JavaScript method that adds new elements to the beginning of an array and returns the new length.

let se_education = ["Otis", "Maeve", "Eric", "Adam"];

console.log("Before appending an element:", se_education)

se_education.unshift("Lilly");

console.log("After appending an element at the beginning:", se_education)

Output

Before appending an element: [ 'Otis', 'Maeve', 'Eric', 'Adam' ]

After appending an element at the beginning: [ 'Lilly', 'Otis', 'Maeve', 'Eric', 'Adam' ]

The “Lilly” element has been appended at the beginning of the array.

Append multiple elements to JavaScript Array

To append multiple elements to the array in JavaScript, use the push() method. The push() method takes single or multiple arguments to append to the array.

let se_education = ["Otis", "Maeve", "Eric", "Adam"];

console.log("Before appending an element:", se_education)

se_education.push("Lilly", "Anwar", "Aimee");

console.log("After appending multiple elements:", se_education)

Output

Before appending an element: [ 'Otis', 'Maeve', 'Eric', 'Adam' ]

After appending multiple elements: [
'Otis', 'Maeve',
'Eric', 'Adam',
'Lilly', 'Anwar',
'Aimee'
]

You can see that we have appended “Lilly“, “Anwar“, and “Aimee” elements to the array in the single code function push().

The return value of the array.push() function is not an array (or a new one, like an array.concat() method), but it is an integer representing the array’s new length.

Append the items of one array to another array in JavaScript

To append elements of one array to another array in JavaScript, use the array.concat() method. The array concat() is a built-in JavaScript method used to join two or more arrays.

The array.concat() is a pure function that does not change the existing arrays but returns a new array containing the values of the joined arrays.

let se_education = ["Otis", "Maeve", "Eric", "Adam"];

let data = se_education.concat(["Lilly", "Anwar", "Aimee"]);

console.log("After concating:", data)

Output

After concating: [
'Otis', 'Maeve',
'Eric', 'Adam',
'Lilly', 'Anwar',
'Aimee'
]

With the use of the spread operator, the original array will be unchanged, and it returns a new array with new elements appended, compliant with the quality of functional programming.

let se_education = ["Otis", "Maeve", "Eric", "Adam"];

let data = [
 ...se_education,
 "Lilly", "Anwar", "Aimee"];

console.log("After concating:", data)

Output

After concating: [
'Otis', 'Maeve',
'Eric', 'Adam',
'Lilly', 'Anwar',
'Aimee'
]

When …array is used in the function call, it ‘expands’ an iterable object array into the list of arguments.

As you can see that, we get the same output as an array.concat() method.

Append multiple arrays using apply() and push()

With the apply() method, you can write a method that can be used on different objects. The apply() method takes arguments as an array.

let arr1 = [11, 21, 19];
let arr2 = [18, 29, 46];

Array.prototype.push.apply(arr1, arr2);
console.log(arr1);

Output

[ 11, 21, 19, 18, 29, 36 ]

Conclusion

To append a single element or multiple elements in JavaScript, use the array.push() method. If you want to append another array, use the concat() method.

That is it for this tutorial.

Leave a Comment