JavaScript _tip / 고차함수 map, filter, reduce 원리 이해!!!

고차함수 map , filter , reduce 원리 이해하기!!!

 

이번 블로깅은 고차함수에 많이 사용 하는 map, filter, reduce에 대해 알아보는 시간을 갖도록 하겠습니다.... map , filter, reduce는 꼭 알아야 나 중에 객체 데이터들을 효율적으로 다룰수 있어 확실하게 개념을 잡는 것이 중요하다고 생각합니다!!! 

---

들어가기 앞서 map 과 filter에 대해 간단하게 공통점과 차이점을 설명하자면 

 

공통점

새로운 배열을 만듭니다.

 

차이점

filter는 조건을 통해 배열안의 값을 삭제 합니다. 쉽게 말해 걸러냅니다.

map은 원하는 데로 배열안의 값을 변경 합니다

 

 

# filter

filter는 위에 설명을 했듯이 배열안에 원하는 값을 걸러 내고 나머지 값들은 삭제합니다. 예를 들어 배열 안에 2보다 큰수를 걸러낸다고 예를 들겠습니다!

 

let arrNum = [1,-1,3,2,1,5]
 
let filterNum = arrNum.filter(function(num){
    return num > 2
});
 
filterNum // [3, 5]

let arrNum = [1,-1,3,2,1,5]
 
let filterNum = arrNum.filter(function(num){
    return num > 2
});
filterNum // [3, 5]
 
//화살표 함수로 
let filterNum = arrNum.filter(num => num > 2);
filterNum // [3, 5]

 

만약 화살표 함수에 대해 개념이 안잡혔 있으면 아래 링크에서 확인해주세여!!

 

https://joy-codeing-lee.tistory.com/65?category=961871

JavaScript _tip / 화살표 함수 두려워하지 말자!

---

# map

맵은 배열안에 있는 요소를 원하는데로 수정 할 수 있습`니다. 방금 예를 들었던 배열안에 있는 수에 3씩 더해 보는 작업을 해보겠습니다.

 

let arrNum = [1,-1,3,2,1,5]
 
let mapNum = arrNum.map(function(num){
    return num + 3
});
mapNum // [4, 2, 6, 5, 4, 8]
 
//화살표 함수로 표현하기
let mapNum = arrNum.map(num => num + 3);
mapNum // [4, 2, 6, 5, 4, 8]

 

map 또 한 일종의 반복문이라고 생각하면 편하고 function안에 있는 num은 쉽게 말해 배열 안에 있는 요소 값이 순회한다 라고 생각하면 이해하기 쉽습니다. 또한 num은 자유롭게 변수명을 지어도 됩니다!

 

---

그러면 약간 한단계 높여서 filter와 map을 같이 쓰는 경우를 살펴 보도록 하겠습니다!

예시로는 배열안에 있는 값중에 홀수값만 나오게 하고 값이 객체 형태로 {"홀수" : num} 배열안에 담아 보겠습니다. 과연 filter는 어디에쓰고 map은 어떻게 써야 될까요 ?!

 

key point

filter - 배열안에 있는 수를 홀 수값만 나오게 하자!

map - 걸러진 값을 객체 형태인 {"홀수" : num} 로 변경 하자!

 

let arrNum = [3,2,7,8,9]
 
const oddNum = arrNum.filter(num => num % 2 !==0).map(num => ({"홀수": num}));
 
//분리해보기
arrNum.filter(num => num % 2 !==0) // 홀수를 걸러준다.
 
.map(num => ({"홀수": num})) // "홀수":num 을 객체 형태로 변경해준다.

 

여기서 주의 할점 객체를 표현 하려면 꼭 () 소괄호를 감싸줘야 됩니다!

 

---

# reduce

reduce는 앞서 본 map이나 fliter와 달리 결과 값이 객체든 배열이든 값을 줄여 하나의 값으로 나타 납니다. 

reduce는 4개의 매개변수를 사용 할 수 있습니다 

 

arr.reduce(acc, cur, inx, src) //  acc : 초기값 , cur :  현재값 , inx: 인덱스값 , src: 원본 배열

 

여기서 매개변수를 생략 할 수 있고 통상적으로 초기값과 현재값을 많이 활용해서 씁니다. 그리고 reduce의 특징 중 하나가 초기 값을 설정 할 수 있다는 점을 알아야 합니다!

 

다음 배열안에 있는 수를 모두 더한 예시를 통해 reduce에 대해 좀더 알아 보도록 하겠습니다!

 

const arrNum = [1,2,3,4,5]
 
const arrSum = arrNum.reduce(function(acc, cur){
   return acc + cur
}, 0) // 여기서 0은 초기값을 나타냅니다.
 
arrSum // 15
 
//화살표 함수
const arrNum = [1,2,3,4,5]
let arrSum = arrNum.reduce((acc, cur)=>acc + cur, 0)
 
arrSum // 15

 

지금 예시는 reduce를 활용해서 배열안에 있는 요소를 더하는 예시만 보여 드렸습니다! 하지만 

 

reduce는 정말 다양하게 사용할 수 있습니다.  filter처럼 조건을 만들어 짝수나 홀수만 걸러낼 수 있고 map 처럼 초기값을 설정해서 각각의 수를 바꾸고 또 한 초기 값에 배열이나, 객체를 생성해서 push도 가능 합니다! 이처럼 reduce는 너무나 유용한 친구이기 떄문에 꼭 개념을 잡길 바랍니다!!

 

 만약 지금까지 설명이 부족했다면 여기 유튜브 보면 아주 도움이 됩니다!!  참고 하시길!

 

 

https://www.youtube.com/watch?v=vqdzVZxoRtM

 

 

http://www.youtube.com/watch?v=nIc6a8v0Dys