Introduction

Arrays are fundamental data structures in JavaScript that allow us to store multiple values in a single variable. JavaScript provides a wide range of array manipulation methods that make working with arrays efficient and convenient. In this blog, we will explore some essential array operations and learn how to use them effectively.

1. Push Operation

The push method adds one or more elements to the end of an array.

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log("After Push", fruits); // ['apple', 'banana', 'orange']

2. Pop Operation

The pop method removes the last element from the array and returns it.

// ['apple', 'banana', 'orange']
const remElement = fruits.pop();
console.log("Popped Element", remElement); // Popped Element orange
console.log("After pop", fruits); // ['apple', 'banana']

3. Shift Operation

The shift method removes the first element from the array and returns it.

// ['apple', 'banana']
const shiftElement = fruits.shift();
console.log("Removed Element", shiftElement); // Removed Element apple
console.log("After Shift", fruits); // ['banana']

4. Unshift Operation

The unshift method adds one or more elements to the beginning of the array.

// ['banana']
fruits.unshift("apple", "mango", "kiwi");
console.log("After unshift", fruits);
// ['apple', 'mango', 'kiwi', 'banana']

5. Splice Operation (Removing Elements)

The splice method removes elements from the array and returns the removed elements.

// ['apple', 'mango', 'kiwi', 'banana']
//     0        1       2         3
// Start index is 1 and 2 is the number of elements to be removed from array
const remSplice = fruits.splice(1, 2); 
console.log("Removed from splice", remSplice); // ['mango', 'kiwi']
console.log("Array after splice", fruits); // ['apple', 'banana']

6. Splice Operation (Adding Elements)

The splice method can also be used to add elements to an array.

// ['apple', 'banana']
//     0         1
// First parameter is the start index
// Second parameter is the number of elements removed from the start index
fruits.splice(1, 0, "grape", "pear");
console.log("After splice add", fruits);
// ['apple', 'grape', 'pear', 'banana']

7. Splice Operation (Replacing Elements)

The splice method can replace elements in the array.

// ['apple', 'grape', 'pear', 'banana']
//     0        1        2        3
fruits.splice(2, 1, "pine");
console.log("After Replacing", fruits);
// ['apple', 'grape', 'pine', 'banana']

8. Slice Operation

The slice method creates a shallow copy of a portion of an array into a new array.

// ['apple', 'grape', 'pine', 'banana']
// 0-------1*********2-------3---------4
// Element selected from 1 to 2
const sliced = fruits.slice(1, 2);
console.log("Sliced", sliced); // ['grape']

9. Slice Operation (Remove till the end from the index)

The slice method can also be used to remove elements from the given index till the end of the array.

// ['apple', 'grape', 'pine', 'banana']
// It will select the elements till end from the start index
const sliced1 = fruits.slice(2);
console.log("Sliced till end", sliced1); // ['pine', 'banana']

10. forEach

The forEach method iterates through the elements of the array and executes a provided function for each element.

// ['apple', 'grape', 'pine', 'banana']
fruits.forEach((fruit) => {
  console.log(fruit);
});
/* Output:
   apple
   grape
   pine
   banana
*/

11. map

The map method creates a new array by applying a function to each element of the original array.

// ['apple', 'grape', 'pine', 'banana']
let mapped = fruits.map((fruit, index) => {
  return index + "_" + fruit;
});
console.log("Mapped", mapped);
// ['0_apple', '1_grape', '2_pine', '3_banana']

12. filter

The filter method creates a new array with elements that pass the provided test (predicate) function.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let evenNumbers = numbers.filter((num) => {
  return num % 2 === 0;
});
console.log("Filtered", evenNumbers); // [2, 4, 6, 8]

13. reduce

The reduce method reduces the array to a single value by applying a function to each element.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let sum = numbers.reduce((prevSum, num) => {
  return prevSum + num;
});
console.log("Reduced", sum); // 45

Conclusion

Arrays are incredibly versatile in JavaScript, and the array operations covered in this blog enable us to manipulate and transform arrays efficiently. Understanding these operations is crucial for any JavaScript developer to write cleaner and more concise code when working with arrays. Whether it's adding, removing, replacing, or transforming elements.

Happy coding ^_^!