Adding elements to a JavaScript array is a fundamental operation that developers frequently perform. JavaScript provides multiple methods to accomplish this task, each suitable for different scenarios.

1. Add Elements to the End of an Array - Using push() Method

The push() method adds one or more elements to the end of an array and returns the new length of the array.

Example:

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

// Output: ['apple', 'banana', 'orange']
console.log(fruits);

Adding Multiple Elements

let fruits = ['apple', 'banana', 'orange'];
fruits.push('grape', 'mango');

// Output: ['apple', 'banana', 'orange', 'grape', 'mango']
console.log(fruits);

2. Add Elements to the Beginning of an Array - Using unshift() Method

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

Example:

let vegetables = ['carrot', 'potato'];

vegetables.unshift('tomato');

// Output: ['tomato', 'carrot', 'potato']
console.log(vegetables);

Adding Multiple Elements

let vegetables = ['tomato', 'carrot', 'potato'];

vegetables.unshift('cucumber', 'pepper');

// Output: ['cucumber', 'pepper', 'tomato', 'carrot', 'potato']
console.log(vegetables);

3. Add Elements At Specific Position of an Array - Using splice() Method

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. This method can be used to add elements at any position in the array.

Example:

let animals = ['dog', 'cat', 'rabbit'];

// Adds 'hamster' at index 1
animals.splice(1, 0, 'hamster');

// Output: ['dog', 'hamster', 'cat', 'rabbit']
console.log(animals);

Adding Multiple Elements:

let animals = ['dog', 'hamster', 'cat', 'rabbit'];

animals.splice(2, 0, 'parrot', 'turtle');

// Output: ['dog', 'hamster', 'parrot', 'turtle', 'cat', 'rabbit']
console.log(animals); 

4. Add Elements in form of Array - Using concat() Method

The concat() method is used to merge two or more arrays. This method does not change the existing arrays but instead returns a new array.

Example:

let numbers1 = [1, 2, 3];
let numbers2 = [4, 5, 6];

// Combines both arrays
let combined = numbers1.concat(numbers2);

// Output: [1, 2, 3, 4, 5, 6]
console.log(combined);

Adding Single Element:

let combined = [1, 2, 3, 4, 5, 6];
let moreNumbers = combined.concat(7);

// Output: [1, 2, 3, 4, 5, 6, 7]
console.log(moreNumbers); 

5. Add Elements to the Array using Spread Operator (...)

The spread operator (...) allows an iterable such as an array to be expanded in places where zero or more arguments are expected. This can be used to add elements to an array in a concise manner.

Example:

let letters = ['a', 'b', 'c'];
let moreLetters = ['d', 'e', 'f'];

// Combines both arrays
let allLetters = [...letters, ...moreLetters];

// Output: ['a', 'b', 'c', 'd', 'e', 'f']
console.log(allLetters); 

Adding Single Element:

let letters = ['a', 'b', 'c'];
let newLetters = [...letters, 'g'];

// Output: ['a', 'b', 'c', 'g']
console.log(newLetters); 

6. Add Elements using Array.prototype.reduce() Method

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. It can also be used to accumulate values into an array.

Example:

let initialArray = [1, 2, 3];

// Starts with [4, 5] and adds each
// element of initialArray
let addedElements = initialArray.reduce((acc, val) => {
    acc.push(val);
    return acc;
}, [4, 5]); 
console.log(addedElements); // Output: [4, 5, 1, 2, 3]

7. Add Elements using Array.prototype.slice() Method

The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). This can be used to add elements to arrays by combining slices.

Example:

let weekdays = ['Monday', 'Tuesday', 'Wednesday'];
let addedDay = [...weekdays.slice(0, 2), 'Thursday', ...weekdays.slice(2)];

// Output: ['Monday', 'Tuesday', 'Thursday', 'Wednesday']
console.log(addedDay); 

Conclusion

Adding elements to a JavaScript array can be done in several ways, each serving different purposes and scenarios. Whether you need to add elements at the beginning, end, or any specific position in the array, JavaScript provides versatile methods to accomplish these tasks.