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.
Methods to Append an Array in JavaScript:
- using JavaScript push() Method
- using JavaScript unshift() Method
- using JavaScript splice() Method
- using JavaScript concat() Method
- using Javascript spread operator
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)
Parameters:
- item1, item2, …, itemX: These are required parameters. The item(s) to be added to the end of the array.
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 arrayconsole.log("Original Array: " + Geeks);// Pushing arraysGeeks.push("Geeks5", "Geeks6");// Display updated arrayconsole.log("Updated Array: " + Geeks); |
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)
Parameter:
- item1, item2, …, itemX: These are required parameters. The item(s) to be added to the beginning of the array.
Example: In this example, we will be adding new elements to the beginning of the array using the unshift() method.
javascript
// Input arraylet Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];// Display input arrayconsole.log("Original Array: " + Geeks);// Adding element in beginingGeeks.unshift("Geeks5", "Geeks6");// Display updated arrayconsole.log("Updated Array: " + Geeks); |
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)
Parameter:
- index: This is a required parameter. An integer that specifies at what position to add/remove items, Use negative values to specify the position from the end of the array
- amount: This is an Optional parameter. The number of items to be removed. If set to 0, no items will be removed.
- item1, item2, …, itemX: These are Optional parameters. The new item(s) are to be added to the array.
Example: In this example, we will be adding new elements at the 3rd index of the array using the splice() method.
Javascript
// Input arraylet Geeks = ["Geeks1", "Geeks2", "Geeks3", "Geeks4"];// Display input arrayconsole.log("Original Array: " + Geeks);// Update array using sliceGeeks.splice(2, 1, "Geeks5", "Geeks6");// Display updated arrayconsole.log("Updated Array: " + Geeks); |
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)
Parameter:
- array2, array3, …, arrayX: These are required parameters. The arrays are to be joined.
Example: In this example, we will merge three arrays together using the concat() method of JavaScript.
Javascript
// Input arrayslet g1 = ["Geeks1", "Geeks2"];let g2 = ["Geeks3", "Geeks4"];let g3 = ["GeeksForGeeks"];// Concate g1, g2 and g3 into g4let g4 = g1.concat(g2, g3);//Display outputconsole.log(g4); |
[ '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:
Javascript
// Input arrayslet Array1 = [2, 4, 6, 8];let Array2 = [3, 5, 7]// Combine and create new array // using spread operatornewArray = [ ...Array1, ...Array2]// Display outputconsole.log(newArray); |
[ 2, 4, 6, 8, 3, 5, 7 ]
