forEach, map, filter, reduce 메서드 작동원리

forEach

function forEach(predicate, thisArg) { // 임의로 작성된 forEach 작동원리
  for (let i = 0; i < a.length; i++) {
    predicate(a[i], i);
  }
}

a = [10, 11, 12, 13, 14, 15];

a.forEach(
  function (v, i) {
    console.log(v, i, this);
  },
  [1, 2]
);

출력 및 결론

 

 

forEach는  for 문 대신 사용하는 정도이다.

---

map

function map(predicate, thisArg) { //임의로 작성된 map 작동 원리
  let list = [];
  for (let i = 0; i < a.length; i++) {
    list.push(predicate(a[i], i));
  }
  return list;
}

a = [10, 11, 12, 13, 14, 15];

let answer = a.map(
  function (v, i) {
    if (v % 2 === 0) return v;
  },
  [1, 2]
);
console.log(answer);

 

출력 및 결론

 map은 원본 배열을 이용하여 새로운 배열을 생성하는 것이 용도인데 꼭 원본과 같은 길이의 배열을 생성한다.

 

---

filter

function filter(predicate, thisArg) { // 임의로 작성된 filter 작동 원리
  let list = [];
  for (let i = 0; i < a.length; i++) {
    if (predicate(a[i], i)) {
      list.push(a[i]);
    }
  }
  return list;
}

a = [10, 11, 12, 13, 14, 15];

let answer = a.filter(
  function (v, i) {
    return v % 2 === 1;
  },
  [1, 2]
);
console.log(answer);

출력 및 결론

filter는 원본 배열의 원소를 통해서 새로운 배열의 원소를 추출하되 길이는 다를 수 있다.

---

reduce

function reduce(predicate, val) { //임의로 작성된 reduce 작동 원리
  let result = val;
  for (let i = 0; i < a.length; i++) {
    result = predicate(result, a[i]);
  }
  return result;
}

a = [1, 2, 3, 4, 5];

let answer = a.reduce(function (acc, v) {
  return acc + v;
}, 0);

console.log(answer);

출력 및 결론

reduce는 배열의 원소들로 함수를 작동시키며  값을 계속 누적하는 기능을 한다.

 

---

비교 및 결론

forEach는  for 문 대신 사용하는 정도이다.

 

map은 원본 배열을 이용하여 새로운 배열을 생성하는 것이 용도인데 꼭 원본과 같은 길이의 배열을 생성한다.

 

filter는 원본 배열의 원소를 통해서 새로운 배열의 원소를 추출하되 길이는 다를 수 있다.

 

reduce는 배열의 원소들로 함수를 작동시키며  값을 계속 누적하는 기능을 한다.