How to Append Items to an Array in JavaScript

Introduction
How do you append items to an array using JavaScript?
The two main ways to append items to an array are push() and concat(). Both methods serve the same purpose but go about their business in different ways.
When you use push(), it mutates the original array. And the concat() method technically doesn't append the item to the array but instead creates an entirely new array with the new item included at the end of the new version.
Let's look at some code examples.
Table of Contents
Push()
The push() method takes an array and adds one or more elements to the end of it. And returns the new length of the array.
To use the function, you apply push() directly onto the array and give the function one or more string arguments that you want to add to the array.
Here's what the code looks like:
JavaScript
 
const names = ["Billy", "Johnny", "Franky", "Harry"]
 
names.push("Barry")
 
// ["Billy", "Johnny", "Franky", "Harry", "Barry"]
Notice that the new array has the string attached to the end. Remember that the push() function returns the length of the array it was called on and NOT the modified array itself.
For demonstration purposes, here's how you would append multiple items at once:
JavaScript
 
const names = ["Billy", "Johnny", "Franky", "Harry"]
 
names.push("Barry", "Terry", "Larry")
 
// ["Billy", "Johnny", "Franky", "Harry", "Barry", "Terry", "Larry"]
Notice how the items are appended to the array in the same order that you provided them to the .push() function.
In the next section, we'll show another method using the concat() function.
Concat()
The concat() method is used to combine two or more arrays. It doesn't change anything about the existing arrays and returns a completely new array instead.
Although this method is intended for combining two or more arrays, you can also use it to append items to an existing array.
Below is what the code for that would look like:
JavaScript
 
const names = ["Billy", "Johnny", "Franky", "Harry"]
 
const newNames = names.concat("Barry")
 
// ["Billy", "Johnny", "Franky", "Harry", "Barry"]
This method works almost identically to the push() method. But one key difference is that the concat() method returns the newly created array instead of only its length property.
Again for demonstration purposes, here is how to append more than one item:
JavaScript
 
const names = ["Billy", "Johnny", "Franky", "Harry"]
 
const newNames = names.concat("Barry", "Terry", "Larry")
 
// ["Billy", "Johnny", "Franky", "Harry", "Barry", "Terry", "Larry"]
If you console.log() the newly created array, you'll see that all the items were added to the end of the array.
Thanks for reading and happy coding!