배열 map(), filter(), reduce()

map() 함수에 대해 알아보자.

• map은 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 아래는 기본 문법이다.

배열.map(callback(current value, index, array), this)

아래는 map함수를 이용하여 배열의 각 요소에 2를 더한 새로운 배열을 생성하는 예제이다.

let arr = [1,2,3,4,5];

let result = arr.map(x => x + 2);

console.log(result);
// [3,4,5,6,7]

정상적으로 2를 더한 값이 출력되는걸 확인할 수 있다.

map은 말 그대로 배열의 요소들을 매핑해 주는 거기 때문에 필터링은 할 수 없다. 즉 기본 배열의 값 자체를 다른 값으로 바꿀 수는 있지만 길이는 항상 동일하다.

---

filter() 함수에 대해 알아보자.

• filter는 배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소를 모아 새로운 배열을 반환한다. 아래는 기본 문법이다.

배열.filter(callback(element[, index[, array]])[, thisArg])

아래는 filter함수를 이용하여 배열의 요소중 3 이상의 숫자들만 출력하는 예제이다.

let arr = [1,2,3,4,5];

let result = arr.filter(x => x >= 3);

console.log(result); 
// [3,4,5]

정상적으로 3 이상의 값만 출력되는걸 확인할 수 있다.

filter는 배열의 값 자체를 바꿀수 없으며 조건에따라 return해주기 때문에 배열의 길이가 달라질 수 있다.

---

reduce() 함수에 대해 알아보자.

• reduce는 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환한다. 아래는 기본 문법이다.

배열.reduce(callback[, initialValue])

reduce 함수는 누적값이라는 것에 주의해야하며 누적값이기 때문에 다양하게 활용할 수 있다. 아래는 reduce 함수를 이용하여 배열의 수를 전부 더하는 예제이다.

let obj = [0,1,2,3,4,5];

let result = obj.reduce((acc, cur) => {return acc + cur}, 0)

console.log(result);
// 15

let result = obj.reduce((누적값, 현잿값) => { return 결과 }, 초깃값); 위에 예제는 이와 같은 형식이다.

0~5까지 누적해서 더해진 15가 출력된다. 만약 초기값을 적어주지 않으면 자동으로 초기값이 0번째 인덱스의 값이 된다.

---

요약

• map은 산술된 값을 리턴해서 배열에 추가
• filter는 논리연사자의 true값을 배열에 추가
• reduce는 그룹 지어진 데이터의 결과를 도출할때 사용