JavaScript Array push() Method

JavaScript array provides a stack method named push() that is identical in execution to the push operation performed on the stack data structure.

The push() method just works opposite to pop(). It appends one or more new elements at the end of the array and returns the new length of array.

It increments the length of an array by 1 before appending a new element to the end of array. The push() method returns the modified length of array after inserting the element(s).

Every time the push() method is called on an array, it grows the array by one element.

Consider the example below.

<script>
  let cities = ["Dhanbad", "New York", "Sydney", "Kathmandu"];
// Adding "London" to end of the array.
   cities.push("London");
   document.write(cities);
</script>

Output:
     Dhanbad,New York,Sydney,Kathmandu,London

As you can observe in the output, the JavaScript push() method changes the original array. Therefore, it is also called mutator method.

JavaScript Array push() Method Syntax

---

The general syntax to use the push() method of array object is as:

array.push(element0);
array.push(element0, element1);
array.push(element0, element1, element2, . . . . .elementN);

In the above syntax, array is the name of array. The push() method can take an arbitrary number of elements to add to the array. It returns the new length of the array after adding elements when the push() method is called with array being the array name.

---

Note: The Array.push() method modifies the original array and its length. If you want to add elements at the starting of an array, then use the JavaScript Array unshift() method.

Adding Elements to an Array

---

Let’s create a JavaScript program in which we will create a sports array containing three elements, then add one element to it. The push() method will append the arguments passed at the end of an array.

Example 1:

<script>
  var sports = ["Cricket", "Football", "baseball"];
  var length = sports.push("Hockey"); // adding an element at the end of array.
  document.write(sports, "<br>");
  document.write("Length of new array: " +length);
</script>

Output:
      Cricket,Football,baseball,Hockey
      Length of new array: 4

In this example, we have created an array named sports that contains three elements. Then, we have called push() method to append one element at the end of the array.

We have assigned the returned array to the variable length that contains the new length of the array.

Adding Three Elements to an Array

---

Let’s make a JavaScript program in which we will create an array named colors containing two elements, then add two more elements to it.

Example 2:

<script>
  var fruits = ["Banana", "Orange"];
  var total = fruits.push("Guava", "Apple");
  document.write(fruits, "<br>");
  document.write("Length of new array: " +total);
</script>

Output:
     Banana,Orange,Guava,Apple
     Length of new array: 4

Try It Yourself

Example 3:

<script>
 let colors = ['Red', 'Green', 'Black'];
 let count = colors.push('White');
 document.write(count, "<br>");
 document.write(colors, "<br>");
 
 colors.push('Brown', 'Purple', 'Blue');
 document.write(colors);
</script>

Merging Two Arrays in JavaScript using push()

---

Let’s create a JavaScript program in which we will use spread syntax to push all elements from a second array into the first array.

Example 4:

<script>
  let vegetables = ['Potato', 'Tomato'];
  let moreVegs = ['Spinach', 'Carrots'];
// Merge the second array into the first array.
  vegetables.push(...moreVegs);
  document.write(vegetables);
</script>

Output:
      Potato,Tomato,Spinach,Carrots

We can also merge two arrays with the concat() method of JavaScript array.

Browser compatibility

---

ECMAScript arrays provide a powerful push() method to allow stack link behaviour. It provides a feature to append elements at the end of an array. All modern browsers such as Chrome, IE Edge, Opera, Firefox, etc. full support ES1 (JavaScript 1997).

---

In this tutorial, we have discussed array push() method in JavaScript with many example programs. Hope that you will have understood the basic concept of push() method and practiced all programs.
Thanks for reading!!!