내장고차함수: filter, map, reduce

1. filter

filter는 말 그대로 배열의 요소들을 걸러주는 역할을 한다. filter의 경우 내부함수의 인자로 사용 방법은 다음과 같다.

arr = [10, 11, 12, 13, 14];

arr.filter(function(element){
	return element > 12; //값이 12초과인 요소만
}); //[13, 14]

arr.filter(function(element, index){
	return index % 2 === 0; //index가 짝수인 요소만
}); //[10, 12, 14]

arr.filter(function(...params){
	return params[2][2] > params[0]; //arr[2]보다 작은 값인 요소만
}); //[10, 11]

filter의 인자로 들어가는 함수는 element, index, array 순서의 3가지 매개변수를 사용한다. element는 배열에서 처리할 현재 요소, index는 배열에서 처리할 요소의 인덱스, array는 원본배열을 의미한다. 반복문을 순차적으로 도는 것처럼 element와 index가 계속 변하면서 함수 내의 처리를 수행하며 return 값이 true인 경우만 모아놓은 새로운 배열을 리턴한다. 

 

2. map

map은 모든 배열의 요소들을 가공하는 역할을 한다. 사용방법은 다음과 같다.

arr = [10, 11, 12, 13, 14];
arr.map(function(currentValue){
	return value * 2; //값을 2배
}); // [20, 22, 24, 26, 28]

arr.map(function(value, idx){
	return value + idx; //값에 idx 값을 더한다.
}); // [10, 12, 14, 16, 18]

 

map의 인자로 들어가는 함수는 currentValue, index, array 순서의 3가지 매개변수를 사용한다. currentValue는 배열에서 처리할 현재 요소, index는 배열에서 처리할 요소의 인덱스, array는 원본배열을 의미한다. 반복문을 순차적으로 도는 것처럼 element와 index가 계속 변하면서 함수 내의 처리를 수행한 결과 값을 모아놓은 새로운 배열을 리턴한다.

 

3. reduce

reduce는 배열의 각 요소의 정보를 합치는 역할을 한다.  사용방법은 다음과 같다.

arr = [10, 11, 12, 13, 14];

arr.reduce(function(acc, cur){
	return acc + cur;
}, 10); //70 (acc 초기 값 10 + 10 + 11 + 12 + 13 + 14)

arr.reduce(function(acc, cur){
	return acc + cur;
}); //60 (acc 초기 값 arr[0] + 11 + 12 + 13 + 14)

 

reduce의 인자로 들어가는 함수는 acc, cur, idx, src 순서의 4가지 매개변수 사용한다. acc는 누적 값, cur은 배열에서 처리할 현재 요소, idx는 배열에서 처리할 요소의 인덱스, src는 원본배열을 의미한다. 반복문을 순차적으로 도는 것처럼 element와 index가 계속 변하면서 함수 내의 처리를 수행하고 현재 acc값 + return 값이 다음 배열 요소에서의 acc 값이 된다. 최종적으로 마지막 콜백 함수의 return 값이 리턴된다. 초기값을 지정하지 않는 경우 acc의 초기 값이 배열의 첫 번째 값이 되며 배열의 두 번째 값부터 함수 내의 처리를 수행한다.

 

 

 

---

참고 사이트

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Array.prototype.reduce() - JavaScript | MDN