map()Definition: Creates a new array by applying a function to each element of the original array.
When to use: When you want to transform each item in an array into something else without modifying the original array.
Parameters:
callback(currentValue, index, array): A function that is called for each element.currentValue: The current element being processed.index: (Optional) The index of the current element.array: (Optional) The original array.
const numbers = [1, 2, 3, 4];
const doubled = numbers.map((num, idx) => {
console.log(`Index: ${idx}, Original: ${num}`);
return num * 2;
});
console.log(doubled); // [2, 4, 6, 8]
Explanation: The map method calls the function on each element, doubling it here. The original numbers array remains unchanged.
filter()Definition: Creates a new array containing only elements that satisfy a condition.
When to use: When you want to keep only certain elements based on a test.
Parameters:
callback(element, index, array): Function returning true or false.element: The current element.index and array: Optional.
const ages = [12, 18, 25, 15, 30];
const adults = ages.filter(age => age >= 18);
console.log(adults); // [18, 25, 30]
Explanation: Only ages 18 or above are kept. Others are filtered out.
reduce()Definition: Applies a function against an accumulator and each element to reduce the array to a single value.
When to use: When you want to compute a single result from an array (sum, product, flatten, etc.).
Parameters:
callback(accumulator, currentValue, index, array): Function called on each element.accumulator: Accumulates the callback's return values.currentValue: The current element.index and array: Optional.initialValue: Optional, initial value for the accumulator.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
console.log(`acc: ${acc}, curr: ${curr}`);
return acc + curr;
}, 0);
console.log(sum); // 10
Explanation: Starts from 0, adds each number to accumulator to get sum.
find()Definition: Returns the first element that satisfies the testing function.
When to use: When you want to find one item matching criteria.
Parameters:
callback(element, index, array): Function returning true or false.
const users = [
{ id: 1, name: "John" },
{ id: 2, name: "Jane" },
{ id: 3, name: "Mark" }
];
const user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: "Jane" }
Explanation: Returns first object where id is 2.
some() & every()Definition:
some() — Returns true if any element satisfies the test.every() — Returns true if all elements satisfy the test.When to use: To check conditions on elements collectively.
const nums = [10, 20, 30];
// some: is there any number > 25?
console.log(nums.some(n => n > 25)); // true
// every: are all numbers > 5?
console.log(nums.every(n => n > 5)); // true
flatMap()Definition: Maps each element then flattens the result by one level.
When to use: When mapping returns arrays and you want a single flattened array.
const sentences = ["Hello world", "How are you?"];
const words = sentences.flatMap(sentence => sentence.split(" "));
console.log(words);
// ["Hello", "world", "How", "are", "you?"]
forEach()Definition: Executes a provided function once for each array element.
Note: Unlike map, it does not return a new array.
When to use: When you want to perform side effects like logging or modifying external variables.
const nums = [1, 2, 3];
nums.forEach((num, idx) => {
console.log(`Index ${idx}: ${num}`);
});
Most array methods accept a callback function with up to three parameters:
currentValue — The element currently being processed.index — The index of the current element.array — The original array being traversed.Use parameters as needed; often only currentValue is necessary.
map() — Transform elements, returns new array.filter() — Select elements by condition.reduce() — Aggregate array to single value.find() — Find first element matching condition.some() / every() — Test if any or all elements pass condition.flatMap() — Map and flatten arrays.forEach() — Loop through array for side-effects.