3

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

 2 years ago
source link: https://dev.to/swarnaliroy94/add-items-to-arrays-with-unshift-push-methods-3ma2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Basic Data Structure in JavaScript : Arrays (4 Part Series)

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 to 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
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

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.

In this episode, we learnt about adding elements to an existing array. The next episode will be all about removing items from an array.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK