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;
});