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

forEach, map, filter, reduce 는 모두 함수를 인자로 받는 고차함수이다. 

 

forEach

 

인자로 함수, 배열이 들어간다. (배열은 생략가능하다!)

배열안의 값, 인덱스 넘버, 배열이 차례대로 출력된다. (찍으면)

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

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

// 출력값
10 0 [ 1, 2 ]
11 1 [ 1, 2 ]
12 2 [ 1, 2 ]
13 3 [ 1, 2 ]
14 4 [ 1, 2 ]
15 5 [ 1, 2 ]

---

map

새로운 배열이 나온다. 

 

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

let answer = a.map((v,i) => {
  return v * v;
},[1,2])

console.log(answer)

// 출력값
[ 100, 121, 144, 169, 196, 225 ]

 

map 이 생성하는 새로운 배열은 원본 배열의 길이와 무조건 같다!!

 

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

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

console.log(answer)

//출력값
[ 10, undefined, 12, undefined, 14, undefined ]

 

---

filter

새로운 배열이 나온다. 

정확하게 원하는 원소로만 이루어진 배열이 나온다. 

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

let answer = a.filter((v,i) => {
  if(v % 2 === 0) return v
},[1,2])

console.log(answer)

//출력값
[ 10, 12, 14 ]

 

---

reduce

인자로 콜백함수와 초기화 하는 값이 들어간다. 

   

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

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

console.log(answer)

// 출력값
75

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓