TechStar Asia - Tech News for Builders and Operators

Array Iteration Methods in JavaScript
1. forEach()

let arr = [1, 2, 3];

arr.forEach(function(num) {
    console.log(num * 2);
});

Output:

2 4 6

Use when you just want to print / perform action

2. map()
Transforms array and returns new array

let arr = [1, 2, 3];

let result = arr.map(num => num * 2);

console.log(result); // [2, 4, 6]

✔ Use when you want to modify values

3. flatMap()

Combines map() + flat()

let arr = [1, 2, 3];

let result = arr.flatMap(num => [num, num * 2]);

console.log(result); // [1,2,2,4,3,6]

✔ Use when returning arrays inside map

4. filter()

Returns elements that match condition

let arr = [1, 2, 3, 4];

let result = arr.filter(num => num % 2 === 0);

console.log(result); // [2, 4]

✔ Use for selection

5. reduce()(To be discussed)
Reduces array to single value

let arr = [1, 2, 3, 4];

let sum = arr.reduce((acc, num) => acc + num, 0);

console.log(sum); // 10

✔ Use for sum, product, etc.

6. reduceRight()(To be discussed)
Same as reduce but from right → left

let arr = ["a", "b", "c"];

let result = arr.reduceRight((acc, val) => acc + val);

console.log(result); // "cba"

7. every()
Checks if ALL elements satisfy condition

let arr = [2, 4, 6];

let result = arr.every(num => num % 2 === 0);

console.log(result); // true

8. some()
Checks if ANY element satisfies condition

let arr = [1, 3, 4];

let result = arr.some(num => num % 2 === 0);

console.log(result); // true

9. Array.from()
Converts iterable → array

let str = "hello";

let arr = Array.from(str);

console.log(arr); // ["h","e","l","l","o"]

10. keys()(To be discussed)
Returns index iterator

let arr = ["a", "b"];

for (let key of arr.keys()) {
    console.log(key);
}

Output:

0 1

11. entries()
Returns index + value

let arr = ["a", "b"];

for (let [index, value] of arr.entries()) {
    console.log(index, value);
}

Output:

0 a
1 b

12. with()
Returns new array with replaced value

let arr = [1, 2, 3];

let newArr = arr.with(1, 100);

console.log(newArr); // [1,100,3]

✔ Does NOT modify original

13. Spread Operator(To be discussed)
Expands array

let arr1 = [1, 2];
let arr2 = [3, 4];

let result = [...arr1, ...arr2];

console.log(result); // [1,2,3,4]

✔ Used for copying, merging

14. Rest Operator ...(To be discussed)
Collects values into array

function sum(...nums) {
    return nums.reduce((a, b) => a + b);
}

console.log(sum(1, 2, 3)); // 6

Array Iteration Methods