#12 JavaScript Code Snippets: Array Methods (map, filter, reduce, find, some, every, flat, sort, splice, slice)

const result = [1, 2, 3].map(num => num * 2);

console.log(result);

map() returns a new array with transformed values.

const result = ["a", "b", "c"]
    .map((value, index) => index);

console.log(result);

The second parameter of map() is the current index.

const result = [1, 2]
    .map(id => ({ id }));

console.log(result);

Parentheses are used to return object literals directly.

const result = [1, 2, 3, 4]
    .map(num => num % 2 === 0 ? "Even" : "Odd");

console.log(result);

map() can transform values using conditional expressions.

const result = [1, 2, 3]
    .map(num => {
        num * 2;
    });

console.log(result);

Curly braces require an explicit return statement.

const result = [1, 2, 3]
    .map(num => num + 1)
    .map(num => num * 2);

console.log(result);

The result of one map() becomes input for the next map().

const result = ["1", "2", "3"]
    .map(parseInt);

console.log(result);

map passes (value,index). parseInt treats index as radix. parseInt("2",1) and parseInt("3",2) produce NaN.

const result = [1, 2]
    .map(num => [num, num * 2]);

console.log(result);

map() returns exactly what the callback returns.

const result = [1, 2, 3, 4]
    .filter(num => num % 2 === 0);

console.log(result);

filter() keeps elements whose callback returns true.

const users = [
    { age: 18 },
    { age: 25 },
    { age: 30 }
];

const result = users.filter(user => user.age >= 21);

console.log(result.length);

Only age 25 and 30 satisfy the condition.

const result = [10, 20, 30, 40]
    .filter((value, index) => index % 2 === 0);

console.log(result);

Indexes 0 and 2 are retained.

const result = [0, 1, "", "JS", false]
    .filter(Boolean);

console.log(result);

Boolean removes falsy values.

const result = [1,2,3,4]
    .filter(num => num % 2 === 0)
    .map(num => num * 10);

console.log(result);

filter runs first, then map transforms the remaining values.

const result = [5, 10, 15]
    .find(num => num > 8);

console.log(result);

find() returns the first matching element.

const users = [
    { id: 1 },
    { id: 2 },
    { id: 3 }
];

const result = users.find(user => user.id === 2);

console.log(result.id);

find() returns the matching object itself.

const result = [1, 2, 3, 4]
    .reduce((sum, num) => sum + num, 0);

console.log(result);

reduce() accumulates values into a single result.

const result = [2, 3, 4]
    .reduce((acc, num) => acc * num, 1);

console.log(result);

2 × 3 × 4 = 24.

const result = [1, 2, 3]
    .reduce((acc, num) => acc + num);

console.log(result);

Without an initial value, the first element becomes the accumulator.

const users = [
    { age: 20 },
    { age: 30 },
    { age: 40 }
];

const result = users.reduce(
    (sum, user) => sum + user.age,
    0
);

console.log(result);

The ages are added together.

const fruits = ["apple", "banana", "apple"];

const result = fruits.reduce((acc, fruit) => {
    acc[fruit] = (acc[fruit] || 0) + 1;

    return acc;
}, {});

console.log(result.apple);

reduce() is commonly used for counting occurrences.

const numbers = [1, 2, 3];

const result = numbers.reduce((acc, num) => {
    acc.push(num * 2);

    return acc;
}, []);

console.log(result);

reduce() can build arrays as well.

const result = [1, 2, 3]
    .some(num => num > 2);

console.log(result);

some() returns true if at least one element matches.

const users = [
    { active: false },
    { active: true }
];

const result = users.some(
    user => user.active
);

console.log(result);

One object satisfies the condition.

const result = [10, 20, 30]
    .some(num => num === 20);

console.log(result);

some() stops once a match is found.

const result = [2, 4, 6]
    .every(num => num % 2 === 0);

console.log(result);

All elements satisfy the condition.

const result = [2, 4, 5]
    .every(num => num % 2 === 0);

console.log(result);

The value 5 fails the condition.

const users = [
    { age: 18 },
    { age: 21 },
    { age: 25 }
];

const result = users.every(
    user => user.age >= 18
);

console.log(result);

Every user satisfies the age requirement.

const result = [5, 10, 15]
    .findIndex(num => num > 8);

console.log(result);

10 is the first matching value and its index is 1.

const users = [
    { id: 1 },
    { id: 2 },
    { id: 3 }
];

const result = users.findIndex(
    user => user.id === 3
);

console.log(result);

The object with id 3 is at index 2.

const result = [1, 2, 3]
    .findIndex(num => num > 10);

console.log(result);

findIndex() returns -1 when no match exists.

const arr = [10, 20, 30, 40];

const result = arr.slice(1, 3);

console.log(result);

slice(start, end) excludes the end index.

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

const result = arr.slice(-2);

console.log(result);

Negative indexes count from the end of the array.

const arr = [1, 2, 3];

const copy = arr.slice();

copy.push(4);

console.log(arr.length);

slice() creates a shallow copy.

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

arr.splice(1, 2);

console.log(arr);

splice() modifies the original array.

const arr = [1, 4];

arr.splice(1, 0, 2, 3);

console.log(arr);

A delete count of 0 inserts elements without removing any.

const arr = [1, 2, 5];

arr.splice(2, 1, 3, 4);

console.log(arr);

splice() can replace elements while inserting new ones.

const arr = [10, 2, 5];

arr.sort();

console.log(arr);

Default sort converts values to strings and sorts lexicographically.

const arr = [10, 2, 5];

arr.sort((a, b) => a - b);

console.log(arr);

The compare function performs numeric sorting.

const users = [
    { age: 30 },
    { age: 20 },
    { age: 25 }
];

users.sort((a, b) => a.age - b.age);

console.log(users[0].age);

The youngest user becomes the first element.

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

const result = arr.flat();

console.log(result);

flat() defaults to depth 1.

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

const result = arr.flat(2);

console.log(result);

Only two nesting levels are flattened.

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

const result = arr.flat(Infinity);

console.log(result);

Infinity flattens every nested level.

const result = []
    .every(() => false);

console.log(result);

every() returns true for an empty array because no element violates the condition.

const result = []
    .some(() => true);

console.log(result);

some() returns false because no element satisfies the condition.

const result = [1, 2, 3, 4]
    .filter(num => num % 2 === 0)
    .map(num => num * 10)
    .reduce((sum, num) => sum + num, 0);

console.log(result);

[2,4] → [20,40] → 60.