Mastering Array Functions in JavaScript: slice, splice, and forEach

Array Functions in JavaScript: slice, splice, and forEach

JavaScript arrays come with a set of built-in methods that help you manipulate and interact with array elements. Three commonly used array methods are slice, splice, and forEach. These methods can greatly enhance your ability to work with arrays in a clean and efficient way.

1. slice() Method

The slice() method is used to extract a portion of an array without modifying the original array. It creates a shallow copy of a portion of the array and returns a new array.

Syntax:

array.slice(start, end);

• start: The index at which to begin extraction. The element at this index is included.
• end: The index at which to end extraction (not included). If omitted, it slices until the end of the array.

Examples:

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

// Slice from index 1 to index 3 (excluding index 3)
const newArr = arr.slice(1, 3);

console.log(newArr);  // Output: [2, 3]

• In this example, arr.slice(1, 3) returns a new array starting at index 1 and ending just before index 3.

If the end argument is omitted, slice() will copy everything from the start index to the end of the array:

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

// Slice from index 2 to the end
const newArr = arr.slice(2);

console.log(newArr);  // Output: [3, 4, 5]

Negative Indices:

You can also use negative indices to slice from the end of the array:

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

// Slice from index -3 to the end
const newArr = arr.slice(-3);

console.log(newArr);  // Output: [3, 4, 5]

2. splice() Method

The splice() method is used to modify an array by adding or removing elements. It changes the original array and can be used to insert or remove items at a specific index.

Syntax:

array.splice(start, deleteCount, item1, item2, ..., itemN);

• start: The index at which to start changing the array.
• deleteCount: The number of elements to remove starting from the start index.
• item1, item2, ..., itemN: Elements to add to the array starting from the start index.

Examples:

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

// Remove 2 elements from index 2
const removedElements = arr.splice(2, 2);

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

• In this example, arr.splice(2, 2) removes 2 elements starting at index 2 (3 and 4).

You can also use splice() to add elements to the array:

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

// Insert 6 and 7 at index 2
arr.splice(2, 0, 6, 7);

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

• Here, arr.splice(2, 0, 6, 7) inserts 6 and 7 at index 2 without removing any elements (deleteCount is 0).

Removing and Adding Together:

You can also use splice() to remove and add elements in one operation:

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

// Remove 2 elements at index 1 and add 6 and 7
arr.splice(1, 2, 6, 7);

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

3. forEach() Method

The forEach() method is used to iterate over the elements of an array and apply a function to each element. Unlike map() or filter(), forEach() does not return a new array; it simply executes the given function on each element.

Syntax:

array.forEach(callback(currentValue, index, array));

• callback: The function to be executed on each element.
  • currentValue: The current element being processed in the array.
  • index: The index of the current element.
  • array: The array that forEach is being called on.

Example:

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

// Print each element of the array
arr.forEach(function(element) {
  console.log(element);
});

// Output:
// 1
// 2
// 3
// 4
// 5

Using Arrow Functions:

You can also use an arrow function to make the code more concise:

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

arr.forEach((element, index) => {
  console.log(`Index ${index}: ${element}`);
});

// Output:
// Index 0: 1
// Index 1: 2
// Index 2: 3
// Index 3: 4
// Index 4: 5

Modifying Array Elements:

Keep in mind that forEach() is used for performing side effects (e.g., logging or updating values), not for returning or modifying the array. If you need a new array based on the existing one, consider using map().

const arr = [1, 2, 3];

// Double each element (but doesn't return a new array)
arr.forEach((element, index, array) => {
  array[index] = element * 2;
});

console.log(arr);  // Output: [2, 4, 6]

Comparison of slice, splice, and forEach

Method	Purpose	Mutates Original Array	Returns Value
slice	Extracts a portion of an array without modifying it	No	A new array (shallow copy)
splice	Adds/removes elements at specific positions in array	Yes	The removed elements (array)
forEach	Executes a function on each array element	No	undefined

Conclusion

• slice() is perfect for extracting a portion of an array without modifying the original array.
• splice() allows you to remove, replace, or add elements to an array, and it modifies the original array.
• forEach() is ideal for iterating over array elements and performing side effects, but it does not return a new array.

These methods are essential tools when working with arrays in JavaScript and can make your code more efficient and readable.

---

Hi, I'm Abhay Singh Kathayat!
I am a full-stack developer with expertise in both front-end and back-end technologies. I work with a variety of programming languages and frameworks to build efficient, scalable, and user-friendly applications.
Feel free to reach out to me at my business email: [e-mail].