Adding elements to an array is required when the items to be added are dynamic, may be they are received from the server or an http request to a URL or as an input from the user.
There are various ways in which objects can be added to a javascript array and this post will explain all of those methods.
splice
method can be used to add object to array in javascript. It can be used to insert items at the beginning, middle or end of array. splice
method takes following arguments
- Index: Index at which the new element should be added. Starts at 0. If this index is greater than the length of the array, then the item will be added to the end of array.
- Number of items: This argument is used only while removing elements from the array. For adding objects to the array, it should always be 0.
- Value: This argument is the value to be added to the array.
splice
can also be used to remove element from array. To learn different methods of removing array elements, refer this article.
Example of splice
function for adding an object to javascript array is given below.
let arr = [1, 2, 3, 4, 5] // add -1 to third place in the array arr.splice(2, 0, -1); console.log(arr);
Above code prints
splice function can also be used to add multiple values to the array. Any values given after the second argument are treated as the items to be added to array. Thus, below code will add -1, -2 and ‘splice demo’ to the array.
push
, as its name suggests is used to push object into array in javascript. That is, it adds or appends the element at the end of the array.push
function takes the item to be added to the array as argument. Example,let arr = [1, 2, 3, 4, 5] // add -1 to end of array arr.push(-1);
Method 3: Using unshift function
unshift
function takes a value as argument inserts it to the start of the array and shifts all the elements one position to the right. Thus, the item is added at the beginning of the array. Example,
let arr = [1, 2, 3, 4, 5] // add -1 to start of array arr.unshift(-1); console.log(arr);
Above code prints the array as
This method adds a complete array to another array and could be used if more than one objects are to be added to the array.
When an array is added to other array, then all the objects of the added array are inserted into the original array.
concat
function is used to adding arrays.It is invoked on the array to which another array will be added. This method accepts the array to be added as argument.
Note that this method does not modify the original array but instead returns a new array which contains all the elements of both the arrays. Example,
let arr = [1, 2, 3, 4, 5] // add -1 to third place in the array let newarr = ['codippa', 6, 7]; // add array to another array let added = arr.concat(newarr); // print the new array console.log(added); // print original array console.log(arr);
Output of above code is
1, 2, 3, 4, 5, ‘codippa’, 6, 7
1, 2, 3, 4, 5
Look, the original array remains unchanged.
Method 5: Using index
This method can also be used to append value to an array or add item to the end of the array. Syntax for using this method is
array[index] = value
Note that the index should be equal to the size of array else an existing array element will be overwritten with the new value. Example,
let arr = [1, 2, 3, 4, 5] // append item to array arr[5] = 'codippa'; // print array console.log(arr); // existing index of 3rd element arr[2] = 0; // again print array console.log(arr);
Above example adds an object at 5th index, that is, size of the array. This means that the index of new element is 1 more than the index of last element of the array. It also adds an element at index 2 which belongs to the third array element. Output is
1, 2, 3, 4, 5, ‘codippa’
1, 2, 0, 4, 5, ‘codippa’
Notice that third element(at index 2) is replaced with the newly added value.
All the examples in this article initialize the array using let
keyword. This is a new keyword introduced in ECMAScript6 or ES6.
Earlier, a variable was initialized using var
keyword and that is the reason, you will find var
at most places. To know the difference between the two, refer this post.
Hope you liked this post. If yes, then do click the clap button below.