Array Functions

Higher-Order Array Functions

Array functions (map, filter, reduce, etc.) are higher-order functions that take functions as arguments, enabling functional programming patterns.

Try Array Functions

Code Editor
Console Output
Click "Run" to execute your code...

Example 1: map() - Transform Elements

// map() creates a new array by transforming each element
const numbers = [1, 2, 3, 4, 5];

// Double each number
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// Square each number
const squared = numbers.map(num => num ** 2);
console.log(squared); // [1, 4, 9, 16, 25]

// With objects
const users = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Bob', age: 35 }
];

// Extract names
const names = users.map(user => user.name);
console.log(names); // ['John', 'Jane', 'Bob']

// Transform to new structure
const userCards = users.map(user => ({
  displayName: user.name.toUpperCase(),
  info: `Age: ${user.age}`
}));
console.log(userCards);
// [
//   { displayName: 'JOHN', info: 'Age: 30' },
//   { displayName: 'JANE', info: 'Age: 25' },
//   { displayName: 'BOB', info: 'Age: 35' }
// ]

// With index and array parameters
const indexed = numbers.map((num, index, arr) => {
  return `[${index}]: ${num} of ${arr.length}`;
});
console.log(indexed);
// ['[0]: 1 of 5', '[1]: 2 of 5', ...]

// Chain with other methods
const result = numbers
  .map(num => num * 2)     // [2, 4, 6, 8, 10]
  .map(num => num + 1);    // [3, 5, 7, 9, 11]
console.log(result);

Example 2: filter() - Select Elements

// filter() creates a new array with elements that pass the test
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Filter even numbers
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]

// Filter odd numbers
const odds = numbers.filter(num => num % 2 !== 0);
console.log(odds); // [1, 3, 5, 7, 9]

// Filter numbers greater than 5
const greaterThan5 = numbers.filter(num => num > 5);
console.log(greaterThan5); // [6, 7, 8, 9, 10]

// With objects
const products = [
  { name: 'Laptop', price: 1000, inStock: true },
  { name: 'Phone', price: 500, inStock: false },
  { name: 'Tablet', price: 300, inStock: true },
  { name: 'Watch', price: 200, inStock: true }
];

// Filter in-stock products
const available = products.filter(p => p.inStock);
console.log(available);

// Filter by price range
const affordable = products.filter(p => p.price < 400);
console.log(affordable);

// Complex filtering
const expensiveAndAvailable = products.filter(p => {
  return p.price > 250 && p.inStock;
});
console.log(expensiveAndAvailable);

// Remove duplicates
const withDuplicates = [1, 2, 2, 3, 4, 4, 5];
const unique = withDuplicates.filter((num, index, arr) => {
  return arr.indexOf(num) === index;
});
console.log(unique); // [1, 2, 3, 4, 5]

// Remove falsy values
const mixed = [0, 1, false, 2, '', 3, null, undefined, 4, NaN];
const truthy = mixed.filter(Boolean);
console.log(truthy); // [1, 2, 3, 4]

Example 3: reduce() - Accumulate Values

// reduce() reduces array to a single value
const numbers = [1, 2, 3, 4, 5];

// Sum all numbers
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

// Product of all numbers
const product = numbers.reduce((acc, num) => acc * num, 1);
console.log(product); // 120

// Find maximum
const max = numbers.reduce((max, num) => num > max ? num : max, numbers[0]);
console.log(max); // 5

// Count occurrences
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
console.log(count); // { apple: 3, banana: 2, orange: 1 }

// Group by property
const people = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Alice', age: 25 }
];

const groupedByAge = people.reduce((acc, person) => {
  const age = person.age;
  if (!acc[age]) {
    acc[age] = [];
  }
  acc[age].push(person);
  return acc;
}, {});
console.log(groupedByAge);
// {
//   25: [{ name: 'Jane', age: 25 }, { name: 'Alice', age: 25 }],
//   30: [{ name: 'John', age: 30 }, { name: 'Bob', age: 30 }]
// }

// Flatten array
const nested = [[1, 2], [3, 4], [5, 6]];
const flat = nested.reduce((acc, arr) => acc.concat(arr), []);
console.log(flat); // [1, 2, 3, 4, 5, 6]

// Build object from array
const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' }
];

const usersById = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});
console.log(usersById);
// { 1: { id: 1, name: 'John' }, 2: { id: 2, name: 'Jane' } }

// Pipeline of operations
const result = [1, 2, 3, 4, 5].reduce((acc, num) => {
  return acc + num * 2; // Sum of doubled numbers
}, 0);
console.log(result); // 30

Example 4: find(), findIndex(), some(), every()

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// find() - returns first matching element
const firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // 2

const greaterThan5 = numbers.find(num => num > 5);
console.log(greaterThan5); // 6

// findIndex() - returns index of first match
const firstEvenIndex = numbers.findIndex(num => num % 2 === 0);
console.log(firstEvenIndex); // 1

// some() - checks if at least one element matches
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

const hasNegative = numbers.some(num => num < 0);
console.log(hasNegative); // false

// every() - checks if all elements match
const allPositive = numbers.every(num => num > 0);
console.log(allPositive); // true

const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // false

// With objects
const users = [
  { name: 'John', age: 30, active: true },
  { name: 'Jane', age: 25, active: false },
  { name: 'Bob', age: 35, active: true }
];

// Find user by name
const user = users.find(u => u.name === 'Jane');
console.log(user); // { name: 'Jane', age: 25, active: false }

// Check if any user is inactive
const hasInactive = users.some(u => !u.active);
console.log(hasInactive); // true

// Check if all users are adults
const allAdults = users.every(u => u.age >= 18);
console.log(allAdults); // true

// Practical: Form validation
const formFields = [
  { name: 'email', value: 'test@example.com', valid: true },
  { name: 'password', value: '12345', valid: false },
  { name: 'username', value: 'john', valid: true }
];

const isFormValid = formFields.every(field => field.valid);
console.log(isFormValid); // false

const hasErrors = formFields.some(field => !field.valid);
console.log(hasErrors); // true

Example 5: Chaining Array Functions

// Complex data transformation with chaining
const orders = [
  { id: 1, product: 'Laptop', price: 1000, quantity: 1, status: 'completed' },
  { id: 2, product: 'Phone', price: 500, quantity: 2, status: 'completed' },
  { id: 3, product: 'Tablet', price: 300, quantity: 1, status: 'pending' },
  { id: 4, product: 'Watch', price: 200, quantity: 3, status: 'completed' },
  { id: 5, product: 'Headphones', price: 100, quantity: 2, status: 'cancelled' }
];

// Calculate total revenue from completed orders
const totalRevenue = orders
  .filter(order => order.status === 'completed')
  .map(order => order.price * order.quantity)
  .reduce((sum, total) => sum + total, 0);

console.log(totalRevenue); // 3600

// Get products with quantity > 1, sorted by price
const multipleItemOrders = orders
  .filter(order => order.quantity > 1)
  .map(order => ({
    product: order.product,
    total: order.price * order.quantity
  }))
  .sort((a, b) => b.total - a.total);

console.log(multipleItemOrders);

// Find average price of completed orders
const completedOrders = orders.filter(o => o.status === 'completed');
const averagePrice = completedOrders.reduce((sum, o) => sum + o.price, 0) / completedOrders.length;
console.log(averagePrice); // 550

// Group orders by status
const ordersByStatus = orders.reduce((acc, order) => {
  const status = order.status;
  if (!acc[status]) {
    acc[status] = [];
  }
  acc[status].push(order);
  return acc;
}, {});

console.log(ordersByStatus);

// Extract and format data
const summary = orders
  .filter(o => o.status === 'completed')
  .map(o => `${o.product}: $${o.price * o.quantity}`)
  .join(', ');

console.log(summary);
// Laptop: $1000, Phone: $1000, Watch: $600

Key Points

  • map(): Transforms each element, returns new array same length
  • filter(): Selects elements, returns new array (possibly shorter)
  • reduce(): Accumulates values, returns single value
  • find(): Returns first matching element or undefined
  • some(): Returns true if any element matches
  • every(): Returns true if all elements match
  • These methods don't mutate the original array
  • Can be chained for complex data transformations