ECMAScript 6 (ES6), introduced in 2015, brought powerful updates to JavaScript — and one of the most useful upgrades was new array methods. These methods make it easier to work with arrays in a more readable and functional way.
Below are the most commonly used ES6 array methods, explained with simple examples:
1. forEach()
The forEach() method runs a function for each element in the array.
const fruits = ["apple", "banana", "mango"];
fruits.forEach((fruit) => {
console.log(fruit);
});
Use case: When you want to perform an action for every element, like displaying them.
2. map()
The map() method creates a new array by applying a function to each element.
const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6]
Use case: When you want to transform the elements.
3. filter()
The filter() method creates a new array with only the elements that pass a condition.
const ages = [12, 18, 21, 30];
const adults = ages.filter((age) => age >= 18);
console.log(adults); // [18, 21, 30]
Use case: To get a subset of the array based on some condition.
4. find()
The find() method returns the first element that matches a condition.
const numbers = [3, 6, 8, 10];
const found = numbers.find((num) => num > 5);
console.log(found); // 6
Use case: When you want just one match, not all.
5. findIndex()
Returns the index of the first element that satisfies a condition.
const colors = ["red", "blue", "green"];
const index = colors.findIndex((color) => color === "blue");
console.log(index); // 1
Use case: When you need to know the position of an element.
6. some()
Checks if at least one element passes a condition.
const scores = [40, 55, 70];
const hasPassed = scores.some((score) => score >= 50);
console.log(hasPassed); // true
Use case: Check if any item meets the criteria.
7. every()
Checks if all elements meet a condition.
const scores = [55, 60, 70];
const allPassed = scores.every((score) => score >= 50);
console.log(allPassed); // true
Use case: Validate if all items match a rule.
8. reduce()
Reduces the array to a single value by performing a function on each element.
const prices = [100, 200, 300];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 600
Use case: Calculate totals, like sums or averages.
9. includes()
Checks if an array contains a certain value.
const pets = ["dog", "cat", "rabbit"];
console.log(pets.includes("cat")); // true
Use case: Quick existence check.
10. flat()
Flattens nested arrays into a single-level array.
const arr = [1, 2, [3, 4, [5]]];
console.log(arr.flat(2)); // [1, 2, 3, 4, 5]
Use case: When you want to merge nested arrays.
11. from()
Creates a new array from a string or iterable object.
const str = "hello";
const chars = Array.from(str);
console.log(chars); // ['h', 'e', 'l', 'l', 'o']
Use case: Convert strings or sets into arrays.
12. fill()
Fills all or part of an array with a value.
const arr = new Array(3).fill("hi");
console.log(arr); // ['hi', 'hi', 'hi']
Use case: Pre-fill arrays with default values.
13. sort()
Sorts the elements of an array.
const nums = [5, 3, 8];
nums.sort((a, b) => a - b);
console.log(nums); // [3, 5, 8]
Use case: For ordering numbers or strings.
14. reverse()
Reverses the order of elements in the array.
const arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]
Final Thoughts
These ES6 array methods make your code cleaner, shorter, and more powerful. Instead of writing long for loops, you can use these built-in methods to do things faster and in a more readable way.
Mastering these methods will help you become a modern JavaScript developer!