메서드를 상황에 맞게 잘 활용하는 것도 실력이다.
배열 메서드 map, filter, reduce를 어떻게 사용하는지 알아보자.

map 메서드

map() 메서드는 callback 함수로 각각의 요소를 한 번씩 순차적으로 순회하며 해당 함수의 반환값으로 새로운 배열을 만든다. 즉, 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환한다.

매개변수

callback: 새로운 배열 요소를 생성하는 함수

• currentValue: 처리할 현재 요소
• index(Optional): 처리할 현재 요소의 인덱스
• array(Optional): map()을 호출할 배열

반환값

• 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.

const arr = [3, 5, 8, 2, 1];

// 매개변수 x의 2배
function double(x) {
    return x * 2;
}
// 매개변수 x의 3배
function triple(x) {
    return x * 3;
}

const output1 = arr.map(double);
const output2 = arr.map(triple);
// .toString 문자열로 반환
const output3 = arr.map((x) => x.toString());

console.log(output1);
console.log(output2);
console.log(output3);

// Double - [6, 10, 16, 4, 2]
// Triple - [9, 15, 24, 6, 3]
// toString - ['3', '5', '8', '2', '1']

배열 안에 객체

let userList1 = [
    { id: 1, name: "JIEUN", age: 29 },
    { id: 2, name: "KONG", age: 9 },
    { id: 3, name: "DUBOO", age: 9 },
    { id: 4, name: "SOO", age: 37 },
    { id: 5, name: "JENNIE", age: 29 },
];

let newUserList1 = userList1.map((user, index) => {
    return Object.assign({}, user, {
        isAdult: user.age > 20,
    });
});

console.log(newUserList1);

filter

filter() 메서드는 배열의 각 요소에 대해 제공된 callback 함수를 한 번씩 호출하고, 참 값을 반환하는 배열의 요소만 필터링해서 새로운 배열을 만든다. callback 함수 테스트를 통과하지 못한 배열 요소는 새 배열에 포함되지 않는다. 즉, 조건에 만족하는 모든 요소를 배열로 반환한다.

const arr2 = [3, 4, 5, 6, 7, 8, 1, 2];

function isOdd(x) {
    return x % 2;
}

function isEven(x) {
    return x % 2 === 0;
}

const output4 = arr2.filter(isOdd);
const output5 = arr2.filter(isEven);
// greatherThan4
const output6 = arr2.filter((x) => x > 4);

console.log(output4); // 1, 3, 5, 7
console.log(output5); // 2, 4, 6, 8
console.log(output6); // 5, 6, 7, 8

reduce

reduce() 메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환한다. reducer 함수는 누산기(acc), 현재 값(cur), 현재 인덱스(idx), 원본 배열(src) 인자를 갖는다. reducer 함수의 반환값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다.

매개변수

callback

배열의 각 요소에 대해 실행할 함수. 네 가지 인수를 받는다.

• accumulator: 누산기는 콜백의 반환값을 누적한다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값이 된다.
• currentValue: 처리할 현재 요소
• currentIndex(Optional): 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작
• array(Optional): reduce()를 호출한 배열

반환 값

누적 계산의 결과 값, 마지막 콜백 호출의 반환 값을 사용

  arr.reduce(callback[, initialValue])

reduce() 작동 방식

[0, 1, 2, 3, 4].reduce(
  function (accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
  },
);

// 화살표 함수
[0, 1, 2, 3, 4].reduce((prev, curr) => prev + curr);

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];

const output = arr.reduce((acc, curr) => {
    acc = acc + curr;
    return acc;
}, 0)

console.log(output);  // 36

배열의 모든 수 합치기

forEach 사용

배열의 모든 요소를 접근하여, 반복

const arr1 = [1, 2, 3, 6, 9];

let result1 = 0;
arr1.forEach((num) => {
    result1 += num
});

console.log(result1);    // 21

for문 사용

배열의 모든 요소를 접근하여, 반복
인덱스로 접근해야 한다.

const arr1 = [1, 2, 3, 6, 9];

function findSum(arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum = sum + arr1[i];
    }
    return sum;
}

console.log(findSum(arr1)); // 21

reduce() 초깃값 설정

const arr1 = [1, 2, 3, 6, 9];

const result2 = arr1.reduce((acc, curr) => {
    acc = acc + curr;
    return acc;
}, 100)

console.log(result2);   // 121

배열 안에 객체

let userList = [
    { name: "JIEUN", age: 29 },
    { name: "KONG", age: 9 },
    { name: "DUBOO", age: 9 },
    { name: "SOO", age: 37 },
    { name: "JENNIE", age: 29 },
];

// 현재 요소의 age가 20 보다 크다면 현재 요소의 name을 acc에 push해서 값으로 반환
let result1 = userList.reduce((acc, curr) => {
    if (curr.age > 20) {
        acc.push(curr.name);
    }
    return acc;
}, []);

// 현재 요소의 length가 5면 현재 요소의 name을 acc에 push해서서 값으로 반환
let result2 = userList.reduce((acc, curr) => {
    if (curr.name.length === 5) {
        acc.push(curr.name);
    }
    return acc;
}, []);


console.log(result1);   // ['JIEUN', 'SOO', 'JENNIE']
console.log(result2);   // ['JIEUN', 'DUBOO']

응용하기

const users = [
    { firstName: "Lee", lastName: "Jieun", age: 29 },
    { firstName: "Joo", lastName: "KONG", age: 9 },
    { firstName: "Joo", lastName: "DUBOO", age: 9 },
    { firstName: "Kim", lastName: "Soo-Hyun", age: 37 },
    { firstName: "Lee", lastName: "Jennie", age: 29 },
];

const output1 = users.reduce((acc, curr) => {
    if (acc[curr.age]) {
        acc[curr.age] = ++acc[curr.age];
    } else {
        acc[curr.age] = 1;
    }
    return acc;
}, {});

console.log(output1); // {9: 2, 29: 2, 37: 1}

const users = [
    { firstName: "Lee", lastName: "Jieun", age: 29 },
    { firstName: "Joo", lastName: "KONG", age: 9 },
    { firstName: "Joo", lastName: "DUBOO", age: 9 },
    { firstName: "Kim", lastName: "Soo-Hyun", age: 37 },
    { firstName: "Lee", lastName: "Jennie", age: 29 },
];

const output1 = users.reduce((acc, curr) => {
    if (acc[curr.age]) {
        acc[curr.age] = ++acc[curr.age];
    } else {
        acc[curr.age] = 1;
    }
    return acc;
}, {});

// users에서 age가 10살 이하인 lastName 새로운 배열로 반환
const output2 =
    users.filter((x) => x.age < 10)
        .map((x) => x.lastName);

// users의 age 새로운 배열로 반환
const output3 = users.map((user) => user.age);

console.log(output1);   // {9: 2, 29: 2, 37: 1}
console.log(output2);   // ['KONG', 'DUBOO']
console.log(output3);   // [29, 9, 9, 37, 29]

참고

filter (MDN)
map (MDN)
reduce (MDN)