Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Instead of writing for loops, use these built-in methods to transform, filter, and process arrays in a cleaner, more readable way!
map, flatMap
filter, find, some, every
reduce, reduceRight
findLast, toReversed, with
Takes each element, applies a function, returns a new array with the results. Original array stays unchanged!
[1, 2, 3].map(x => x * 2)
// Returns: [2, 4, 6]
// Old way (manual loop):
const result = [];
for (let i = 0; i < arr.length; i++) {
result.push(arr[i] * 2);
}Transforming array data
Tests each element with a function. If the function returns true, keep it. If false, remove it!
[1, 2, 3, 4, 5].filter(x => x > 3) // Returns: [4, 5] // Keeps only elements where condition is true
Selecting specific items from arrays
Processes array from left to right, accumulating a result. Most powerful but trickiest method!
array.reduce((accumulator, currentValue) => {
return newAccumulatorValue;
}, initialValue)
// Example: Sum numbers
[1, 2, 3].reduce((sum, num) => sum + num, 0)
// Returns: 6Combining array values in different ways
Returns the first element that passes the test, or undefined
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' }
];
const user = users.find(u => u.id === 2);
console.log(user); // { id: 2, name: 'Bob' }Returns the index of first match, or -1
const numbers = [5, 12, 8, 130, 44]; const index = numbers.findIndex(n => n > 10); console.log(index); // 1 (position of 12)
Searching through user data
Returns true if at least one element passes
const numbers = [1, 2, 3, 4, 5]; const hasEven = numbers.some(n => n % 2 === 0); console.log(hasEven); // true
Returns true if all elements pass
const numbers = [2, 4, 6, 8]; const allEven = numbers.every(n => n % 2 === 0); console.log(allEven); // true
Testing array conditions
Like find() but starts from the end
const numbers = [1, 2, 3, 4, 5, 4, 3]; const last = numbers.findLast(n => n === 4); console.log(last); // 4 (the last 4)
Access elements with negative indexes (from end)
const arr = ['a', 'b', 'c', 'd']; console.log(arr.at(-1)); // 'd' (last item) console.log(arr.at(-2)); // 'c' (second to last)
Returns reversed copy without modifying original
const arr = [1, 2, 3]; const reversed = arr.toReversed(); console.log(reversed); // [3, 2, 1] console.log(arr); // [1, 2, 3] (unchanged)
Returns copy with one element changed
const arr = [1, 2, 3, 4]; const newArr = arr.with(2, 99); console.log(newArr); // [1, 2, 99, 4] console.log(arr); // [1, 2, 3, 4] (unchanged)
Using modern array methods
Use when you need to do something with each element but don't need a new array. Good for side effects like logging, updating DOM, etc.
for...of if you need that!Executing code for each element
Since most methods return arrays, you can chain them to create complex transformations in readable steps!
numbers .filter(n => n > 10) // Keep large numbers .map(n => n * 2) // Double them .reduce((a, b) => a + b, 0) // Sum them up
Combining methods for complex operations
for loops are faster. For normal use, array methods are clearer and the performance difference is negligible!