map/filter/reduce에 대해 알아보기 +find,findIndex

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. 

 

map/filter/reduce는 자바스크립트의 아주 유용한 function들이다.

 

1. map

먼저 map은 우리가 흔히 아는 loop와 비슷하다. 

map은 배열 안의 요소가 각각 어떤 함수에 들어가서 처리된 결과값으로 새로운 배열을 만들어낸다.

아래처럼 numbers라는 배열의 요소가 map 함수에 의해 내가 임의로 정한 double이라는 함수에 하나하나 들어가게 된다. 이후, newNumbers라는 배열에 새롭게 저장된다.

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

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

위의 코드를 double 함수를 anonymous하게 만듦으로써 더 간단하게 만들 수 있다. 

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

이를 우리가 흔히 사용하였던 forEach를 사용해서 똑같이 구현해보자.

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

아무래도 map 함수가 더 간단해보인다.

 

2. filter

filter는 배열에서 조건에 맞는 요소만 분리하여 새로운 배열을 만들어준다.

var numbers = [3, 56, 2, 48, 5];
const newNumbers = numbers.filter(function(num) {
  return num > 10;
});

위의 newNumbers 배열에는 [56,48]이 들어가게 된다.

 

또 다시 forEach를 사용하여 구현해보자.

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

 

3. reduce

reduce의 개념은 조금 더 어렵다. 이는 배열의 수를 누적하여 계산하고 새로운 배열에 넣는 것이다. 이를 이해하기 쉽게 먼저 forEach로 나타내어보면 아래와 같다.

var numbers = [3, 56, 2, 48, 5];
var newNumber=0;
numbers.forEach(function(currentNum){
  newNumber+=currentNum;
});

맨 처음 3과 56을 더하고 (59)

59에 2를 더해주고 (61)

61에 48을 더해주고(109)

마지막으로 109에 5를 더해주면 114가 나온다.

 

이를 reduce를 이용하여 나타내면 아래와 같다. 위에서 풀어서 설명한 것과 같이 아래에 적어보겠다.

var numbers = [3, 56, 2, 48, 5];
var newNumber = numbers.reduce(function(Accumulator,currentNum){
  return Accumulator+currentNum;
});

맨 처음 3과 56을 더하고 accumulator는 59가 된다.

59에 currentNum인 2를 더해주고 accumulator는 61이 된다.

61에 currentNum인 48을 더해주고 accumulator는 109이 된다.

마지막으로 109에 currentNum인 5를 더해주면 114가 나온다.

 

*find와 findindex는 간단하다.

find는 조건에 맞는 첫번째 아이템의 value를 리턴하는 것이고, findindex는 조건에 맞는 첫번째 아이템의 index를 리턴하게 된다.

 

var numbers = [3, 56, 2, 48, 5];
var newNumber=numbers.find(function(num){
  return num>10;
});

<find의 예시 -> 결과값은 56>

var numbers = [3, 56, 2, 48, 5];
var newIndex=numbers.findIndex(function(num){
  return num>10;
});

<findIndex의 예시 -> 결과값은 1>