DEV Community

AZIZ NAJLAOUI
AZIZ NAJLAOUI

Posted on

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); 
Enter fullscreen mode Exit fullscreen mode

Output:

[ { name: "Tyson Fury", weight: 280 }, { name: "Mairis Briedis", weight: 199 }, { name: "Artur Beterbiev", weight: 175 } ] 
Enter fullscreen mode Exit fullscreen mode

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); 
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

`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

`

Top comments (0)