How to Manipulate Arrays With push() in JavaScript

Posted by

Array.prototype.push() is a JavaScript method that allows you to add one or more elements to the end of an array.

Here’s an example of how you can use the push() method to add an element to the end of an array:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let fruits = ['banana', 'orange', 'apple'];
fruits.push('mango');
console.log(fruits); // Output: ['banana', 'orange', 'apple', 'mango']

[/dm_code_snippet]

In this example, we first create an array called fruits that contains three elements: ‘banana’, ‘orange’, and ‘apple’. We then use the push() method to add the element ‘mango’ to the end of the array. As you can see, after running the push method the array has 4 elements now

You can also add multiple elements to an array at once by passing them as separate arguments to the push() method:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let fruits = ['banana', 'orange', 'apple'];
fruits.push('mango', 'kiwi', 'pineapple');
console.log(fruits); // Output: ['banana', 'orange', 'apple', 'mango', 'kiwi', 'pineapple']

[/dm_code_snippet]

Please note that the push() method modifies the original array and it doesn’t return a new one, the modified array is the original itself.

Additionally, The push() method returns the new length of the array.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let fruits = ['banana', 'orange', 'apple'];
console.log(fruits.push('mango', 'kiwi', 'pineapple')); // Output: 6

[/dm_code_snippet]

Another important aspect to consider when using the push() method is that it changes the length of the array. The length of an array is a property that represents the number of elements in the array. The push() method increases the length of the array by the number of elements that are added.

You can use the length property to determine the number of elements in an array, for example:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let fruits = ['banana', 'orange', 'apple'];
console.log(fruits.length); // Output: 3

[/dm_code_snippet]

When using the push() method you should also be aware that it modifies the original array and does not create a new one. This means that if you have a reference to the original array, the changes made to the array will be reflected in the reference.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let fruits = ['banana', 'orange', 'apple'];
let moreFruits = fruits;
moreFruits.push('mango', 'kiwi', 'pineapple');
console.log(fruits); // Output: ['banana', 'orange', 'apple', 'mango', 'kiwi', 'pineapple']
console.log(moreFruits); // Output: ['banana', 'orange', 'apple', 'mango', 'kiwi', 'pineapple']

[/dm_code_snippet]

As you can see, when we modify moreFruits array, fruits array is also modified as they share the reference, and both arrays contains now the same elements

If you want to create a new array that contains the elements of the original array and the new elements, you can use the spread operator in an array literal.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let fruits = ['banana', 'orange', 'apple'];
let moreFruits = [...fruits, 'mango', 'kiwi', 'pineapple'];
console.log(fruits); // Output: ['banana', 'orange', 'apple']
console.log(moreFruits); // Output: ['banana', 'orange', 'apple', 'mango', 'kiwi', 'pineapple']

[/dm_code_snippet]

In short, Array.prototype.push() is a powerful and useful method for adding one or more elements to the end of an array, but you should be careful about how you use it to avoid unintended consequences.