Sentry Answers>JavaScript>

How do you append something to an array using JavaScript?

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:

Click to Copy
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:

Click to Copy
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:

Click to Copy
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:

Click to Copy
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:

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

This method modifies the original array.

  • YoutubeHow Sentry.io saved me from disaster
  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • SentryJavascript Error Monitoring & Tracing
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,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.

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