How To Append an item to an array in Javascript? – Definitive Guide

Published on: | Last updated on: April 3, 2023 | By:

Arrays allow you to store multiple items in a single object.

You can append an item to an array in JavaScript using arr.push("content") statement.

Basic Example

      const birds = ["dove", "parrot", "finch"];

      birds.push('owl');

      console.log(birds);

Output

    ["dove", "parrot", "finch", "owl"]

This tutorial teaches you the various methods to append an item to an array in JavaScript and when it is appropriate to use each method.

Append an Item to An Array Using Array Push

The simplest way to append an item to an array is using Array.push() method.

  • It will append a value to the end of an existing array.

Use this method when you want to insert an item at the end of the array.

Code

    const birds = ["dove", "parrot", "finch"];

    const count = birds.push("owl");

    console.log("length of array : "+count);

    console.log("value of array : "+birds);

Output

The value (“owl”) is appended to the end of the existing array.

    "length of array : 4"

    "value of array : dove,parrot,finch,owl"

Code

The following code demonstrates how to append multiple values to an array using the array.push() method.

    const birds = ["dove", "parrot", "finch"];

    const count = birds.push("owl","cuckoos");

    console.log("length of array : "+count);

    console.log("value of array : "+birds);

Output

    "length of array : 5"

    "value of array : dove,parrot,finch,owl,cuckoos"

Append an Item to An Array Using Array Concat

The Array.concat() method joins two or more arrays and creates a new array without affecting the existing arrays.

Use this method when you want to add items to an array from other existing arrays.

Code

    const herbivorousBirds = ["dove", "parrot", "cuckoos"];

    const carnivorousBirds = ["hawks", "eagles", "vultures"];

    const birds = herbivorousBirds.concat(carnivorousBirds);

    console.log(birds);

Output

    ["dove", "parrot", "cuckoos", "hawks", "eagles", "vultures"]

You can see both the arrays (herbivorousBirds & carnivorousBirds) are joined and stored in a new variable (birds), without affecting the existing arrays.

Now let us see another example for performing nested concatenation.

Code

    const herbivorousBirds = [["parrot"]];

    const carnivorousBirds = ["hawks", "eagles", ["vultures"]];

    const birds = herbivorousBirds.concat(carnivorousBirds);

    console.log(birds);

    herbivorousBirds[0].push("dove");

    console.log(birds);

Output

    [["parrot"], "hawks", "eagles", ["vultures"]]

    [["parrot", "dove"], "hawks", "eagles", ["vultures"]]

Append an Item to An Array Using Array Unshift

The Array.unshift() method appends one or more values to the beginning of an array.

Use this method when you want to add a new item to the beginning of the array.

Code

    const birds = ["dove", "parrot", "finch"];

    const count = birds.unshift("owl","cuckoos");

    console.log("length of array : "+count);

    console.log("value of array : "+birds);

Output

You can see the values(“owl”, “cuckoos”) passed as parameters to the unshift() method are appended to the beginning of the array.

    "length of array : 5"

    "value of array : owl,cuckoos,dove,parrot,finch"

Append an Item to An Array Using Array Splice

The Array.splice() method adds/replace/remove elements in a specific position of an array.

Use this method when you want to add new elements by replacing other existing elements in the array.

Code

    const birds = ["dove", "parrot", "finch"];

    birds.splice(1, 0, "owl");

    console.log("value of array : "+birds);

Output

From the above example,

  • The start value is specified as 1, so the addition/deletion of value will happen from index value 1
  • The deletecount value is set to 0, so it will add values to the array, and now the element value(“owl”) is added at index position 1
    "value of array : dove,owl,parrot,finch"

Append an Item to An Array Using Array Index

Array Index is also another simple way to append an item to an array by specifying a new index position.

Use this method when you want to insert a new item at the end of the array.

Code

    const birds = ["dove", "parrot", "finch"];

    birds[birds.length] = "owl";

    console.log("value of array : "+birds);

Output

The new value(“owl”) was added to a new position at the end of the existing array. The new position is specified using the array’s length and hence it was added at the end of the array.

    "value of array : dove,parrot,finch,owl"

Append an Item to An Array Using Spread Operator

The spread operator unpacks the items of the existing array.

To add new items to an array using the spread operator,

  • Along with the spread operator, pass the new items to create a new array with a new element.

Use this method when you want to create a new copy of an array with items from an existing array and add new items.

Code

The following code demonstrates how to use the spread operator to create a new array with additional items. 

    const herbivorousBirds = ["dove", "parrot", "cuckoos"];

    const birds = [...herbivorousBirds, "owl"];

    console.log("value of array : "+birds);

Output

    "value of array : dove,parrot,cuckoos,owl"

JSfiddle

This tutorial is available in this JSFiddle.

Additional Resources

Leave a Comment