TechnophileThe Array.push() method adds one or more elements to the end of an array and returns the new length of the array.
Table of Contents
How it works
Syntax
array.push(element1, ..., elementN)
Example:
const numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers); // [1, 2, 3, 4]
Parameters
- element1, ..., elementN
- The elements to add to the end of the array.
You can pass as many elements as you want to the Array.push() method.
Return value
The push() method returns the new length of the array, just like the array.length property.
Example:
const sports = ["tennis", "basketball"];
const newLength = sports.push("football", "swimming");
console.log(sports); // ['tennis', 'basketball', 'football', 'swimming']
console.log(newLength); // 4
console.log(sports.length); // 4
Big O complexity
Since the push() method adds elements to the end of an array, it has a constant time complexity of O(1). This means that the time it takes to add an element to the end of an array is the same regardless of the size of the array.
- Time complexity: O(1)
- Space complexity: O(1)
In contrast, the unshift() method, which adds elements to the beginning of an array, has a linear time complexity of O(n). It means that both the time and space complexity of the unshift() method depends on the size of the array. Because when a new element is added to the beginning of an array, all the other elements in the array must be shifted over by one index.
More Examples
Merging two arrays
const array1 = ["a", "b", "c"];
const array2 = ["d", "e", "f"];
array1.push(...array2);
console.log(array1); // ['a', 'b', 'c', 'd', 'e', 'f']
You might have noticed that we used the spread operator (...) to merge the two arrays. This is because the push() method only accepts a list of arguments, not an array. The spread operator allows us to pass an array as a list of arguments.
However, if we had passed the array2 array directly to the push() method, it would have added the array as a single element to the end of the array1 array. We would get the following result:
array1.push(array2);
console.log(array1); // ['a', 'b', 'c', ['d', 'e', 'f']]
Working with objects
Unfortunately, the push() method does not work on objects. If you try to do so, you will get an error, saying that objects do not have a push() method.
However, it is possible to use the push() method on an array of objects. For example:
const users = [
{ name: "John", age: 25 },
{ name: "Jane", age: 30 },
];
users.push({ name: "Jack", age: 40 });
console.log(users);
// [
// { name: 'John', age: 25 },
// { name: 'Jane', age: 30 },
// { name: 'Jack', age: 40 }
// ]
Stack data structure - inserting elements
A stack is a data structure that follows the LIFO (Last In First Out) principle. Imagine a bunch of books stacked on top of each other. The last book you put on the stack is the first book you can take off the stack.
Photo by Karolina Grabowska on Pexels
This means that we can implement adding the book to the stack using the push() method.
const stack = [];
stack.push("book1");
stack.push("book2");
console.log(stack); // ['book1', 'book2']
If you're interested in Stack, you can learn more about its implementation in JavaScript in this article.
Browser compatibility
Since the push() method is JavaScript built-in method, it is supported by all modern browsers.
Conclusion
The Array.push() method:
- Inserts one or more elements at the end of an array.
- Returns the new length of the array.
- Has a constant time and space complexity of O(1).
- Does not work on objects, but works on an array of objects.
- Can be used to implement a stack data structure.
Hopefully, this article has given you a good understanding of the Array.push() method in JavaScript. If you have any questions or suggestions, feel free to leave a comment below. Thanks for reading!
