How to append something to an array?

There are various ways to append elements to an array in JavaScript. Appending elements to an array is an essential operation while working with an array.

1. Using push() Method

The push() method is the most basic and widely used way to append an item (or multiple items) to the end of an array.

let arr = [10, 20, 30, 40, 50];
arr.push(60);

console.log(arr); 
// Output: [10, 20, 30, 40, 50, 60]

You can also append multiple items at once:

let arr = [10, 20, 30, 40, 50];
arr.push(60, 70, 80);

console.log(arr); 
// Output: [10, 20, 30, 40, 50, 60, 70, 80]

Explanation

• The push() method modifies the original array.
• It returns the new length of the array.
• It can append any type of element, including objects, numbers, or even other arrays.

2. Using the Spread Operator (…)

The spread operator (...) allows you to spread the elements of one array into another. You can use it to append elements to an array without directly modifying the original array.

let arr = [10, 20, 30, 40, 50];
let newArr = [...arr, 60];

console.log(newArr); 
// Output: [10, 20, 30, 40, 50, 60]

You can also append multiple elements or even an entire array:

let arr = [10, 20, 30, 40, 50];
let newArr = [...arr, 60, 70, 80];

console.log(newArr); 
// Output: [10, 20, 30, 40, 50, 60, 70, 80]

Explanation

• The spread operator does not mutate the original array.
• It creates a new array, appending the elements you want.
• It works well for adding elements or merging arrays.

3. Using concat() Method

The concat() method is used to merge two or more arrays, or append elements to an array. Unlike push(), it does not modify the original array but instead returns a new array.

let arr = [10, 20, 30, 40, 50];
let newArr = arr.concat(60);

console.log(arr); 
// Output: [10, 20, 30, 40, 50, 60]

You can also append multiple elements or even another array:

let arr = [10, 20, 30, 40, 50];
let newArr = arr.concat(60, 70, 80);

console.log(newArr); 
// Output: [10, 20, 30, 40, 50, 60, 70, 80]

Explanation

• The concat() method does not change the original array.
• It returns a new array with the elements appended.
• It can append both individual elements and entire arrays.

4. Using unshift() Method (for Prepending)

While the unshift() method is used to append elements to the beginning of an array (as opposed to the end), it’s still a useful approach when you need to prepend an item.

let arr = [10, 20, 30, 40, 50];
arr.unshift(5);

console.log(arr); 
// Output: [5, 10, 20, 30, 40, 50]

Explanation

• The unshift() method modifies the original array by adding elements at the beginning.
• It returns the new length of the array.
• If you need to add elements to the start of an array, this method is ideal.

5. Using forEach() to Append Multiple Elements

If you want to append multiple elements to an array one at a time, you can use the forEach() method. This is particularly useful when you need to add elements dynamically from another collection (like an object or another array).

let arr = [10, 20, 30, 40, 50];
let newArr = [60, 70, 80];

newArr.forEach(item => arr.push(item));

console.log(arr); 
// Output: [10, 20, 30, 40, 50, 60, 70, 80]

Explanation

• forEach() executes a function for each item in the array.
• It allows for dynamic operations, like appending multiple elements from other arrays or objects.

7. Using Array splice() Method

While splice() is commonly used for removing elements from an array, but it can also be used to insert new elements at any position in the array, including the end. This method allows for more flexible insertion and deletion operations.

let arr = [10, 20, 30, 40, 50];
arr.splice(arr.length, 0, 60);

console.log(arr); 
// Output: [ 10, 20, 30, 40, 50, 60 ]

Explanation

• The splice() method modifies the original array.
• It can add elements at a specific position, including the end (fruits.length).
• It also allows for removal and replacement of elements, making it a versatile array method.