Most of the time we initialize an array with a fixed set of elements. But there are cases when we need to insert more elements while performing some operations. This can be done easily using various functions provided by JavaScript to append elements in an array. So, let’s discuss all of them one by one!
4 Methods to Append Elements in JS Array
Let us have a deep look at each of the methods to append elements at the end of an array
1) push() Method
One of the easiest methods to append an element to the end of an array is the push() method. It is similar to the push_back function used for vectors that we have in the C++ language.
The syntax of the push() method is as follows:
let length=array_name.push(value);where
length: value the function returns, the new length of the array after addition of element.
array_name: name of the array to which we are adding the elements.
value: the value being added to the array.
Let us see an easy example of the same.
//declaring an array let arr=[6,7,2,3]; //pushing an element at the end arr.push(1); //printing the array console.log(arr);
Output:
[ 6, 7, 2, 3, 1 ]In this example, we have taken an integer array. In the second step, we add/push element “1” to the end of the array. We print the array in the final step. We observe that we have received the desired result.
Let’s take another example to see what the push function returns:
//declaring an array let arr=[6,7,2,3]; //pushing an element at the end let lengthOfArray=arr.push(1); //printing the array console.log(length);
Output:
5In this example, when we add the element “1” to the array, the length of the modified array becomes five (5). Hence, the value 5 is returned. The desired output is obtained.
2) splice() Method
Another method that can be used to add elements at the end of an array is the splice() method. To perform the splice (add, remove, or replace) operation in Javascript, we use an inbuilt splice() method.
This inbuilt array splice() method in JavaScript allows one to modify the contents of an array by removing, adding, or replacing elements. The splice() method modifies the original array.
The general syntax of the array splice() method in JavaScript is:
array_name.splice( index, remove_count, items);- array_name: Name of the array to be spliced.
- index: The index from which the array must be changed/modified. It is a required parameter and can have positive, 0, or negative values.
- remove_count: Specifies the number or the count of the items to be removed from the array.
- items: Represents the list of items to be added to the array. It is an optional parameter. If no item is to be added, the parameter is simply not given in the function.
Note that, this is the general syntax of the splice function. It can be implemented in various ways which we will understand in the further sections.
To add elements at the end of an array using the splice() method, you need to provide the starting index as the length of the array and the number of elements to remove as 0.
Take a look at the below example:
//declaring a marks array let marks=[98, 78, 92, 83, 65] //adding elements at the end of an array without deleting any let deletedMarks=marks.splice(4,0,99,100); //printing the modified marks array console.log(marks); //printing the empty deleted marks array as no element is deleted console.log(deletedMarks);
Output:
[ 98, 78, 92, 83, 65, 99, 100 ]
[ ]
We have not removed a single element and hence the array “deletedMarks” is empty. We have instead added two elements 99 and 100 to the array by providing them as parameters to the splice() function.
3) concat() Method
We can use the concat() method to merge or concatenate two or more arrays in JavaScript. This method does not modify the original arrays but rather returns a new array containing the merged elements.
The syntax for using the concat method is as follows:
let newArray = arrayOriginal.concat(array1, array2, ..., arrayN);where,
newArray: the new array formed after concatenating the arrays with the original array.
The parameter to the method is a single or list of arrays.
Here’s an example:
//declaring two arrays let arr1=[2,3,4,5]; let arr2=[6,7,8,9]; //concatenating the arrays let newArray=arr1.concat(arr2); //printing the new array console.log(newArray)
Output:
[ 2, 3, 4, 5, 6, 7, 8, 9 ]In this example, we have joined two arrays, i.e. append one array to another.
4) Spread Operator (…)
We can also use the spread operator (…) to merge arrays in JavaScript. This spreads the elements of an array into individual elements, which are then merged into a new array.
Here’s an example:
//declaring two arrays let arr1=[2,3,4,5]; let arr2=[6,7,8,9]; //merging arrays using spread operator let newArray=[...arr1,...arr2] //printing the new array console.log(newArray)
Output:
[ 2, 3, 4, 5, 6, 7, 8, 9 ]
In this example, we have merged two arrays, i.e. append one array to the other. Hence, we have received the desired result.
All these methods are used to add elements to the end, while unshift() in JavaScript is utilized to add elements to the beginning of the array.
Conclusion
In this article, we looked into various ways to append an array, i.e., add an element to the end of an array. We discussed push(), splice(), concat() method, and spread operator along with codes. This operation has to be considered in many scenarios while developing applications. So, it is essential to know some methods in mind to use them when needed.
