filter()
filter checks each element and returns a new array containing only the elements that satisfy the provided condition.
The callback function receives the current element's value.
const numbers = [10, 25, 40, 55];
const filtered = numbers.filter(function(val) {
return val < 30;
});
console.log(filtered); // [10, 25]
map()
map transforms every element in an array and returns a new array of the same length.
The callback receives the element value.
const nums = [2, 4, 6, 8];
const doubled = nums.map(function(value) {
return value * 5;
});
console.log(doubled); // [10, 20, 30, 40]
forEach()
forEach executes a provided function once for each array element. It does not return a new array (the return value is always undefined).
The callback receives the element and its index.
const items = [5, 10, 15, 20];
items.forEach(function(el, idx) {
console.log(idx + ' - ' + el * 10);
});
// 0 - 50
// 1 - 100
// 2 - 150
// 3 - 200
reduce()
reduce processes each element sequentially, accumulating them into a single value.
**It is recommended to always provide an initial value:**
1. When the array is empty, reduce requires an initial value.
2. If the array contains objects, without an initial value the first element is used as the previous value, which can lead to unexpected results.
The method accepts two arguments: a reducer function and an optional initial value.
The reducer receives two parameters: (previousReturnedValue, currentValue).
reduce(function(prev, curr) { ... }, initialValue);
Without an initial value:
The first call uses the first two elements as prev and curr.
Subsequent calls use the return value as prev and the next element as curr.
const data = [3, 6, 9, 12, 15];
const sum = data.reduce(function(prev, curr) {
return prev + curr;
});
console.log(sum);
// Step: 3 + 6 = 9
// 9 + 9 = 18
// 18 + 12 = 30
// 30 + 15 = 45
// Result: 45
With an initial value:
The first call uses the initial value and the first element.
Subsequent calls behave the same way.
const data2 = [3, 6, 9, 12, 15];
const total = data2.reduce(function(prev, curr) {
return prev + curr;
}, 5);
console.log(total);
// Step: 5 + 3 = 8
// 8 + 6 = 14
// 14 + 9 = 23
// 23 + 12 = 35
// 35 + 15 = 50
// Result: 50
find()
find returns the first element that satisfies the provided testing function. If no element matches, undefined is returned.
const values = [100, 200, 300, 400];
const found = values.find(function(n) {
return n === 300;
});
console.log(found); // 300
every()
every tests whether all elements in the array pass the provided function. It returns a Boolean value.
If any element fails, the method returns false immediately and stops checking the remaining elements.
It does not execute on empty arrays and does not mutate the original array.
const scores = [20, 35, 50, 65];
const allAbove30 = scores.every(function(n) {
return n > 30;
});
console.log(allAbove30); // false (20 is not > 30)
some()
some tests whether at least one element passes the provided function. It returns a Boolean value.
If no element satisfies the condition, it returns false.
const entries = [11, 22, 33, 44, 55];
const hasTarget = entries.some(function(item) {
return item === 33;
});
console.log(hasTarget); // true
findIndex()
findIndex returns the index of the first element that satisfies the testing function. If no element matches, it returns -1.
const colors = ["Red", "Green", "Blue", "Yellow"];
const idx = colors.findIndex(function(item) {
return item === "Yellow";
});
console.log(idx); // 3
// Example with no match
const notFound = colors.findIndex(function(item) {
return item === "Purple";
});
console.log(notFound); // -1