[TIL] JavaScript - map( ), filter( ), reduce( )

Array Methods 

오늘은 JavaScript에서 가장 많이 쓰이는 객체인 배열 연산 관련 함수인 map, filter, reduce에 대해 공부해 보려고 합니다.

코테 준비하는데 map, filter, reduce가 많이 쓰여서 좀 더 제대로 알고 싶어서 공부를 하게 됐습니다.

글로 공부를 할 때는 이해가 잘 안 됐지만, 그림으로 보니 쉽게 이해할 수 있었습니다.

 

그림1. Array methods

1. map( )

1) 구문

arr.map( callback ( currentValue[, index[, array]])[, thisArg])

 

2) 매개변수

• callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.
  • currentValue : 처리할 현재 요소입니다.
  • index ( Optional ) : 처리할 요소의 인덱스입니다.
  • array ( Optional ) : map( )을 호출한 배열입니다.
• thisArg ( Optional ) : callback을 실행할 때 this로 사용되는 값

3) 반환 값

배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열입니다.

 

4) 예제

1. 배열의 각 요소에 곱하기 2하기!

 

let result = arr.map(function);

// 배열 * 2
let arr = [1, 2, 3, 4, 5];

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

let result = arr.map(double);
console.log(result)
>>> [5, 10, 15, 20, 25]

 

 

위처럼 function을 외부에 따로 정의하는 방식이 있으며 아래처럼 map( ) 안에 넣는 방식이 있습니다.

 

let result = arr.map(function double(x){
	return x * 2;
});

// Arrow function
let result = arr.map((x) => {
	return x * 2;
});

 

Arrow function을 쓸 경우, map( ) 안에 있는 함수를 익명 함수 (anonymous function)이라고 합니다.

만약 익명 함수가 한 줄일 경우 return을 생략하여 아래와 같이 변경할 수 있습니다.

 

let result = arr.map((x) => x * 2);

 

React 코드에서 map을 사용할 경우 반드시 key 값을 넣으라고 합니다. 이때 아래와 같이 map의 index 값을 넣으면 됩니다.

 

let arr = [1, 2, 3, 4, 5];
let result = arr.map((x , i) => console.log("index ", i, " : ", x * 2));

 

2. filter( )

1) 구문

arr.filter( callback ( element[, index[, array]])[, thisArg])

 

2) 매개변수

• callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.
  • element : 처리할 현재 요소입니다.
  • index ( Optional ) : 처리할 요소의 인덱스입니다.
  • array ( Optional ) : filter( )을 호출한 배열입니다.
• thisArg ( Optional ) : callback을 실행할 때 this로 사용되는 값

3) 반환 값

테스트를 통과한 요소로 이루어진 새로운 배열입니다. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.

 

4) 예제

1. 짝수, 홀수 찾기!

 

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

function isOdd(x){
	if(x % 2){
    return true;
    } else
    return false;
}

let result = arr.filter(isOdd);
console.log(result);
>>> [1, 3, 5]

 

filter( ) 안에 들어가는 함수는 무조건 true, false를 리턴하는 함수여야 합니다.

 

let result = arr.filter((x) => x % 2);

 

위 코드에서 x % 2 은 짝수면 0을 리턴하는데 JavaScript에서 0은 false를 뜻하고 0 이외의 숫자는 true로 인식하기 때문에 true, false가 아닌 0과 0 이외의 숫자를 리턴하는 함수여도 가능합니다.

 

이번엔 반대로 짝수만 뽑아보겠습니다.

 

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

let result = arr.filter((x) => x % 2 === 0);

console.log(result);
>>> [2, 4]

 

3. reduce( )

1) 구문

arr.reduce( callback[, initialValue])

 

2) 매개변수

• callback : 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.
  • accumulator : 누산기는 콜백의 반환 값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.
  • curretValue : 처리할 현재 요소입니다.
  • currentIndex ( Optional ) : 처리할 현재 요소의 인덱스입니다. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.
  • array ( Optional ) : reduce( )을 호출한 배열입니다.
• initialValue ( Optional ) : callback의 최초 호출에서 첫 번째 인수에 제공하는 값입니다. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce( )를 호출할 경우 오류가 발생합니다.

3) 반환 값

누적 계산의 결과 값입니다.

 

4) 예제

reduce 함수는 map, filter처럼 일정한 규칙이 아니고 완전히 새로운 규칙을 적용해서 배열을 뽑아낼 때 사용합니다.

 

1. 배열의 전체 합 구하기!

(1) for문을 활용한 전체 합 구하기.

 

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

function allSum(arr){
	let sum = 0;
    for ( let i = 0; i < arr.length; i++){
    	sum = sum + arr[i];
    }
    return sum;
}

console.log(allSum(arr));
>>> 15

 

(2) reduce 함수 사용하여 전체 합 구하기.

 

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

let result = arr.reduce(function (acc, curr){
	acc = acc + curr;
    return acc;
}, 0);

console.log(result)
>>> 15

 

위 코드를 살펴보면 reduce( ) 함수에서 익명 함수 다음에 0이라는 초기값을 부여했습니다. 그리고 익명 함수의 인자는 두 개가 있는데, 첫 번째 acc는 누적 인자라 하며 accumulator입니다. 그리고 두 번째 curr은 현재 인자라 하며 currentValue입니다.

배열의 전체 합산을 하기 위해 누적 인자 acc에 현재 인자 curr을 계속 더하게 되는 구조입니다.

 

(3) Arrow function을 사용.

let result = arr.reduce((acc, curr) => {
	acc = acc + curr;
    return acc;
},0);

 

Reference

• https://cpro95.tistory.com/689