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.

Method 1: Using splice method
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

  1. 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.
  2. 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.
  3. 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);

Above code prints

[1, 2, -1, 3, 4, 5]

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.

Method 2: Using push function
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

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

Above code prints the array as

[-1, 1, 2, 3, 4, 5, 6]

Method 4: Add array to array using concat
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
// print original array

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
// existing index of 3rd element
arr[2] = 0;
// again print array

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.

Liked the article ? Spread the word...

Leave a Reply