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

🔹 1.forEach

• 배열이라는 요소를 하나하나 탐색할때 기본적으로 for loop 를 사용하는데 forEach 를 사용해서 같은 동작의 반복문을 출력 할 수 있는것.

// forEach 작동 원리 함수
const forEach = (predicate, thisArg) => {
  for (let i = 0; i < a.length; i++) { // forEach 기본 원리는 for loop 가 돌면서 forEach 를 다시 콜백 해주는 것임
    predicate(a[i], i) // 이런식으로 계속 호출이 되는것임 처음엔 value, 다음은 index
  }
}



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


a.forEach((v, i) => { // forEach 는 앞에 value 뒤에 parameter 는 idex number
  console.log(v, i)
});

🔹 2.map

• map 은 원본 arr 하나하나 탐색하면서 새로운 배열을 생성하는것임. map 은 새로운 배열을 return 한다고 생각하면 됨

// map 작동 원리 함수

const map = (predicate, thisArg) => {
  let list = [];
  for (let i = 0; i < a.length; i++) {
    list.push(predicate(a[i], i));
  }
  return list;
} 

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


let answer = a.map((v, i) => {
  return v * v; // 각 value 끼리 곱한값을 새로운 arr 인 answer 에다가 return 해주는 것임
})

console.log(answer)

• 주의!! map 은 원본 배열과 길이가 무조건 똑같이 return 받음

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

let answer = a.map((v, i) => {
  if (v % 2 === 0) return v; // 2로 나눈 나머지가 0인것 만 return 만하는것이 아니라 map 이 생성하는 배열은 a arr 의 길이와 같게 return 시킴
})

console.log(answer)

🔹 3.filter

• filter 도 map 과 마찬가지로 새로운 배열을 return 받는데 차이점은 map 은 정확하게 원본 arr 의 길이와 같아야 하지만 filter 는 조건에 맏는 것만 return 해줌 (원본의 길이와 상관 없음)

// filter 작동 원리 함수

const filter = (predicate, thisArg) => {
  let list = [];
  for (let i = 0; i < a.length; i++) {
    if (predicate(a[i], i)) list.push(a[i]); // a[i] 가 true 일때만 list 에 push 하는것
  }
  return list;
} 

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

let answer = a.filter((v, i) => {
  return v % 2 === 0; // 콜백함수가 true 인 value 만 return 해줌
})


console.log(answer)

🔹 4.reduce

• 배열을 생성하는것이 아니라 어떠한 값을 생성해서 return 해줌

// reduce 작동 원리 함수
// return 한 값이 자기자신한테로 넘어 오는것
const reduce = (predicate, value) => {
  let result = value;
  for (let i = 0; i < a.length; i++) {
    result = predicate(result, a[i]); // result 에 result 자신을 넘기고, 뒤에는 value 값을 넘김
  }
  return result;
} 


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

let answer = a.reduce((acc, v) => { // 첫번째 인수는 누적된것, 두번째가 value 로 들어옴
  return acc + v; 
})


console.log(answer)

• reduce() 는 주로 arr 의 합이나 전체 값을 연산할때 주로 사용합니다.