HomeTutorsContact
JavaScript
How to push data in array in JavaScript?
Gulshan Saini
June 11, 2020
2 min

In this tutorial, we are going to see a couple of ways to add data (elements or objects) to an array. We will explore both the ES5 and ES6 way of pushing the items to an array.

Let’s start by creating an array.

We have initialized the browsers array and populated it with items “Google Chrome” and “Firefox” with index position 0 and 1 respectively - remember array starts from 0.

Adding element to end of array

To add new element at the end of the array we can use the push() method.

When a new item is pushed to an array the returned value is the updated length of an array i.e. 3 in this case. To view updated array we can log it to console.

Output

To add multiple elements to an array, we can pass multiple values separated by a comma inside push() method as follows

Output

In ES6 there is much simple way to insert items at the end of an array using spread operator however you need to reassign the variable to update the values or you can also assign it to new variable.

Output

Adding element to front of array

To add an element to beginning of JavaScript array we can use unshift() method

Output

In ES6 we can use spread operator to push element in front however you need to reassign the variable to update the values or you can also assign it to new variable.

Output

Notice, we first specified the new element and then used the spread operator.

Adding element at particular index

To add item at particular index we need to use the splice() method. The syntax of splice() method is as follows

Below is details of arguments that we need to pass to splice() method

  • start - index when item(s) need to be inserted
  • deleteCount - number of items to be deleted. Since we are adding we can just pass 0
  • items - array of items that need to be added

If you are following along, the last output was ["DuckDuckGo", "Internet Explorer", "Google Chrome", "Firefox", "Safari", "Opera", "Brave", "Edge"].

Let’s add Yandex Browser at index 2 i.e. after “Internet Explorer”

splice() method return array of items removed from the array. Since, we did not remove any item it will return us empty array []. We can again log the variable browsers on console.

Output

See, how the element “Yandex Browser” was added at index 2 and the rest of array items were shifted by one place.

We can also use combination of slice() method and ES6 spread operator to insert element at specific index in an array as follows

The syntax of slice() method is

Below is definition of slice() method from MDN Docs

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array.

If you are following along, the last output was ["DuckDuckGo", "Internet Explorer", "Yandex Browser", "Google Chrome", "Firefox", "Safari", "Opera", "Brave", "Edge"]

Let’s insert Android Browser after index 4 i.e. after “Firefox”.

Output

We explored both ES5 and ES6 ways of doing the same thing however I prefer using modern ES6 syntax as it is easy to understand and makes code clean.


Tags

#javascript
Previous Article
How to convert array to a string in JavaScript?

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Related Posts

How to Get Current Date in Human Readable Form in JavaScript?
October 03, 2020
1 min
© 2020, All Rights Reserved.

Quick Links

Advertise with usContact Us

Social Media