내장 고차함수 이해하기
이제 본격적으로 고차함수를 사용해보자. Javascript 내에는 기본적으로 내장된 고차함수가 여럿 있다. 그 중에서도 배열 고차 함수는 매우 유용한 고차함수를 제공한다. 배열 고차함수에는 어떠한 고차함수들이 있는지, 어떻게 사용하는지 알아보겠다.
1. Array.prototype.filter
배열의 filter 메서드는 모든 배열 요소들 중 특정 조건을 만족하는 요소(true인 요소)를 걸러내는 메서드이다.
걸러내는 기준이 되는 특정 조건은 filter 메서드의 전달인자로 전달이 되며, 이 특정 조건은 함수의 형태이다. 이렇듯 filter 메서드는 걸러내기 위한 특정 조건을 명시한 함수(함수의 전달인자가 되는 함수이므로 콜백함수)를 전달 인자로 받기 때문에 고차 함수이다.
const arr = [1, 2, 3, 4, 5, 6];
const oddArr = arr.filter(function(el){ //filter 메서드는 함수를 전달인자로 가짐
// 콜백함수의 매개변수 el은 배열의 모든 요소를 순회
if (el % 2 !== 0) { //el이 홀수라면
return true; // filter 메서드는 콜백함수의 리턴값이 true인 경우 걸러낸다.
} else {
return false; // 콜백함수의 리턴값이 false인 경우에는 걸러내지 않음.
}
});
console.log(oddArr); //[1,3,5]위의 예시를 보며 다시 정리해보면, filter 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그러면서 콜백함수의 리턴값이 true인 요소들로만 구성된 새로운 배열을 반환한다. 이 때 원본 배열(위의 예시에서는 arr)은 변경되지 않는다.
2. Array.prototype.map
배열의 map 메서드는 모든 배열 요소들을 순회하며 인수로 전달받은 콜백 함수를 반복 호출하여 콜백 함수의 리턴값들로 구성된 새로운 배열을 반환하는 메서드이다. map 메서드도 filter 메서드와 마찬가지로 배열 요소들의 값을 변경해 줄 함수를 전달 인자로 받기 때문에 고차 함수이다.
const arr = [1, 2, 3, 4];
const newArr = arr.map(function(el) { //map 메서드는 함수를 전달인자로 가짐 /
return el * 2; // 모든 배열 요소에 적용해줄 값(함수)
});
console.log(newArr); //[2,4,6,8]위의 예시를 다시 정리해보면, map 메서드는 자신을 호출한 배열의 모든 배열 요소를 순회하며 인자로 전달받은 콜백함수의 값을 적용해준다. 그리고 그 값이 적용된 배열 요소들을 새로운 배열로서 반환한다. 이 때 원본 배열(위의 예시도 arr)은 변경되지 않는다.
3. Array.prototype.reduce
배열의 reduce 메서드는 자신을 호출한 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복하여 호출하고 콜백 함수의 리턴 값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 다시 콜백 함수를 호출하는 것을 반복해서 하나의 결과값을 만들어 반환하는 메서드이다. reduce 메서드 역시 인수로 콜백 함수를 전달받기 때문에 고차 함수이다.
reduce 메서드는 위의 두 메서드들에 비해서 복잡하지만 제대로 이해하면 무엇보다 유용하게 쓰일 수 있는 메서드라고 한다. 제대로 이해하고 넘어가보자.
const arr = [1, 2, 3, 4];
const newSum = arr.reduce(function(acc, cur) { // 인자1 acc: 계속 축적되는 값
// 인자2 cur: 현재 값
return acc + cur;
}); //초기값을 주지 않았으므로 초기값은 배열의 인덱스 0 요소가 됨.
const redSum = arr.reduce(function(acc, cur) {
return acc + elc;
}, 5); //초기값을 5로 주었음.
console.log(newSum); // 10 (1+2+3+4 = 10)
console.log(redSum); // 15 (5+1+2+3+4 = 15)우선 첫번째 인자로 들어가는 acc는 계속 축적되는 누적 값이다. 그리고 두 번째 인자로 들어가는 cur은 현재의 값을 뜻한다. 즉, acc값은 계속 축적되고 현재값인 cur 값은 하나씩 늘어나면서 그 전의 값이 누적값에 계속 더해지는 것이다. 이러한 점이 반복문과 비슷해 반복문을 대신에 쓰일 때도 있다고 한다.
reduce를 이해하기 위해 꼭 알아야 하는 것이 하나 더 있다. 바로 초기값이다. 초기값은 현재 값을 무엇으로 시작할지 정해주는 것이다. 만약 초기값을 정해준다면 reduce 메서드는 해당 배열의 인덱스 0번 요소가 아닌, 초기값 부터 시작해 0부터 하나씩 반복한다.
초기값은 반드시 정해야 하는 필수 요소는 아니다. 만약 초기값을 정하지 않는다면 Javascript는 초기값을 자동으로 배열의 인덱스 0번 요소로 지정한다. 즉, 초기값을 정하지 않는다면 해당 배열의 인덱스 0번 요소부터 시작해 하나씩 반복하게 된다. 그러다보니 같은 배열이라도 초기값을 정한 경우가 정하지 않은 경우보다 한번 더 반복하게 된다.
초기값을 반드시 정해야 하는 건 아니지만 빈 배열일 경우에는 배열의 0번째 인덱스 요소가 없으므로 반드시 초기값을 정해두어야 한다.
