[Vanilla JS] map, filter, reduce

0. map, filter, reduce

함수형 프로그래밍 언어인 java script에서 map, filter, reduce는 자주 사용되는 함수들이다. 

 

 

1. map

map은 배열로부터 특정 정보만을 추출하여 새로운 배열로 반환한다. 다음과 같은 배열이 있다고 하자.

   const people = [
        { name: "moz1e", age: "28" },
        { name: "moz2e", age: "26" },
        { name: "moz3e", age: "20" },
        { name: "moz4e", age: "18" },
        { name: "moz5e", age: "15" },
    ]

 

위 배열에서 각 사람들의 이름을 추출하려고 할 때 반복문을 활용하면 다음과 같이 표현할 수 있다.

    let names = []
    for (person of people) {
        names.push(person.name)
    }
    console.log(names)
    // ['moz1e', 'moz2e', 'moz3e', 'moz4e', 'moz5e']

 

이를 map을 사용하면 다음과 같다.

    console.log(people.map(p => p.name))
    // ['moz1e', 'moz2e', 'moz3e', 'moz4e', 'moz5e']
    
    console.log(people.map(p => {
        return p.name
    }))
    // ['moz1e', 'moz2e', 'moz3e', 'moz4e', 'moz5e']

 map은 매개 인자로, 기존 데이터로부터 어떤 정보를 추출할지 결정하는 함수가 있다.

함수의 인자는 배열의 순서에 맞춰 존재하는 "현재 값"이며, 새로운 배열 요소로 어떤 정보를 가져올지 적절하게 구현하면 된다.

 

 

2. filter

filter는 배열로부터 특정 조건을 만족하는 요소만을 추출하여 새로운 배열로 반환해준다. 위에 있는 배열 people로부터 10대 만을 추출한다고 했을 때 다음과 같이 표현할 수 있다.

    const teenager = (() => {
        let teen = []
        for (person of people) {
            if (person.age < 20) teen.push(person)
        }
        return teen
    })()
    console.log(...teenager)
    //{name: 'moz4e', age: '18'} {name: 'moz5e', age: '15'}

 

이를 filter를 사용하면 다음과 같다.

    console.log(...people.filter(p => p.age < 20))
    //{name: 'moz4e', age: '18'} {name: 'moz5e', age: '15'}

map과 마찬가지로 filter도 매개 인자로 함수를 받는다. 배열의 각 요소를 테스트하며 true 또는 false를 반환한다. true를 반환한 요소로만 이루어진 배열을 만들어 반환한다.

 

추가로 JS에서 true 혹은 false로 인식되는 요소는 다양하므로, 어떤 것들이 true 혹은 false인지 정확히 이해하고 사용할 필요가 있다.

 

map과 filter와 같이 새로운 배열을 반환하는 경우, 그 자체로도 배열이기 때문에 당연히 중첩해서 사용할 수 있다.

 

 

3. reduce

reduce는 값을 축약하는 함수이다. 즉 어떤 배열에 reduce를 사용했을 때 하나의 결괏값이 생성된다. 다음과 같은 배열이 있다고 하자.

	const numbers = [1, 2, 3, 4, 5]

 

배열의 총합을 구한다고 할 때 다음과 같이 표현할 수 있다.

    const numbers = [1, 2, 3, 4, 5]
    let total = 0
    for (num of numbers) {
        total += num
    }
    console.log(total)
    //15

 

이를 reduce를 다음과 같다.

    console.log(numbers.reduce((pre, cur) => pre + cur,0))
    console.log(numbers.reduce((pre, cur) => pre + cur))
    //15

reduce는 일종의 재귀 함수라고 생각하면 이해하기 쉽다. 첫 번째 매개 인자로 반복할 함수, 두 번째 매개 인자로 초기값을 받는다. 배열의 순서에 따라 초기값과 "현재 값"을 통해 반환된 값이 다음 초기값이 되어 반복한다.

 

reduce의 초기값은 생략 가능하며 이 경우 초기값은 자동으로 배열의 첫 번째 요소가 된다.

 

 

4. 그 외

map, filter, reduce 외에도 Array에는 유용한 함수들이 정말 많다.

 

또한 Lodash라고 하여 Object에서도 Array가 제공하는 함수와 비슷하게 사용할 수 있도록 제공해주는 라이브러리가 존재한다. Lodash에 대해서는 따로 포스팅을 할 예정이다.