고차함수(map, forEach, filter, reduce)

 

 

고차함수란?

•  함수를 인자로 전달받거나 함수를 결과로 반환하는 함수

 

 

1. map()

배열내부를 돌면서 콜백함수를 실행시켜주는 새로운 배열을 반환하는 매서드입니다.

let arr = [1,2,3,4];
let arrx2 = arr.map(el => el*2);
    
console.log(arrx2);   //[2, 4, 6, 8]

 

 

---

 

 

2. forEach()

forEach 또한 map과 동일하게 배열내부를 돌면서 각 인자에 2를 곱하는 콜백함수를 실행시켜줍니다.

map과 비교해서 어떤 점이 다를까요?

같은 코드를 매서드만 바꿔보겠습니다.

let arr= [1,2,3,4];
let arrx2 = arr.forEach(el => el*2);

console.log(arrx2);  //undefined

이와같이 콘솔로 찍어보면  undefined가 출력됩니다.

이는 forEach가 배열을 리턴하지 않기 때문입니다.

 

 

 

forEach를 사용해서 위 코드를 구현하려면 어떻게 해야 할까요?

이번에는 arrx2를 빈배열로 선언하고 콜백함수로 2를 곱하고 빈배열에 넣어주도록 하겠습니다.

let arr = [1,2,3,4];
let arrx2 = [];
arr.forEach(el => arrx2.push(el*2));

console.log(arrx2);   //[2, 4, 6, 8]

이제 콘솔을 찍어보면 원하는 결과가 출력되는 것을 볼 수 있습니다.

 

 

---

 

 

3. filter()

배열내부를 순회하며 callback함수를 실행하고, 조건에 맞는 요소만을 갖는 배열을 반환합니다.

let userList =[  //배열을 선언
  {name: 'Mike', age: 30},
  {name: 'Tom', age: 10},
  {name: 'Jane', age: 27},
  {name: 'Sue', age: 26},
  {name: 'Harry', age: 43},
  {name: 'Steve', age: 60}
];
    
let filetred = userList.filter((el) => el.name.length === 3); //이름이 3글자인 사람만 필터링
    
console.log(filetred);   //[{name: 'Tom', age: 11}, {name: 'Sue', age: 26}]

 

 

---

 

 

4. reduce()

배열의 모든 요소들에 대해서 각각 연산을 수행하여 하나의 결과 값을 반환하는 매서드 입니다.

간단하게 배열의 모든 합을 구하는 코드를 작성해도록 하겠습니다.

let arr = [1,2,3,4,5];

const result = arr.reduce((prev, cur) => prev + cur, 0);
//prev: 누적계산값, cur: 현재값, 초기값 0

console.log(result); //15

prev는 누적값이므로 reduce함수를 사용할때는 초기값을 지정해줄 필요가 있습니다.

 

 

 

prev에 콘솔을 찍어본다면 reduce함수가 어떻게 실행되는지 직접 눈으로 확인 할 수 있습니다.

let arr = [1,2,3,4,5];

const reduce1 =arr.reduce((prev, cur) => {
  console.log(prev)
  return prev + cur
}, 0) //초기값 0

// 0
// 1
// 3
// 6
// 10
// 15 <- 최종결과

let arr = [1,2,3,4,5];

const reduce2 =arr.reduce((prev, cur) => {
  console.log(prev)
  return prev + cur
}, 1) //초기값 1

// 1
// 2
// 4
// 7
// 11
// 16 <- 최종결과

이와같이 초기값부터 계산되는 것을 볼 수 있습니다.

 

 

 

reduce 계산식 이외에도 사용할 수 있습니다.

위 filter을 이용한 코드를 reduce를 사용하여 같은 결과값을 콘솔로 출력해보겠습니다.

let userList =[
  {name: 'Mike', age: 30},
  {name: 'Tom', age: 10},
  {name: 'Jane', age: 27},
  {name: 'Sue', age: 26},
  {name: 'Harry', age: 43},
  {name: 'Steve', age: 60}
];

let filtered = userList.reduce((prev, cur) => {
  const name = cur.name;
  const age = cur.age;
  if(name.length === 3){
    prev.push({name, age});
    }
      return prev;
    }, []) //초기값을 빈배열
    
console.log(filtered);   //[{name: 'Tom', age: 10}, {name: 'Sue', age: 26}]

 

---

 

 

참고

https://www.youtube.com/watch?v=4_WLS9Lj6n4&t=52m38s