Working with JavaScript Array.push() method

Posted on: December 19, 2019 by Andikan Affiah

Arrays

Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Unlike Sets which only contain unique items, Arrays can contain duplicates items.

const fruitsArray = ["Apple", "Orange", "Strawberry", "Apple"];

JavaScript Array.prototype.Push()

In this post, we will be talking about JavaScript Array.push() method with examples. The Array.push() method is used to add items to the end of an array. It also has a return value of which is equal to the new length of the array after a successful call.

const phrase = ["The", "bird", "is", "flying"];

//stores the return value from the method call
const word = phrase.push("away");

//logs the value 5 to the console
console.log(word);

//logs ["The", "bird", "is", "flying", "away"] to the console
console.log(phrase);

The Array.push() method relies on the length property of the array to know where to start inserting the new values and if the length cannot be converted to a number, it defaults to index 0. And if the length is nonexistent, it would be created.

Without an argument

Calling the Array.push() method without an argument will just return the length of the array.

const bagOfThings = ["Tree", "Bird", "Fish"];

const count1 = bagOfThings.push();
console.log(count1); //logs 3 to the console

console.log(bagOfThings); // ["Tree", "Bird", "Fish"];

With Multiple Arguments

The Array.push() method can accept multiple arguments. The arguments can be Strings, Numbers, Arrays, Objects or Boolean.

//calling the method with multiple arguments

const count2 = bagOfThings.push("Food", {name: "John"}, [23, 5, true]);
console.log(count2); // logs 6 to the console

console.log(bagOfThings); // ["Tree", "Bird", "Fish", "Food", {name: "John"}, [23, 5, true]];

Merging Arrays

Using Array.prototype.push.apply() method, you can merge 2 arrays into one. The method accepts 2 arguments which should be arrays.

Array.prototype.push.apply(argument1, argument2);

As seen in the snippet above, argument1 should be the array that the contents will be added to, while argument2 should be the array the contents will be gotten from. An example snippet is shown below.

const animals = ["Cat", "Dog", "Bird"];
const animalNames = ["Elephant", "Fish"];

//merging the arrays
Array.prototype.push.apply(animals, animalNames);

console.log(animals); //["Cat", "Dog", "Bird", "Elephant", "Fish"]

Using a string… Oops

Trying to insert a string as an argument will throw an error. Though declaring the string as an object using the new keyword will make it enumerable and each character would be inserted as a single element in the target array.

//merging a string to our animals array
Array.prototype.push.apply(animals, (new String("Lion")));

console.log(animals); //["Cat", "Dog", "Bird", "Elephant", "Fish", "L", "i", "o", "n"]

Conclusion

The Array.push() method is a very good way of appending elements to an array. Please leave your suggestions and contributions and if you have any questions please ask them in the comment section below. Feel free to share this post with your friends.