Turn raw data into business-ready information using map(), filter(), find(), some(), every(), reduce(), object mapping, and immutable update patterns.
Real-world data is often inconsistent, noisy, incomplete, or shaped for a source system rather than your application.
APIs, databases, forms, CSV files.
Remove noise, normalize types, handle missing values.
Rename fields, derive values, map terminology.
Reports, dashboards, KPIs, operational decisions.
map() creates a new array by applying a function to every item. The original array stays unchanged.
const products = [
{ id: 1, price: "12.50", qty: "3" },
{ id: 2, price: "8.75", qty: "5" }
];
const converted = products.map(p => ({
...p,
price: Number(p.price),
qty: Number(p.qty)
}));const withTotal = products.map(p => ({
...p,
total: p.qty * p.price,
totalLabel: `$${(p.qty*p.price).toFixed(2)}`
}));Use map() to calculate display values, standardize report fields, and reshape API responses for UI components.
const kpis = sales.map(s => ({
product: s.product,
revenue: s.revenue,
profit: s.revenue - s.cost,
marginPct: ((s.revenue-s.cost)/s.revenue*100).toFixed(1)+'%'
}));const staff = records.map(s => ({
id: s.id,
name: s.fullName ?? s.name,
department: s.dept ?? s.department,
salary: Number(s.salary || 0)
}));const chartData = orders.map(o => ({
date: o.date,
total: o.total
}));Perfect for line, bar, or area charts.
filter() returns a new array containing only items that pass a condition.
const result = array.filter((item, index, array) => {
return condition;
});const inStock = products.filter(p => p.stock > 0);const active = products.filter(p => p.status === 'active');const highValue = products.filter(p => p.stock > 0 && p.price >= 100);Filter by region, status, date range, value, risk, or any rule your business needs.
products.filter(p => p.region === 'North')products.filter(p => p.status === 'active')products.filter(p => {
const d = new Date(p.date);
return d >= start && d <= end;
});find() returns the first element that satisfies the condition. If none match, it returns undefined.
const customer = customers.find(c => c.id === 105);Use IDs or emails for reliable lookup.
const product = products.find(p => p.sku === 'P-1001');Useful for detail pages and selections.
const setting = settings.find(s => s.key === 'maxItems')?.value;Optional chaining handles missing results safely.
some() = any item matches. every() = all items match.
const hasOverdue = invoices.some(i => i.status === 'overdue');
const hasRisk = tx.some(t => t.riskScore > 80);const allComplete = tasks.every(t => t.status === 'complete');
const validScores = marks.every(m => m.score >= 0 && m.score <= 100);Use reduce() for totals, counts, averages, summaries, and grouped objects.
const revenue = orders.reduce((sum, o) => sum + o.amount, 0);const count = orders.reduce(n => n + 1, 0);const electronics = orders.reduce((n,o) => o.category==='Electronics' ? n+1 : n, 0);Grouping turns detailed records into meaningful summaries by category, region, customer, or time period.
const summary = orders.reduce((acc, o) => {
if (!acc[o.category]) {
acc[o.category] = { total: 0, quantity: 0, count: 0 };
}
acc[o.category].total += o.amount;
acc[o.category].quantity += o.quantity;
acc[o.category].count += 1;
return acc;
}, {});{
"Electronics": { total: 1270, quantity: 4, count: 3 },
"Furniture": { total: 450, quantity: 2, count: 2 }
}Use summaries to build category KPIs, tables, and charts.
Transform raw objects into clean structures that match your application and business terminology.
const renamed = {
customerId: obj.id,
name: obj.full_name,
email: obj.email_address,
joinedAt: obj.join_date
};const enhanced = {
...obj,
isNewCustomer: daysSince(obj.join_date) <= 30,
displayName: obj.full_name.toUpperCase()
};const { last_order, country_code, ...clean } = obj;Keep only what downstream systems need.
Mapping creates a stable contract between inconsistent source data and your application.
{
"id": "101",
"full_name": "Jane Doe",
"email_address": "jane@example.com",
"join_date": "2024-01-15T08:30:00Z",
"country_code": "TH",
"is_active": true
}{
customerId: 101,
name: "Jane Doe",
email: "jane@example.com",
joinedAt: "2024-01-15",
country: "Thailand",
status: "Active"
}Immutability avoids side effects and makes state changes predictable, auditable, and easier to debug.
const arr = [10, 20, 30];
const newArr = [...arr, 40];
const user = { id: 1, name: 'Alex', role: 'Teacher' };
const updated = { ...user, role: 'Admin' };user.role = 'Admin'; // mutates original
arr.push(40); // mutates originalUse map() for update, spread for add, and filter() for remove.
const updatedUsers = users.map(u =>
u.id === 2 ? { ...u, score: 85 } : u
);const newUser = { id: 3, name: 'Cara', score: 90 };
const usersWithNew = [...users, newUser];const filteredUsers = users.filter(u => u.id !== 1);Select relevant records first, then transform only what you need.
const activeProductCards = products
.filter(p => p.status === 'active')
.map(p => ({
id: p.id,
title: p.name,
price: p.price,
category: p.category
}));Derive values first, then aggregate them into totals or summaries.
const totalRevenue = orders
.map(o => ({ category: o.category, amount: o.amount }))
.reduce((acc, { category, amount }) => {
acc[category] = (acc[category] || 0) + amount;
return acc;
}, {});Compose small steps into one transparent, testable data pipeline.
const monthlyRevenue = orders
.filter(o => o.date && o.amount > 0 && o.customer)
.map(o => ({
month: o.date.slice(0, 7),
amount: o.amount
}))
.reduce((acc, { month, amount }) => {
acc[month] = (acc[month] || 0) + amount;
return acc;
}, {});Small, clear transformation steps are easier to test, reuse, and trust.