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

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.

In this tutorial, you’ll learn the different methods to append an item to an array in JavaScript.

If You’re in Hurry…

You can use the following code snippet to append an item to an array in JavaScript.

Code

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

      birds.push('owl');

      console.log(birds);

Output

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

If You Want to Understand Details, Read on…

An array is a variable used to store the collection of multiple items and provides members to perform common array operations.

In this tutorial, you will learn various methods to append an item to an array in javascript.

Using Array Push

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

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

You can use this method when you want to insert an item at the end of the array.

Syntax

The syntax to append the value to an array using the array.push() method follows.

    array.push(element1, element2, ..., elementN)

Parameters

element(s) (optional) – values to be appended to the end of an existing array

Return value

It returns the new length 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"

Using Array Concat

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

You can use this method when you want to add items to an array from other existing arrays.

Syntax

    array1.concat(array2, array3, ..., arrayN)

Parameters

array(s) (optional) – arrays to be appended to another array.

Return value

  • Returns the newly created array

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"]]

Using Array Unshift

In this section, you’ll use array.unshift() to append an item to an array.

Array.unshift() method is used to append one or more values to the beginning of an array.

You can use this method when you want to add a new item to the beginning of the array.

Syntax

    array.unshift(element1, element2, ..., elementN)    

Parameters

element(s) (optional) – values that need to be appended to an array.

Return value

Returns the new length of the array.

Code

The following code demonstrates how to use the unshift() method to insert an item at the beginning of the array.

    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"

Using Array Splice

In this section, you’ll use array.splice() to append an item to an array.

The Array.splice() method is used to add/replace/remove elements in a specific position of an array.

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

Syntax

array.splice(start, deletecount, element1, ....., elementN)

Parameters

start

  • Index position at which to start changing the array to happen.
  • If the value specified is greater than the length of the array, then the start value will be set to the array’s length and will act as an additional function, and no deletion will happen.
  • if the value specified is negative, the start will be set to 0.

deletecount

  • value indicates the number of elements from the array to be removed
  • if deletecount is not specified or the value is greater than the length of the array values, then all the elements from start to length of array will be deleted.
  • if deletecount is negative or 0, then elements will not be deleted.

elements(s) (optional)

  • elements to be added to array Return value
  • updated array will be returned

Code

The following code demonstrates how to use the splice() method to add an item to an array at a specific position.

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

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

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

Output

From the above example, you can see that the start value is specified as 1, so the addition/deletion of value will happen from index value 1. Next, 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"

Using Array Index

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

You can use this method when you want to insert

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"

Using Spread Operator

You can use the spread operator to append an item to an array.

The spread operator unpacks the items of the existing array.

Along with the spread operator, the new items are also passed to create a new array.

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.

Conclusion

In this tutorial, you’ve learned how to append an item to an array in Javascript. You’ve also known different ways to achieve appending a value to an array.

If you’ve any questions, please comment below.

You May Also Like

Leave a Comment