[javascript] Array map, filter, reduce 사용법

1.map

각 요소에 대해 주어진 함수를 수행하는 결과를 모아 새로운 배열을 반환한다.

ex) let newArray = testArray.map((value, index, array) => {

           // value : 현재 요소의 값, index : 현재 요소의 인덱스, array : 원본 배열
            return value * 2;
       });

 

2.filter

각 요소에 대해 주어진 함수의 결과값이 true인 결과를 모아 새로운 배열을 반환한다.

ex) let newArray = testArray.filter((value, index, array) => {

           // value : 현재 요소의 값, index : 현재 요소의 인덱스, array : 원본 배열
            return value * 2 > 0 //boolean 값 이어야 한다.
       });

 

map과는 다르게 return 값이 boolean 이고, true인 결과를 모아 새로운 배열을 반환하는데, 메서드 이름 그대로 , 어떤 배열을 조건에 맞게 필터링할 때 (ex validation을 체크해서 새로운 배열을 만들 때) 사용하기 쉽다. 

 

3.reduce

배열 각 요소에 대해 reducer함수를 실행하고 배열이 아닌 하나의 결과값을 반환한다.

ex) const numberList = [1, 2, 3, 4];
 const sum = numberList.reduce((acc, value) => { 

        //acc : 축적된 데이터 value : 현재 요소의 값
        return acc + cur; 
    }, 10 // 초기 값);

예를들어 위와 같이 사용하였을 때는 10 + 1 + 2 + 3+ 4 의 계산결과인 20이 sum에 할당 되게 된다.

초기값에 빈 배열을 할당하고 value를 그 배열에 push 하는 형태로 사용하면 새로운 배열을 만들어 낼 수 있다는 점에서 filter와 map을 다 아우를 수 있는 메서드이다. 다양한 방면에 적용이 가능하고 퍼포먼스 적인 측면에서도 가장 낫기 때문에 가장 많이 쓰인다.