forEach, map, reduce

kiko·2022년 1월 3일

모던자바스크립트

목록 보기
3/10

Array.prototype.forEach

  • forEach 메소드는 자신의 내부에서 반복문을 실행한다.
  • 자신을 호출한 배열을 순회 하면서 (수행해야 할 처리를) 콜백 함수로 전달 받아 반복 호출한다. (forEach, map, reduce의 공통점)
  • 원본 배열 변경 x (forEach, map, reduce 공통점)
  • 반환값은 언제나 undefined
  • 배열의 모든 요소를 순회 하며 중간에 순회를 중단 할 수 없다. (break, continue x)
const numbers = [1,2,3];

const pows = [];

// numbers 배열 순회하며, 콜백 함수를 반복 호출
numbers.forEach(item => pows.push(item)); //numbers 요소 3개 순회, 콜백 함수 3번 호출

Array.prototype.map

  • forEach와 다른 점은 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. (원본 배열 변경 x)
  • map 메소드를 호출한 배열과 map 메소드가 생성하여 반환한 배열은 1:1 매핑한다.

Array.prototype.reduce

  • 자신을 호출한 배열의 모든 요소를 누적한 결과를 반환한다.
  • 콜백 함수의 “반환값”을 다음 순회 시에 콜백 함수의 “첫번째 인수로 전달 받은 콜백 함수”를 호출하여 하나의 결과값을 만들어 반환한다.
  • 첫번째 인수로 콜백 함수, 두번째 인수로 초기값을 전달 받는다.
const sum = [1,2,3,4].reduce((accumulator, currentValue, index, array) => {
  return accumlator + currentValue
}, 0);

그 외 용어

콜백 함수 : 나중에 호출되는 함수.

  1. 다른 함수의 인자로써 이용되는 함수. (함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수.)

  2. 어떤 이벤트에 의해 호출되어지는 함수.

function repeat(n, f) {
  for (var i = 0; i < n; i++) {
    for(i);
  }
}

var logAll = function (i) { console.log(i) }

// 반복 호출할 함수를 인수로 전달
repeat(5, logAll); // 0 1 2 3 4 

// logAll 함수는 콜백 함수이다.

Reference

https://satisfactoryplace.tistory.com/18

profile
무를 심자.

0개의 댓글