Array methods

Array methods

• .map(fn) makes a new array by transforming each item.
• .filter(fn) makes a new array of only the items where fn returns true.
• .forEach(fn) runs fn for each item, making no new array.

let nums = [1, 2, 3];
let doubled = nums.map((n) => n * 2);
console.log(doubled);   // → [2,4,6]

Filtering keeps some items

• .filter keeps each item for which the test returns true.

let nums = [3, 7, 2, 9];
let big = nums.filter((n) => n > 4);
console.log(big);   // → [7,9]

Watch out

• .map and .filter create a new outer array. They do not themselves rewrite the input, but a callback can mutate it. An object included in the result can still be the same object as in the input.
• You hand each one an arrow function that says what to do with one item.

Common mistakes

• A new array does not imply new objects inside it. filter keeps the original object references; map(row => row) does too. To change flat object values independently, return a new object from the callback.
• forEach calls the callback for each present element and returns undefined; returning a value inside the callback does not create a result array.

Trace the shared objects

const rows = [{name: "Li", score: 4}];
const selected = rows.filter(row => row.score > 0);
selected[0].score = 9;
console.log(rows[0].score);       // 9: the same object
console.log(selected === rows);  // false: different outer arrays
const copies = rows.map(row => ({name: row.name, score: row.score + 1}));
copies[0].score = 20;
console.log(rows[0].score);       // still 9: a different flat object

• row.score += amount; return row; changes the input object, even inside map. Returning {name: row.name, score: row.score + amount} creates a separate flat object. Nested objects would still need their own copying strategy.

Now you try

• Use .map, .filter or .forEach.
• Press Check answer to test it.