map, filter, reduce / 배열 순회 [자바스크립트 도장깨기]

목차

 

map

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

 

형식

array.map(callbackFunction(currenValue, index, array), thisArg)

// currentValue : 현재 값
// index : 현재 값의 인덱스
// array : map()을 호출한 원본 배열

 

예시

const num = [1, 2, 3, 4, 5];

//화살표 함수 사용 
const numMap = num.map(val => val += 2);
console.log(numMap);

// [3, 4, 5, 6, 7]

 

 

filter

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

map()과 달리 fillter는 boolean 타입으로만 반환한다.

- 중복제거에 유용하다.

 

형식

array.filter(function(e) { return 조건 })

예시

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

const arrFilter = arr.filter(a => (a == 3)); // arr안에서 3이 있는지 확인
console.log(arrFilter); 
// 3 출력

 

reduce

배열 각 요소에서 reduce 함수를 실행하여 하나의 결과값으로 반환한다.

reduce는 누산기인 prev와 현재 요소인 cur를 매개변수로 하여 모든 요소의 합을 반환한다.

 

형식

array.reduce((prev, cur) => prev + cur)

 

예시

// prev : 누산값 // cur : 현재값
let arr = [1, 2, 3, 4, 5]; 

const result = arr.reduce((prev, cur) => { 
  return prev + cur; // 지금까지 계산된값에 현재값을 더한다.
  }, 0) // 생략시 처음 배열 값이 들어감 

// prev : 0, cur : 1 1 
// prev : 1, cur : 2 3 
// prev : 2, cur : 3 6 
// prev : 6, cur : 4 10 
// prev : 10, cur : 5 15