Array Operations & Modern High-Order Methods

Arrays are ordered collections of data. Modern JavaScript provides powerful, built-in methods to traverse, filter, and transform arrays with minimal code.

1. Basic Array Manipulation

Adding & Removing Elements (Impure: Mutates the Original Array)

• push(): Adds to the end.
• pop(): Removes from the end.
• unshift(): Adds to the beginning.
• shift(): Removes from the beginning.

let fruits = ["apple", "banana"];
fruits.push("cherry");   // ["apple", "banana", "cherry"]
fruits.shift();          // ["banana", "cherry"]

Slicing & Splicing

• slice(start, end) (Pure: Returns a new array): Copies a portion of an array.

let colors = ["red", "green", "blue", "yellow"];
let selected = colors.slice(1, 3); // ["green", "blue"] (copies index 1 up to but excluding 3)

• splice(start, count, items...) (Impure: Mutates original): Adds, removes, or replaces elements.

let items = ["A", "B", "C"];
items.splice(1, 1, "X"); // Removes 1 item at index 1 and inserts "X"
console.log(items); // ["A", "X", "C"]

2. Functional High-Order Methods (Pure: Return New Values)

High-order methods take callback functions as arguments to inspect or transform elements.

A. map(): Transform Elements

Creates a new array by applying a function to every element of the original array.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

B. filter(): Filter Elements

Creates a new array containing only elements that pass a logical condition test.

const ages = [12, 18, 25, 30];
const adults = ages.filter(age => age >= 18);
console.log(adults); // [18, 25, 30]

C. reduce(): Accumulate Values

Executes a reducer function on each element, resulting in a single output value.

// Syntax: array.reduce((accumulator, currentValue) => { ... }, initialValue)
const prices = [10, 20, 30];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 60

3. Search & Test Methods

• find(): Returns the first element that matches a condition.

const users = [{id: 1, name: "Alice"}, {id: 2, name: "Bob"}];
const found = users.find(user => user.id === 2); // {id: 2, name: "Bob"}

• findIndex(): Returns the index of the first element matching the condition.
• includes(value): Returns true if the value is inside the array.
• some(): Returns true if at least one element passes the condition.
• every(): Returns true if all elements pass the condition.

const scores = [45, 60, 80];
console.log(scores.some(s => s >= 80));  // true (80 is >= 80)
console.log(scores.every(s => s >= 50)); // false (45 is not >= 50)

4. Chaining Array Methods

Since pure methods like map() and filter() return new arrays, you can chain them together for complex operations:

const products = [
  { name: "Laptop", price: 1000, category: "tech" },
  { name: "Phone", price: 500, category: "tech" },
  { name: "Shirt", price: 30, category: "clothes" }
];

// Goal: Get total price of all "tech" items
const totalTechCost = products
  .filter(p => p.category === "tech")
  .map(p => p.price)
  .reduce((sum, price) => sum + price, 0);

console.log(totalTechCost); // 1500

In the next guide, we will explore Destructuring and the Spread operator.