Adding elements in JS array by Push and Unshift methods

In JavaScript, elements can be added to an array by using the built-in methods of arrays. These methods are “push and “unshift.

These methods append given elements to an existing array.  Both of these methods are explained below with online examples.

The array push method

The array push method adds the given element(s) at the end of an existing array. The push JavaScript method also returns the length of an array after adding the given elements. So basically, JavaScript push changes the existing array.

An example of push method

Following are a few examples of using array push method but let us first look at its syntax:

JavaScript array push syntax

The syntax of array push method is:

Arrayname.push (element_to_add1, element_to_add2, …..)

As such, the array push returns length after adding new elements, you can assign this to a numeric variable to get the returned value.

A basic example of using push method

For this example, we have created a simple numeric array of four elements. We will display it in an HTML paragraph.

After that, we will use array push method to add two more numbers in the array and again display array elements. See demo by clicking the link or image:

Experience this example online

You can see, NumArr before and after using the push method. A few things about the example:

  • First of all, an array NumArr of four elements is created.
  • Then we displayed array by using the for loop. Inside the for loop, we used the length property of array to get total elements.
  • Then we used array push method and added two more numbers in the NumArr array. We assigned the returned value to the arrlength variable.
  • Point to be noticed is, we used the arrlength variable rather length property in second for loop to display array elements after using the array push JavaScript method.
  • Finally, you can see two elements are added in the array at the end, by using push array method.

See another example, this time with strings.

JavaScript array append example with strings

In this example, JavaScript array append will be done at the strings array. We have an array of US states with three State names initially.

We will use the JS push method to append one more State name at the end of an array. In this example, we simply used push method to add array element and have not assigned the returned value to a variable.

Experience this example online

JavaScript unshift array method

The push method is used to add array elements at the end of an array. If you need to add new elements at the beginning of the array then use the JavaScript array unshift method.

The unshift is just like the array push method that adds new elements and returns the length of the array after adding elements. See the following example of using unshift method.

Add to array by using unshift method example

Following is an add to array example by using the unshift method. The elements will be added at the beginning of the array. See by yourself, as we display array before and after using the unshift method. Click the link or image below to see the demo online.

Experience this example online

You can see in above example, the JavaScript array append is done with the unshift method. We displayed array before and after using the unshift method.

You can also see the difference in two arrays and also newly added elements are displayed before existing elements, i.e. unshift method added array elements at the beginning of the array.

You should also read: JavaScript Array