⚡

Advanced Array Methods

Intermediate

110 XP

45 min

Lesson Content

Advanced Array Methods

JavaScript provides powerful array methods for transforming, filtering, and manipulating arrays. These methods make array operations more functional and expressive.

Transformation Methods

// map() - Transform each element
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8]

// flatMap() - Map and flatten
const words = ['hello world', 'foo bar'];
const letters = words.flatMap(word => word.split(' ')); // ['hello', 'world', 'foo', 'bar']

Filtering Methods

// filter() - Keep matching elements
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// find() - Find first matching element
const users = [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}];
const user = users.find(u => u.id === 2); // {id: 2, name: 'Jane'}

// findIndex() - Find index of first match
const index = users.findIndex(u => u.name === 'Jane'); // 1

Reduction Methods

// reduce() - Combine all elements
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10

// reduceRight() - Reduce from right to left
const words = ['hello', 'world'];
const sentence = words.reduceRight((acc, word) => acc + ' ' + word); // 'world hello'

Iteration Methods

// forEach() - Execute for each element
numbers.forEach(num => console.log(num));

// some() - Check if any element matches
const hasEven = numbers.some(n => n % 2 === 0); // true

// every() - Check if all elements match
const allPositive = numbers.every(n => n > 0); // true

Chaining Methods

const result = numbers
  .filter(n => n > 2)
  .map(n => n * 2)
  .reduce((sum, n) => sum + n, 0);

Example Code

Use advanced array methods to manipulate data

const products = [
  { id: 1, name: 'Laptop', price: 999, category: 'Electronics' },
  { id: 2, name: 'Phone', price: 699, category: 'Electronics' },
  { id: 3, name: 'Book', price: 19, category: 'Books' },
  { id: 4, name: 'Tablet', price: 399, category: 'Electronics' },
  { id: 5, name: 'Pen', price: 2, category: 'Office' }
];

// Filter electronics
const electronics = products.filter(p => p.category === 'Electronics');
console.log('Electronics:', electronics);

// Map to get names only
const names = products.map(p => p.name);
console.log('Names:', names);

// Find expensive product (> 500)
const expensive = products.find(p => p.price > 500);
console.log('Expensive:', expensive);

// Calculate total price
const total = products.reduce((sum, p) => sum + p.price, 0);
console.log('Total:', total);

// Check if all products have price > 0
const allValid = products.every(p => p.price > 0);
console.log('All valid:', allValid);

// Check if any product is expensive
const hasExpensive = products.some(p => p.price > 800);
console.log('Has expensive:', hasExpensive);

// Chain methods: Get total price of electronics
const electronicsTotal = products
  .filter(p => p.category === 'Electronics')
  .reduce((sum, p) => sum + p.price, 0);
console.log('Electronics total:', electronicsTotal);

Expected Output:

Electronics: [{id:1,name:Laptop,price:999,category:Electronics},{id:2,name:Phone,price:699,category:Electronics},{id:4,name:Tablet,price:399,category:Electronics}]
Names: [Laptop,Phone,Book,Tablet,Pen]
Expensive: {id:1,name:Laptop,price:999,category:Electronics}
Total: 2118
All valid: true
Has expensive: true
Electronics total: 2097

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code