[JavaScript] 반복문의 종류 map, filter, reduce

코딩을 하다보면 반복문을 사용할 일이 많은데 오늘은 알고있으면 유용한 배열의 반복함수에 대해 알아보자.

1. map

map은 어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 반환해준다.

기본 사용법은 아래와 같다. 인자로 받는 index는 배열 원소의 순서를 나타내며 value는 index에 위치한 배열의 원소 값이다.

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

//일반 사용법
var newArr = arr.map(function(index, value){
	return value * 2;
});

//ES6 사용법
var newArr = arr.map((index, value) => {
	return value * 2;
});

// result
// arr -> [1,2,3,4,5]
// newArr -> [2,4,6,8,10]

2.filter

filter는 배열에 있는 모든 요소를 특정 조건에 맞춰 추려내서 만든 새로운 배열을 반환한다.

var arr = [1,2,3,1,2,3];

var newArr = arr.filter((item, value) => {
	return item == 2;
});

// result
// arr -> [1,2,3,1,2,3]
// newArr -> [2,2]

3. reduce

reduce는 배열의 모든 요소를 순회하며 callback 함수의 실행 값을 누적해서 새로운 배열을 반환한다.

reduce는 위에서 본 map, filter와는 조금 다르게 생겼다. 인자도 index, value로 표현하지 않고, acc와 curr로 표현하는데

accumulator의 acc와 currentValue의 curr에서 따온 것인데 각각 누적 값과 현재 값을 의미한다.

또 다른 차이점은 newArr의 끝부분을 보면 0이 있는걸 볼 수 있는데 초기 값을 의미하고 꼭 0이 아닌 다른 수를 지정해 줄 수 있다.

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

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

// result
// arr -> []
// newArr -> []