Add Items to Arrays with .unshift() & .push() Methods

This episode is all about "Adding Elements to an Existing Array"

Arrays are mutable which means, items can be added or removed over time. As we know from the first episode of this series, in JavaScript, array length is not fixed and it can auto-grow. We have also seen that we can add an element to the end of an array using square bracket [] notation.

In this episode, we can look into two methods, 𝐀𝐫𝐫𝐚𝐲.𝐮𝐧𝐬𝐡𝐢𝐟𝐭() & 𝐀𝐫𝐫𝐚𝐲.𝐩𝐮𝐬𝐡(), to know how to add elements to the beginning and at the end of an existing array.

Both methods can take more than one elements as parameters and add those elements to the array when they are being called on.

Array.unshift() Method

Array.unshift() method adds elements to the beginning of an existing array. The following is an example of adding elements using this method:

let fruits = ["Watermelon","Grapes","Guava"];
console.log(fruits.length); //output 3

fruits.unshift("Mango","Apple","Orange");
console.log(fruits);

//output: [ 'Mango', 'Apple', 'Orange', 'Watermelon', 'Grapes', 'Guava' ]

console.log(fruits.length); //output: 6

We can observe from the output that, 3 new values are added to the beginning of the fruits array. That means, the .unshift() method took 3 parameters and added them in the beginning of the array.
At the beginning, the array had the length of 3. Now it has a length of 6.

Similarly, we can add another array or an Object or both inside the existing array using this method. Here we will add another array for this example:

let fruits = ["Watermelon","Grapes","Guava"];
console.log(fruits.length); //output: 3

let newFruits = ["Mango","Apple","Orange"];
fruits.unshift(newFruits);
console.log(fruits);

//output: [ 
[ 'Mango', 'Apple', 'Orange' ], 
'Watermelon', 'Grapes', 'Guava'
]

console.log(fruits.length); //output: 4

The above example shows, the output holds an new array added to the beginning of the fruits array. That means, the .unshift() method took the newFruits variable as it's parameter and added the array stored in it.
Now the fruit array has a length of 4 as the new array occupied only the first index of the fruit array.

Array.push() Method

Array.push() method adds elements to the end of an existing array. The following is an example of adding elements using this method:

let fruits = ["Watermelon","Grapes","Guava"];
console.log(fruits.length); //output 3

fruits.push("Strawberry","Blueberry","Pineapple");
console.log(fruits);

/* output: [ 'Watermelon','Grapes','Guava',
           'Strawberry',Blueberry','Pineapple' ] */

console.log(fruits.length); //output: 6

The output of this example shows, 3 new values are added to the end of the fruits array. That means, the .push() method took 3 parameters and added them to the end of the array. The array length is also increased from 3 to 6.

Just like the .unshift() method, .push() can also add an array or an Object or both to the end of the existing array. Here, we will add an Object to the end of the array for example:

let fruits = ["Watermelon","Grapes","Guava"];
console.log(fruits.length); //output 3

let newfruits = {"S" : "Strawberry", "B": "Blueberry", "P" : "Pineapple"};

fruits.push(newfruits);
console.log(fruits);

/*output: [
  'Watermelon',
  'Grapes',
  'Guava',
  { S: 'Strawberry', B: 'Blueberry', P: 'Pineapple' }
] */

console.log(fruits.length); //output: 4

The output holds an new Object added to the end of the fruits array. That means, the .push() method took the newFruits variable as it's parameter and added the Object stored in it.
The fruit array now has a length of 4 as the Object has occupied only the last index of the fruit array.

Well, we can also use both methods in one code snippet to add elements both to the start and the end of the array.
For Example:

let fruits = ["Watermelon","Grapes","Guava"];
console.log(fruits.length); //output 3

fruits.unshift("Mango", "Apple", "Orange");
fruits.push("Strawberry", "Blueberry", "Pineapple");

console.log(fruits);
console.log(fruits.length); //output: 9

/*output: [
            "Mango", "Apple", "Orange",
            "Watermelon","Grapes","Guava",
            "Strawberry", "Blueberry", "Pineapple"
          ]
*/