Open In App

How to append an element in an array in JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to append an element in an array in JavaScript. There are several methods for adding new elements to a JavaScript array.

These are the following ways to solve the problem:

Method 1: Using JavaScript push() Method

This method will add an element to the end of an array, while its twin function, the pop() method, will remove an element from the end of the array. If you need to add an element or multiple elements to the end of an array, the push() method will almost always be your simplest and quickest option. 

Syntax:

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

Example: In this example, we will be adding new elements to the end of the array using the push() method.

javascript




// Input array
let Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];
 
// Display input array
console.log("Original Array: " + Geeks);
 
// Pushing arrays
Geeks.push("Geeks5", "Geeks6");
 
// Display updated array
console.log("Updated Array: " + Geeks);


Output

Original Array: Geeks1,Geeks2,Geeks3,Geeks4
Updated Array: Geeks1,Geeks2,Geeks3,Geeks4,Geeks5,Geeks6



Method 2: Using JavaScript unshift() Method

This method will add an element to the beginning of an array, while its twin function, shift(), will remove one element from the beginning of the array. 

Syntax: 

array.unshift(item1, item2, ..., itemX)

Example: In this example, we will be adding new elements to the beginning of the array using the unshift() method.

javascript




// Input array
let Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];
 
// Display input array
console.log("Original Array: " + Geeks);
 
// Adding element in begining
Geeks.unshift("Geeks5", "Geeks6");
 
// Display updated array
console.log("Updated Array: " + Geeks);


Output

Original Array: Geeks1,Geeks2,Geeks3,Geeks4
Updated Array: Geeks5,Geeks6,Geeks1,Geeks2,Geeks3,Geeks4



Method 3: Using JavaScript splice() Method

This method modifies the content of an array by removing existing elements and/or adding new elements. 

Syntax: 

array.splice(index, amount, item1, ....., itemX)

Example: In this example, we will be adding new elements at the 3rd index of the array using the splice() method.

Javascript




// Input array
let Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];
 
// Display input array
console.log("Original Array: " + Geeks);
 
// Update array using slice
Geeks.splice(2, 1, "Geeks5", "Geeks6");
 
// Display updated array
console.log("Updated Array: " + Geeks);


Output

Original Array: Geeks1,Geeks2,Geeks3,Geeks4
Updated Array: Geeks1,Geeks2,Geeks5,Geeks6,Geeks4



Method 4: Using JavaScript concat() Method

This method returns a new combined array comprised of the array on which it is called, joined with the array (or arrays) from its argument. This method is used to join two or more arrays and this method does not change the existing arrays, but returns a new array, containing the values of the joined arrays. 

Syntax: 

array1.concat(array2, array3, ..., arrayX)

Example: In this example, we will merge three arrays together using the concat() method of JavaScript.

Javascript




// Input arrays
let g1 = ["Geeks1", "Geeks2"];
let g2 = ["Geeks3", "Geeks4"];
let g3 = ["GeeksForGeeks"];
 
// Concate g1, g2 and g3 into g4
let g4 = g1.concat(g2, g3);
 
//Display output
console.log(g4);


Output

[ 'Geeks1', 'Geeks2', 'Geeks3', 'Geeks4', 'GeeksForGeeks' ]



Method 5: Javascript spread operator

The Spread operator allows an iterable to expand in places where 0+ arguments are expected. It is mostly used in the variable array where there is more than 1 value is expected. It allows us the privilege to obtain a list of parameters from an array.

Syntax:

let variablename1 = [...value];

Example: This example shows the implementation of above-explained appraoch.

Javascript




// Input arrays
let Array1 = [2, 4, 6, 8];
let Array2 = [3, 5, 7]
 
// Combine and create new array
// using spread operator
newArray = [ ...Array1, ...Array2]
 
// Display output
console.log(newArray);


Output

[
  2, 4, 6, 8,
  3, 5, 7
]



Method 6: Using Lodash _.concat() function

more than 1 value is expected. It allows us to merge values into the array.

Syntax:

_.concat(array, [values]);

Example: This example shows the implementation of above-explained appraoch.

Javascript




// Requiring the lodash library
let lodash = require("lodash");
 
// Original array to be concatenated
let array = [1, 2, 3];
 
// Values to be added to original array
let values = [0, 5, "a", "b"]
 
let newArray = lodash.concat(array, values);
console.log("Before concat: " + array);
 
// Printing newArray
console.log("After concat: " + newArray);


Output:

Before concat: 1,2,3
After concat: 1,2,3,0,5,a,b


Last Updated : 29 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads