🔄 Data Transformation = Clean Data
Raw data needs processing. JavaScript array methods transform, filter, and aggregate data into usable formats.
📝 Data Processing Patterns
// User Data
const users = [
{ id: 1, name: 'Alice', age: 25, city: 'NYC', active: true },
{ id: 2, name: 'Bob', age: 30, city: 'LA', active: false },
{ id: 3, name: 'Charlie', age: 35, city: 'NYC', active: true },
{ id: 4, name: 'Diana', age: 28, city: 'SF', active: true },
{ id: 5, name: 'Eve', age: 22, city: 'LA', active: false }
];
// 1. Filter Active Users
const activeUsers = users.filter(u => u.active);
// 2. Map to Names and Cities
const userLocations = users.map(u => ({ name: u.name, city: u.city }));
// 3. Group by City
const groupedByCity = users.reduce((acc, user) => {
acc[user.city] = acc[user.city] || [];
acc[user.city].push(user);
return acc;
}, {});
// 4. Age Statistics
const ageStats = users.reduce((acc, user) => {
acc.sum += user.age;
acc.count++;
return acc;
}, { sum: 0, count: 0 });
const averageAge = ageStats.sum / ageStats.count;
// 5. Get Unique Cities
const cities = [...new Set(users.map(u => u.city))];
// 6. Sort by Age
const sortedByAge = [...users].sort((a, b) => a.age - b.age);
// 7. Find Oldest User
const oldest = users.reduce((max, user) =>
user.age > max.age ? user : max
);
🎯 Advanced Data Processing
// Data Pipeline
const pipeline = (data) =>
data
.filter(item => item.active)
.map(item => ({
...item,
ageGroup: item.age < 30 ? 'Young' : 'Senior'
}))
.sort((a, b) => a.age - b.age);
// Chunk Data
const chunk = (array, size) =>
array.reduce((acc, _, i) =>
i % size === 0 ? [...acc, array.slice(i, i + size)] : acc
, []);
// Flatten Nested Arrays
const flatten = (arr) => arr.reduce((acc, val) =>
acc.concat(Array.isArray(val) ? flatten(val) : val), []
);
// Deep Clone Objects
const deepClone = (obj) =>
JSON.parse(JSON.stringify(obj));
// Merge Objects
const mergeObjects = (...objs) =>
objs.reduce((acc, obj) => ({ ...acc, ...obj }), {});
// Performance Optimization
const processData = (data) => {
// Use single-pass when possible
let activeCount = 0;
let totalAge = 0;
for (const user of data) {
if (user.active) {
activeCount++;
totalAge += user.age;
}
}
return {
activeCount,
averageAge: totalAge / activeCount
};
};
💡 Data Processing Tips
- Use immutable operations
- Consider performance for large datasets
- Use meaningful variable names
- Document complex transformations
- Test edge cases
Array methods make data transformation elegant and readable. They’re essential for modern JavaScript development.
