Add items in JavaScript Array: push(); unshift(); concat(); splice() methods

JavaScript allows us to group the values and iterate over them. There are several ways where we can perform the operation to add or remove items from a JavaScript array. Let's drive deep into this to understand the Ws of this:

• Which are all the methods we need to know
• How to use those methods
• When/Where we need to use those methods
• What is the return of those methods
• What will be the input array after the operation

ADD items in JavaScript Array

In a JavaScript array, we can add items at the beginning of the array, at the end of the array, or any specific place we want to add. okay, let's understand this in-depth by splitting out the topic into 5 points.

• Which are all the methods we need to know?

  For adding items in the JavaScript array we can use push(), unshift() , concat() &splice()

• How to use those methods?

  push() : For adding items at the end of the array in JavaScript we use push() method. (arr.length - 1) position item arr[arr.length-1] will be the item you will pass to the push method. Let us understand this with some examples.

let numbers = [88,12,64,30,25];
numbers.push(953);
console.log(numbers); 
//=>[88,12,64,30,25,953];
numbers[numbers.length-1];
// => 953;

Adding multiple items at the end of the array by using the push() method:

let names = ['xavi','neymar','ronaldo','messi'];
names.push('mordic','ramos','mular');
console.log(names):
// => ['xavi','neymar','ronaldo','messi','mordic','ramos','mular']

unshift() : By using unshift() array method we can add items in the beginning of the array. zeroth position of the array arr[0] will the value you will pass to the unshift() method. code example:

let colors = ['red','black','green'];
colors.unshift('white');
console.log(colors);
// =>['white','red','black','green'];
colors[0]; // => 'white';

Concat(): this is one of the most underrated ways to add items in an array. By using Concat() actually, you can join one array to another array. example:

let arr1 = [34,12,53,84];
let arr2 = [254,782,391,842];
let arr3 = arr1.concat(arr2);
console.log(arr3);

splice(): To add items in any position of the array we use this method. The most important array method which we can use to add or remove items from the JavaScript array. But here we will discuss how to use this method to add items in an array.

The splice() method took a maximum of 3 parameters and a minimum of 2 as an input to perform the operation.

Main syntax of splice() is :
splice(starting_position(insert_at), delete_count, items_to_add)
In this case to add the items in the array, by using this method we need to make delete_count = 0. Let's understand it by some values:

let numbers = [65,85,23,71]; now if we want to add a number 55, insert at 3rd index, which means after 23, we have to pass 3 values in the splice() method.

starting_position(insert_at) => 3,
delete_count => 0,
items_to_add => 55,

let numbers = [65,85,23,71];
numbers.splice(3,0,55);
console.log(numbers);
//=> [65,85,23,55,71]

By using the same method let see how we can add more than one value in an array.
For example, let us take an array of colors
let colors = ['blue','red','white','black'].
Now try to add 3 more colors ['pink','green','orange'] to the colors[] array by using splice() method at position 2.

let colors = ['blue','red','white','black'];
colors.splice(2,0,'pink','green','orange');
console.log(colors);
// =>["blue", "red", "pink", "green", "orange", "white", "black"];

so the benefit of using this splice() method is, you can add items at any place in the array, either it is starting of the array or ending of the array or in the middle or 3rd/5th/100th index.

• When/Where we need to use those methods?

  Now here comes the real question, when we need to use which of those methods.

  push() method we can use for adding the value in the last of an existing array. Like when we have an add address option in our code, we can use this, so we can make the API call background, and meanwhile, we can add the newly added address in the address object and we can display all addresses.

  unshift() method to add the value or item at the beginning of the array. While we are adding anything from backward, like 5,4,...,1 we can use this method.

  Concat() method we basically use to create a 3rd variable with a new concatenated value which we can send to API as an object to store the data. Like if you are having two different sets of arrays like 1st standard student names array and second standard student names array but you want them in an array of allStudent then you just need to Concat() both the arrays

  splice() method we use to add the items inside the array. By using this method we can add the items in the beginning in the middle or any index position or in the end. As per our requirement, we need to change the index position of the and need to make where we wanted to add.

• What is the return of those methods?

  push() method will return the length of modified array. if arr.push() we do it will return arr.length value after adding the items in the end.

  unshift() method will return the length of modified array. if arr.unshift() we do it will return arr.length value after adding the items in the beginning.

  Concat() method will return the latest concatenated arr, we have to assign it to some variable to use this value. For example, if we take an array arr1 of 5 elements and an array arr2 of 7 elements then if we do arr1.concat(arr2) it will return an array of 12 items.

  splice() method will return a blank array where your initial array value will update.

• What will be the input array after the operation

  push(): After performing the push() method on an array if we check the value of the initial array we will see it is containing a new modified array, which means it will have the value of items added at the last position. For example :

let a = [1,2,5,4,9,3];
a.push(846);
console.log(a);
// -> [1, 2, 5, 4, 9, 3, 846];

unshift(): After performing this method to an array the initial array's value will change and one new item will be added at the beginning. For example:

let a = [1, 2, 5, 4, 9, 3, 846];
a.unshift(2222);
console.log(a);
//-> [2222, 1, 2, 5, 4, 9, 3, 846];

Concat(): After performing the Concat() method, initial arrays values will not change, and to utilize the new concatenated value we have to store it in a variable. For eample:

let arr1 = [66,33,88,22];
let arr2= [121,434,525,];
let arr3 = arr1.concat(arr2);
console.log(arr1) //=> [66,33,88,22];
console.log(arr2) //=> [121,434,525,];
console.log(arr3) //=>[66, 33, 88, 22, 121, 434, 525];