How to append something to an array in JavaScript ?

To append elements to an array in JavaScript, there are multiple methods, each with specific use cases. Here’s a detailed breakdown:

1. push(): Append to the End of the Array (Modifies Original Array)

Adds one or more elements to the end of an array and returns the new length of the array.

Example:

const arr = [1, 2, 3];
arr.push(4); // Appends 4
console.log(arr); // [1, 2, 3, 4]

// Append multiple elements:
arr.push(5, 6); // Appends 5 and 6
console.log(arr); // [1, 2, 3, 4, 5, 6]

Notes:

• Mutates the original array.
• Efficient for large arrays.
• Returns the new array length (not the array itself).

2. Spread Operator (...): Create a New Array (Immutable)

Creates a new array by combining existing elements with new values. Does not modify the original array.

Example:

const arr = [1, 2, 3];
const newArr = [...arr, 4]; // Appends 4
console.log(newArr); // [1, 2, 3, 4]

// Append multiple elements:
const newArr2 = [...arr, 4, 5, 6]; // Appends 4, 5, 6

Notes:

• Does not mutate the original array.
• Preferred for immutability (e.g., React state updates).

3. concat(): Merge Arrays (Immutable)

Merges two or more arrays and returns a new array.

Example:

const arr = [1, 2, 3];
const mergedArr = arr.concat(4); // Appends 4
console.log(mergedArr); // [1, 2, 3, 4]

// Append multiple elements or arrays:
const mergedArr2 = arr.concat([4, 5], 6); // Appends 4, 5, 6

Notes:

• Does not mutate the original array.
• Can merge arrays and individual values.

4. splice(): Insert at a Specific Index (Modifies Original Array)

Adds elements by specifying the insertion index.
Syntax:
array.splice(startIndex, deleteCount, item1, item2, ...)

Example:

const arr = [1, 2, 3];
arr.splice(arr.length, 0, 4); // Appends 4
console.log(arr); // [1, 2, 3, 4]

Notes:

• Mutates the original array.
• Use arr.length as the start index to append to the end.

5. Direct Assignment via Index

Assign a value to an index equal to the array’s length.

Example:

const arr = [1, 2, 3];
arr[arr.length] = 4; // Appends 4
console.log(arr); // [1, 2, 3, 4]

Notes:

• Mutates the original array.
• Only appends one element at a time.

6. unshift(): Add to the Beginning (Modifies Original Array)

Adds elements to the start of the array (not technically appending, but included for completeness).

Example:

const arr = [1, 2, 3];
arr.unshift(0); // Prepends 0
console.log(arr); // [0, 1, 2, 3]

Summary Table

Method	Mutates Original?	Returns	Use Case
push()	✅	New length	Append single/multiple elements.
Spread (...)	❌	New array	Immutable appends.
concat()	❌	Merged array	Merging arrays/values immutably.
splice()	✅	Removed elements	Insert at specific positions.
Direct Index	✅	N/A	Simple single-element append.

Recommendations

• Use push() for simple in-place appends.
• Use spread operator or concat() for immutable operations (e.g., React state).
• Avoid splice() for basic appends (it’s overkill unless inserting at specific positions).

Edge Cases

• Appending an array as a single element (vs. merging):

  const arr = [1, 2];
  arr.push([3, 4]); // Result: [1, 2, [3, 4]]

• To merge arrays, use spread or concat():

  const merged = [...arr, ...[3, 4]]; // [1, 2, 3, 4]