ES6 Map, Filter, Reduce 기능을 알아보자

var numbers = [3, 56, 2, 48, 5];

위와 같은 숫자를 가지고 있는 배열이 있다. 배열의 각 요소를 두배(X2) 해주려면 어떻게 해야 할까?

기존의 자바스크립트로는 forEach를 사용해서 문제를 해결할 수 있다.

//forEach
var newNumbers = [];
function double(x) {
  newNumbers.push(x * 2);
}
numbers.forEach(double);

newNumbers라는 비어있는 배열을 만들어주었다. 이곳에 x2 되는 숫자들이 들어간다.

그리고 double이라는 함수를 만들어서 두배 만들기 기능을 수행하게 했다.

마지막으로 forEach에 double함수를 넣어 numbers의 모든 요소를 x2 해주었다.

그리고 아래와 같은 결과 나왔다.

console.log(newNumbers);

//콘솔에 찍힌 값
[6, 112, 4, 96, 10]

numbers의 요소들이 x2가 된 것을 확인할 수 있다!!

간단한 기능을 수행하는 만큼 코드도 단순하지만 자바스크립트의 map을 사용하면 좀 더 간소화시킬 수 있다.

 

Map

map() -> 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

MDN에서 map의 정의를 찾아보면 다음과 같다.

결과를 모아 새로운 배열을 반환한다. 이 부분이 forEach 사용할 때 보다 간단한 코드를 작성할 수 있게 해 준다. 

function double(x) {
  return x * 2;
}

const newNumbers = numbers.map(double);
console.log(newNumbers);

//결과
[6, 112, 4, 96, 10]

예시를 보면 알겠지만 newNumbers라는 빈 배열을 먼저 만들지 않고도 바로 반환이 가능하게 해준다.

위 예시에서는 double 함수가 따로 작성되어있지만 map의 파라미터로 함수를 바로 작성해줄 수도 있다.

const newNumbers = numbers.map(function double(x){
   return x * 2;
});

조금 더 간단한 코드를 만들 수 있다.

여기서 한 발짝 더 나아가서 es6 문법을 사용한다면 완전 더 간단한 코드를 만들 수 있다.

const newNumbers = numbers.map( (x) => x * 2);

함수를 가리키는 function과 함수의 이름을 생략할 수 있고, 화살표 표시를 통해 함수를 표현해준다.

그리고 return 값이 1개일 경우에는 return 또한 생략이 가능하다.

 

es6를 처음 접하는 입장에서는 이게 뭔가 싶은 코드가 완성되었다!!!!!

 

다음은 filter 기능을 알아보자

---

Filter

filter()
 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

테스트를 통과하는 요소를 반환해주는 게 filter이다. 

그렇기 때문에 filter를 사용할 때는 어떠한 조건을 넣어주어야 한다.

 

const newNumbers = numbers.filter(function greaterThan(num) {
  return num > 10;
});
console.log(newNumbers);

//값
 [56, 48]

위 예시를 보면 filter 기능에서 사용한 조건을 알 수 있다.

맨 위에서 만들어준 numbers 배열에서 10보다 큰 요소를 찾는 기능을 수행한다.

여기서 조건은 return에서 넣어주는데 num이 10보다 큰 요소만 반환을 하고 그 요소를 newNumbers 배열에 넣어준다.

따라서 결괏값은 56과 48만 출력된다.

 

반대의 경우, 10보다 작은 요소를 찾으려면 조건만 바꾸어주면 가능하다.

const newNumbers = numbers.filter(function greaterThan(num) {
  return num < 10;
});
console.log(newNumbers);

//결과
[3, 2, 5]

numbers 배열에서 10보다 작은 요소들이 걸러져서 newNumbers에 담기는 걸 확인할 수 있다.

위 코드도 es6 문법에 맞추어 간소화시킬 수 있다.

const newNumbers = numbers.filter((num) => num < 10);
console.log(newNumbers);

//결과 
[3, 2, 5]

간소화시켜도 결과는 같다.

 

filter 메서드를 사용하지 않고 forEach를 사용하면 어떤 코드가 나올까?

var newNumbers = [];
numbers.forEach(function (num){
  if(num < 10){
    newNumbers.push(num);
  }
})
console.log(newNumbers);

//결과
[3, 2, 5]

forEach로도 충분히 같은 기능을 만들 수 있지만 filter를 사용할 때보다는 확실히 코드가 길어진다.

 

마지막으로 reduce 기능을 알아보자잉

---

Reduce

reduce()
 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결괏값을 반환합니다.

reduce 메서드는 MDN 설명으로는 크게 와닿지 않는 거 같다 하지만 막상 써보면 어떤 기능인지 확실히 알 수 있다.

설명대로 하나의 결괏값이 나오는 상황을 만들어 보았다

numbers 배열에 있는 모든 요소들을 forEach를 사용해서 더하기를 해보자.

var newNumbers = 0;
numbers.forEach(function (currentNum){
  newNumbers += currentNum;
})

console.log(newNumbers);

//결과
114

합계를 가질 newNumbers라는 변수를 만들고 0으로 세팅해준다.

그리고 numbers를 forEach로 돌면서 각 요소들을 누적해준다. 모든 요소를 더한 값으로 114가 나온다.

같은 기능을 이번에는 reduce 메서드를 사용해서 구현해보자

var newNumbers = numbers.reduce(function (previousValue, currentValue) {
  return previousValue + currentValue;
});
console.log(newNumbers);

//결과
114

reduce를 사용하면 보다 간결하게 원하는 결과를 볼 수 있다. reduce 메서드에는 이전 값과 현재 값이 파라미터로 들어간다.

그리고 반환 값으로 이전 값과 현재 값을 더해주면 numbers 배열을 돌면서 요소를 모두 더해준 값을 반환한다.