These methods are the bread and butter of modern JS development. They allow you to process data without using old-fashioned for loops.
.map()Transforms every element in an array and returns a new array of the same length.
JavaScript
const prices = [10, 20, 30];
const taxedPrices = prices.map(p => p * 1.1); // [11, 22, 33]
.filter()Returns a new array containing only the elements that pass a specific test.
JavaScript
const ages = [12, 18, 25, 14];
const adults = ages.filter(age => age >= 18); // [18, 25]
.reduce()Reduces an entire array down to a single value (like a sum, an object, or a string).
Syntax:
array.reduce((accumulator, current) => { ... }, initialValue)
JavaScript
const cart = [5, 15, 10];
const total = cart.reduce((acc, price) => acc + price, 0); // 30
.find(): Returns the first element that matches a condition..findIndex(): Returns the index of that first element..some(): Returns true if at least one element passes the test..every(): Returns true only if all elements pass the test.JavaScript
const scores = [45, 80, 92];
const hasDistinction = scores.some(s => s > 90); // true
const allPassed = scores.every(s => s > 50); // false
Map CollectionWhile plain objects {} are great, a Map is a specialized collection for key-value pairs that offers better performance and flexibility.
Why use Map over Object?
.size.JavaScript
const userRoles = new Map();
const user1 = { name: "Alice" };
userRoles.set(user1, "Admin");
console.log(userRoles.get(user1)); // "Admin"
console.log(userRoles.size); // 1
Set CollectionA Set is a collection of unique values. No duplicates are allowed.
Use Case: Removing duplicates from an array.
JavaScript
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)]; // [1, 2, 3, 4, 5]
These are “weak” versions of Map and Set.
WeakMap, JS will delete that object from memory.Modern JS (ES2019+) introduced ways to handle nested arrays easily.
.flat(depth): Flattens nested arrays..flatMap(): Maps through an array and then flattens the result by one level.JavaScript
const nested = [1, [2, [3]]];
console.log(nested.flat(2)); // [1, 2, 3]
In real-world apps, you often chain these methods together to clean up raw data.
JavaScript
const inventory = [
{ item: "Laptop", price: 1000, stock: 5 },
{ item: "Mouse", price: 50, stock: 0 },
{ item: "Monitor", price: 300, stock: 10 }
];
// 1. Filter out out-of-stock items
// 2. Extract total value (price * stock)
// 3. Sum everything up
const totalInventoryValue = inventory
.filter(p => p.stock > 0)
.map(p => p.price * p.stock)
.reduce((acc, val) => acc + val, 0);
console.log(totalInventoryValue); // 8000
Arrays and collections are core data structures used to:
Difference:
| Feature | Static Array | Dynamic Array |
|---|---|---|
| Size | Fixed | Resizable |
| Performance | Faster | Slight overhead |
| Examples | C arrays | ArrayList, JS Array |
Use cases:
| Interface | Purpose |
|---|---|
| List | Ordered collection |
| Set | Unique elements |
| Queue | FIFO / priority |
| Map | Key-value pairs |
| Structure | Access | Insert | Search |
|---|---|---|---|
| Array | O(1) | O(n) | O(n) |
| HashMap | O(1) | O(1) | O(1) |
| TreeMap | O(log n) | O(log n) | O(log n) |