How do you append something to an array using JavaScript?

Matthew C.

The Problem

You want to add an item or multiple items to an array. How do you do this?

The Solution

There are several methods you can use to add an item or multiple items to an array. Let’s take a look at a few of the more common ways to do it.

Using push()

To add one or more elements to the end of an array, you can use the push() method:

const arr = ["Mexico", "India"]; // add one element arr.push("China"); console.log(arr); // ["Mexico", "India", "China"] // add multiple elements arr.push("Sudan", "Kenya"); console.log(arr); // ["Mexico", "India", "China", "Sudan", "Kenya"]

This method takes in elements to add to the array as arguments, changes the original array, and returns the new length of the array.

Using Spread Syntax

You can append one or more items to an array using spread syntax:

const arr1 = ["Mexico", "India"]; const arr2 = ["Japan", "Brazil"]; // add one item const arrNew1 = [...arr1, "China"]; console.log(arrNew1); // ["Mexico", "India", "China"] // add multiple items const arrNew2 = [...arr1, ...arr2]; console.log(arrNew2); // ["Mexico", "India", "Japan", "Brazil"]

A new array with the appended item or items is created by spreading an array of items into or adding items to an array literal.

You can also use spread syntax to spread an iterable, such as an array, into the arguments of the push() method:

const arr1 = ["Argentina", "France"]; const arr2 = ["South Korea", "Italy"]; arr1.push(...arr2); console.log(arr1); // ["Argentina", "France", "South Korea", "Italy"]

Using concat()

You can use the concat() method to merge two or more arrays. This method does not change the original array but returns a new array. You can use concat() to append an array of items to another array:

const arr1 = ["Argentina", "France"]; const arr2 = ["South Korea", "Italy"]; const newArr = arr1.concat(arr2); console.log(newArr); // ["Argentina", "France", "South Korea", "Italy"]

Using the Array length Property

You can also add an item to the end of an array by setting the array element at the index equal to the array’s length:

const arr = ["Norway", "Namibia"]; arr[arr.length] = "New Zealand"; console.log(arr); // ["Norway", "Namibia", "New Zealand"]

This method modifies the original array.

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.104.0/bundle.min.js"></script>
  1. Configure your DSN
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

Check our documentation for the latest instructions.

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.