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); // 30Example 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); // trueExample 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: $600Key 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