JavaScript push(): Add a New Element at the End of an Array

The JavaScript push() method is used to add a new element at the end of an array. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      const cities = ["Tokyo", "Bangkok", "Dubai", "Berlin"];
      cities.push("Frankfurt");
      document.getElementById("xyz").innerHTML = cities;
   </script>
   
</body>
</html>

Output

The push() function is used in this code to add an element to the end of the "cities" array.

cities.push("Frankfurt");

The string "Frankfurt" is appended to the end of the "cities" array, making it the fifth element.

The innerHTML property of an HTML element with ID "xyz" is set to the contents of the cities array after the new element is added.

document.getElementById("xyz").innerHTML = cities;

The HTML element with ID "xyz" is chosen in this case using the document.getElementById() function. The cities array value, which is a string with each of the cities array's elements separated by commas, is then set as the value of the innerHTML property.

JavaScript push() Syntax

The syntax of the push() method in JavaScript is:

array.push(elementOne, elementTwo, elementThree, ..., elementN)

A minimum of one element is required.

Advantages of the push() function in JavaScript

JavaScript's push() function is a straightforward and user-friendly way to add elements to the end of an array.
The original array is altered by the push() function, which adds new elements to the end of the array without changing the other elements.
An array can grow dynamically thanks to the push() function because new elements can be added at any time.
Any type of data can be used with the push() function, including objects, strings, and numbers.

Disadvantages of the push() function in JavaScript

The push() function can only add elements to the array's end. If elements must be added at a specific index or at the start of an array, other functions such as splice() and unshift() must be used.
Although the push() function is a convenient way to add elements to an array, it modifies the original array, which may result in unintended consequences if the original array must be preserved.
push() can be slow when adding elements to very large arrays because the function must first find the end of the array before adding the new elements. It is often more efficient in such cases to create a new array with the additional elements and assign it to the original variable.
Most modern browsers and JavaScript engines support the push() function, but some older JavaScript versions do not.

JavaScript Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!