6 Must Know JavaScript Array Methods
1. Filter The filter method creates a new array containing only the elements that pass a specified condition. If the condition is true, the element stays in the array; otherwise, it is removed. How It Works: The method checks each element in the array. If the callback function returns true, the element is included in the new array. If it returns false, the element is excluded. let boxers = [ { name: "Tyson Fury", weight: 280 }, { name: "Mairis Briedis", weight: 199 }, { name: "Artur Beterbiev", weight: 175 }, { name: "Jermall Charlo", weight: 160 }, { name: "Terence Crawford", weight: 146 } ]; // Remove boxers with weight under 170 boxers = boxers.filter(function (boxer) { return boxer.weight > 170; }); // Using arrow function for brevity boxers = boxers.filter(boxer => boxer.weight > 170); console.log(boxers); Output: [ { name: "Tyson Fury", weight: 280 }, { name: "Mairis Briedis", weight: 199 }, { name: "Artur Beterbiev", weight: 175 } ] 2. Map The map method creates a new array by applying a specified transformation to each element of the original array. Each element in the new array is replaced by the return value of the callback function. How It Works: The method iterates through each element in the array. It applies the transformation logic defined in the callback function. The result of the callback function replaces the original element in the new array. Example: let decimalNumbers = [222, 354, 4684, 123, 5]; // Convert decimal numbers to hexadecimal let hexNumbers = decimalNumbers.map(function (num) { return num.toString(16); }); // Using arrow function for brevity hexNumbers = decimalNumbers.map(num => num.toString(16)); console.log(hexNumbers); 3. Reduce The reduce method is used to reduce an array to a single value by applying a callback function to each element and accumulating the result. How It Works: The method iterates over the array. It applies the callback function to an accumulator and the current element. The result of the callback becomes the new accumulator value. The final accumulator value is returned. Example: let numbers = [1, 2, 3, 4, 5]; // Find the sum of all numbers let sum = numbers.reduce(function (accumulator, current) { return accumulator + current; }, 0); // 0 is the initial value of the accumulator // Using an arrow function for brevity sum = numbers.reduce((accumulator, current) => accumulator + current, 0); console.log(sum); // Output: 15 4. Some The some method checks if at least one element in the array passes a specified condition. It returns true if any element satisfies the condition and false otherwise. How It Works: The method iterates through the array. It stops and returns true as soon as it finds an element that passes the condition. If no element passes, it returns false. let ages = [16, 20, 14, 18]; // Check if there is at least one adult (age ≥ 18) let hasAdult = ages.some(function (age) { return age >= 18; }); // Using an arrow function for brevity hasAdult = ages.some(age => age >= 18); console.log(hasAdult); // Output: true `5. Every The every method checks if all elements in the array pass a specified condition. It returns true only if all elements satisfy the condition; otherwise, it returns false. How It Works: The method iterates through the array. If it finds an element that fails the condition, it stops and returns false. If all elements pass, it returns true. let scores = [80, 85, 90, 95]; ` // Check if all scores are above 75 let allAbove75 = scores.every(function (score) { return score > 75; }); // Using an arrow function for brevity allAbove75 = scores.every(score => score > 75); console.log(allAbove75); // Output: true ` 6. Includes The includes method checks if an array contains a specific value. It returns true if the value exists in the array and false otherwise. How It Works: The method checks for the value in the array. It uses strict equality (===) for comparison. It can also check for specific values starting from a given index. Example: ` let numbers = [1, 2, 3, 4, 5]; // Check for "3" starting from index 2 let includesThree = numbers.includes(3, 2); console.log(includesThree); // Output: true `
1. Filter
The filter method creates a new array containing only the elements that pass a specified condition. If the condition is true, the element stays in the array; otherwise, it is removed.
How It Works:
- The method checks each element in the array.
- If the callback function returns true, the element is included in the new array.
- If it returns false, the element is excluded.
let boxers = [
{ name: "Tyson Fury", weight: 280 },
{ name: "Mairis Briedis", weight: 199 },
{ name: "Artur Beterbiev", weight: 175 },
{ name: "Jermall Charlo", weight: 160 },
{ name: "Terence Crawford", weight: 146 }
];
// Remove boxers with weight under 170
boxers = boxers.filter(function (boxer) {
return boxer.weight > 170;
});
// Using arrow function for brevity
boxers = boxers.filter(boxer => boxer.weight > 170);
console.log(boxers);
Output:
[
{ name: "Tyson Fury", weight: 280 },
{ name: "Mairis Briedis", weight: 199 },
{ name: "Artur Beterbiev", weight: 175 }
]
2. Map
The map method creates a new array by applying a specified transformation to each element of the original array. Each element in the new array is replaced by the return value of the callback function.
How It Works:
- The method iterates through each element in the array.
- It applies the transformation logic defined in the callback function.
- The result of the callback function replaces the original element in the new array.
Example:
let decimalNumbers = [222, 354, 4684, 123, 5];
// Convert decimal numbers to hexadecimal
let hexNumbers = decimalNumbers.map(function (num) {
return num.toString(16);
});
// Using arrow function for brevity
hexNumbers = decimalNumbers.map(num => num.toString(16));
console.log(hexNumbers);
3. Reduce
The reduce method is used to reduce an array to a single value by applying a callback function to each element and accumulating the result.
How It Works:
- The method iterates over the array.
- It applies the callback function to an accumulator and the current element.
- The result of the callback becomes the new accumulator value.
- The final accumulator value is returned. Example:
let numbers = [1, 2, 3, 4, 5];
// Find the sum of all numbers
let sum = numbers.reduce(function (accumulator, current) {
return accumulator + current;
}, 0); // 0 is the initial value of the accumulator
// Using an arrow function for brevity
sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // Output: 15
4. Some
The some method checks if at least one element in the array passes a specified condition. It returns true if any element satisfies the condition and false otherwise.
How It Works:
- The method iterates through the array.
- It stops and returns true as soon as it finds an element that passes the condition.
- If no element passes, it returns false. let ages = [16, 20, 14, 18];
// Check if there is at least one adult (age ≥ 18)
let hasAdult = ages.some(function (age) {
return age >= 18;
});
// Using an arrow function for brevity
hasAdult = ages.some(age => age >= 18);
console.log(hasAdult); // Output: true
`5. Every
The every method checks if all elements in the array pass a specified condition. It returns true only if all elements satisfy the condition; otherwise, it returns false.
How It Works:
- The method iterates through the array.
- If it finds an element that fails the condition, it stops and returns false.
- If all elements pass, it returns true. let scores = [80, 85, 90, 95];
`
// Check if all scores are above 75
let allAbove75 = scores.every(function (score) {
return score > 75;
});
// Using an arrow function for brevity
allAbove75 = scores.every(score => score > 75);
console.log(allAbove75); // Output: true
`
6. Includes
The includes method checks if an array contains a specific value. It returns true if the value exists in the array and false otherwise.
How It Works:
- The method checks for the value in the array.
- It uses strict equality (===) for comparison.
- It can also check for specific values starting from a given index. Example:
`
let numbers = [1, 2, 3, 4, 5];
// Check for "3" starting from index 2
let includesThree = numbers.includes(3, 2);
console.log(includesThree); // Output: true
`
What's Your Reaction?
