How to Append Something to an Array in JavaScript?

In this tutorial, we will learn How to append something to an array in JavaScript. JavaScript offers numerous ways to include elements in arrays. You have the flexibility to insert a single item, multiple items, or an entire array into another array. Moreover, JavaScript provides you with the means to traverse arrays and effect changes using a variety of techniques. All of these array operations are facilitated through the properties and methods found within the Array.prototype object.

Different methods for appending something to an array in JavaScript

• push Method
• unshift() Method
• splice() Method
• Index Assignment
• Spread Operator (…) with concat()

By using the push method

In JavaScript, you can use the push() method to append one or more elements to the end of an array.

Syntax :

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

• array: The array to which you want to add elements.
• element1, element2, ..., elementN: The elements you want to append to the array.

Example 1: Append a Single Element to an Array

let fruits = ["apple", "banana", "cherry"];
fruits.push("date"); // Append "date" to the end of the array
console.log(fruits); 

Output :

 ["apple", "banana", "cherry", "date"]

Example 2: Append Multiple Elements to an Array

let numbers = [1, 2, 3];
numbers.push(4, 5, 6); // Append 4, 5, and 6 to the end of the array
console.log(numbers); 

Output :

[1, 2, 3, 4, 5, 6]

Example 3: Append an Array to Another Array

let array1 = [1, 2, 3];
let array2 = [4, 5];
array1.push(...array2); // Append the elements of array2 to the end of array1
console.log(array1);

Output :

[1, 2, 3, 4, 5]

By using the unshift method

To append something to the beginning of an array in JavaScript using the unshift() method.

Syntax :

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

• array: The original array you want to append elements to.
• element1, element2, ..., elementN: Elements to be appended to the beginning of the array.

Example 1: Appending a Single Element

let fruits = ['banana', 'apple'];
fruits.unshift('orange');

console.log(fruits); 

Output :

['orange', 'banana', 'apple']

In this illustrative example, we employ the unshift() method to add a single element, namely ‘orange’, right at the outset of the fruits array. Consequently, the original fruits array undergoes modification, and ‘orange’ takes its place as the foremost element.

Example 2: Appending Multiple Elements

let numbers = [3, 4, 5];
numbers.unshift(1, 2);

console.log(numbers);

In this case, we utilize the unshift() method to prepend multiple elements (1 and 2) to the beginning of the numbers array. Consequently, the original array, numbers, is effectively modified, and as a result, the freshly added elements seamlessly occupy the leading positions within the array.

Output :

[1, 2, 3, 4, 5]

Example 3: Appending an Array

let colors = ['green', 'blue'];
colors.unshift(['red', 'yellow']);

console.log(colors); 

Output :

[['red', 'yellow'], 'green', 'blue']

In this particular instance, we opt to append an entire array ([‘red’, ‘yellow’]) to the beginning of the colors array using the unshift() method. Consequently, the original colors array undergoes modification, and the new elements, represented by the sub-array, seamlessly assume the position of the first element.

By using the splice method

Appending elements to an array in JavaScript can be accomplished effectively using the splice() method. This method allows you to insert one or more elements at a specified position within an array.

Syntax :

array.splice(index, deleteCount, element1, element2, ...);

• array: The target array where you want to append elements.
• index: The index at which you want to start appending elements.
• deleteCount: An optional parameter that specifies the number of elements to remove before adding new elements. If set to 0, no elements are removed.
• element1, element2, …: The elements you want to append to the array.

Example 1: Appending a Single Element

let fruits = ['apple', 'banana', 'cherry'];
fruits.splice(fruits.length, 0, 'grape');

console.log(fruits); 

Output :

['apple', 'banana', 'cherry', 'grape']

Example 2: Appending Multiple Elements

let numbers = [1, 2, 3];
numbers.splice(numbers.length, 0, 4, 5, 6);

console.log(numbers);

Output :

[1, 2, 3, 4, 5, 6]

Example 3: Appending an Array

let colors = ['red', 'green', 'blue'];
colors.splice(colors.length, 0, ...['yellow', 'orange']);

console.log(colors); 

Output :

['red', 'green', 'blue', 'yellow', 'orange']

By using Index Assignment

We can append elements to an array in JavaScript using index assignment. This method involves specifying the index where you want to add elements, thus allowing for precise control over where new items are placed within the array.

Syntax :

array[index] = value;

• array: The target array.
• index: The position in the array where you want to insert the element.
• value: The element you wish to append.

Example 1: Appending a Single Element at the End

const fruits = ['apple', 'banana'];
fruits[fruits.length] = 'cherry';

console.log(fruits); 

Output :

['apple', 'banana', 'cherry']

Example 2: Appending Multiple Elements at Specific Indices

const numbers = [1, 2, 3];
numbers[3] = 4;
numbers[4] = 5;

console.log(numbers); 

Output :

[1, 2, 3, 4, 5]

Example 3: Overwriting an Existing Element

const colors = ['red', 'green', 'blue'];
colors[1] = 'yellow';

console.log(colors); 

Output :

['red', 'yellow', 'blue']

By using the spread operator (...) with concat() method

To append elements to an array in JavaScript using the spread operator (...) along with the concat() method.

The concat() method is non-destructive, meaning it doesn’t modify the original array but creates a new array with the appended elements.

Syntax :

let newArray = originalArray.concat(...elementsToAdd);

• originalArray: The existing array you want to append elements to.
• ...elementsToAdd: The elements you want to append to originalArray. You can pass multiple elements separated by commas, or you can pass another array.

Example 1: Appending a Single Element

let fruits = ['apple', 'banana'];
let newFruits = fruits.concat('cherry');

console.log(fruits);     
console.log(newFruits);  

Output :

['apple', 'banana']
['apple', 'banana', 'cherry']

Example 2: Appending Multiple Elements

let numbers = [1, 2, 3];
let newNumbers = numbers.concat(4, 5, 6);

console.log(numbers);      
console.log(newNumbers);  

Output :

[1, 2, 3]
[1, 2, 3, 4, 5, 6]

Example 3: Appending an Array

let animals = ['cat', 'dog'];
let newAnimals = animals.concat(['elephant', 'giraffe']);

console.log(animals);     
console.log(newAnimals); 

Output :

['cat', 'dog']
['cat', 'dog', 'elephant', 'giraffe']

Conclusion :

To add value to an array in JavaScript, you have several built-in methods at your disposal. These methods, including push(), unshift(), and splice() and also using Index Assignment and spread operator (...) with concat() Method , make it easy to manipulate arrays.

• Push(): You can use push() to effortlessly append an element to the end of an array.
• Unshift(): On the other hand, unshift() allows you to insert a new element right at the beginning of the array.
• Splice(): When you need to insert an element in the middle of the array, the splice() method comes in handy.

This article presents a clear guide on how to employ these methods to add values to arrays efficiently.