Arrays, Modern Iterators: map(), filter(), reduce() & find()

Arrays are ordered collections of data. Functional array methods are critical for React and modern JavaScript.

map(): Transforms each item and returns a new array of the same length.

filter(): Returns a new array containing only items that satisfy a boolean condition.

find(): Returns the first element matching the condition, or undefined.

reduce(): Accumulates array values into a single result (e.g. sum, grouped object).

⊞Code Example

const products = [

{ id: 1, name: "Mechanical Keyboard", price: 80, inStock: true },

{ id: 2, name: "Wireless Mouse", price: 40, inStock: false },

{ id: 3, name: "4K Monitor", price: 300, inStock: true }

];

// 1. filter in-stock products

const available = products.filter(p => p.inStock);

// 2. map product names

const productNames = products.map(p => p.name);

// 3. reduce total inventory price

const totalPrice = products.reduce((total, p) => total + p.price, 0);

console.log(totalPrice); // 420