JS, map & filter & reduce

[ map ]

호출 배열의 모든 요소에서 제공된 함수를 호출한 결과로 채워진 새 배열을 만듬

콜백함수를 이용해 각각의 요소를 호출해서 값을 변환. 즉 콜백함수가 배열의 각 요소에 실행됨

▶ map() 메소드 구문

arr.map(function(currentValue, index, arr), thisValue);

• currentValue : 배열 내 현재 값(요소 값)
• index : 배열 내 현재 값의 인덱스(인덱스)
• array : 현재 배열(순회하는 대상객체)
• thisValue: callbackFunction 내에서 this로 사용될 값

▶ map() 예시

예시1

function multip(numbers) {
  return numbers.map(function (x) {
    return x * 2;
  });
}

console.log(multip([1, 2, 3, 4, 5])); //[ 2, 4, 6, 8, 10 ]

여기서 첫번째 돌때

• currentValue : 1
• index : 0
• array : [1, 2, 3, 4, 5]
• thisArg : return x * 2

 

예시2

function multip(numbers) {
  return numbers.map(x => x * 2);
}

console.log(multip([1, 2, 3, 4, 5])); //[ 2, 4, 6, 8, 10 ]

 

예시3

function multip(numbers) {
  return numbers.map(function (x, i) {
    return x * i;
  });
}

console.log(multip([1, 2, 3, 4, 5])); //[ 0, 2, 6, 12, 20 ]

 

[ filter ]

어떤 테이터 집합에서 특정조건을 만족하는 값만 반환되어 얕은 복사본을 만듬

▶ filter() 메소드 구문

array.filter(function(currentValue, index, arr), thisValue)

• currentValue : 배열 내 현재 값(요소 값)
• index : 배열 내 현재 값의 인덱스(인덱스)
• array : 현재 배열(순회하는 대상객체)
• thisValue: callbackFunction 내에서 this로 사용될 값

▶ filter() 예시

예시1

function multip(numbers) {
  return numbers.filter(function (x) {
    return x % 2 === 0;
  });
}

console.log(multip([1, 2, 3, 4, 5])); //[ 2, 4 ]

• currentValue : 1
• index : 0
• array : [1, 2, 3, 4, 5]
• thisArg :x % 2 === 0

예시2

function multip(numbers) {
  return numbers.filter(x => x % 2 === 0);
}

console.log(multip([1, 2, 3, 4, 5])); //[ 2, 4 ]

 

[ reduce ]

배열의 각 요소에 대해 콜백함수를 순서대로 실행하고 이전 요소에 대한 계산의 반환값을 전달함

콜백이 처음 실행될 때 "이전 반환 값"이 없기 때문에 제공된 초기 값을 대신 사용할 수 있음

만약 초기값을 주지 않는 경우는 인덱스 0의 배열 요소가 초기값으로 사용되고 다음 요소인 인덱스1부터 반복이 시작됨

▶ reduce() 메소드 구문

arr.reduce(callback(accumulator, currentValue, currentIndex, arr), initialValue)

• accumulator: 콜백의 반환 값을 누적함
• currentValue: 배열 내 현재 값의 인덱스
• initialValue: 첫번째 호출에 전달될 값
  • 제공되지 않으면 첫번째 요소가 첫번재 호출에 콜백이 실행되지 않음
• currentIndex: 배열 내 현재 값의 인덱스
• arr: 현재 배열(순회하는 대상객체)

▶ reduce() 예시

예시1

function multip(numbers) {
  return numbers.reduce(function(acc, cur){
    return acc += cur
  });
}

console.log(multip([1, 2, 3, 4, 5])); //15

 

예시2

function multip(numbers) {
  return numbers.reduce((acc, cur) => acc += cur, 0);
}

console.log(multip([1, 2, 3, 4, 5])); //15