[JavaScript] 고차함수 사용하기(filter, map, reduce)

고차함수란?

고차함수는 함수를 인자로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수입니다.

함수를 인자로 받는 함수에만 한정해 커리 함수라고 합니다.

콜백 함수(callback function)란?

콜백 함수는 다른 함수의 인자로 전달되는 함수입니다.

 

콜러(caller)란?

콜러는 다른 함수를 인자로 받는 함수입니다.

---

filter

filter는 배열 내장 메소드로, 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메소드입니다.

조건에 맞는 요소로 이루어진 새로운 배열을 반환하며, 어떤 요소도 조건에 맞지 않으면 빈 배열을 반환합니다.

기본 형태

arr.filter(callback(element, index, arr), thisArg);

◆ callback

• 배열의 모든 요소를 판단할 함수
• truthy한 값 반환 시, 요소를 유지
• falsy한 값 반환 시, 요소를 버림

◆ element

• 처리할 현재 요소

◆ index

• 현재 요소의 인덱스

◆ arr

• filter를 적용하는 전체 배열

◆ thisArg

• callback을 실행할 때 this로 사용할 값

 

filter를 이용한 특정 타입 데이터 분류

let arr = ['사과', 1,'포도', 10, '토마토', ['array', 1]];

let filteredArr = arr.filter(function(element, index, arr){

    if(typeof element === 'number'){

        return true; // 요소가 number타입이면 filteredArr의 요소로 추가

    }else{

        return false;

    }

})

console.log(filteredArr);

 

filter에 함수 사용 테스트

let arr = ['사과', 1,'포도', 10, '토마토', ['array', 1]];

let test = (ele1, ele2, ele3) => {

    console.log(ele1); // arr의 0번째 요소부터 차례로 출력

    console.log(ele2); // arr의 인덱스 차례로 출력

    console.log(ele3); // arr 배열 자체를 계속 출력

}

let testFilter = arr.filter(test);

 

map

map은 배열 내장 메소드로, 배열 내의 모든 요소 각각에 대하여 다른 데이터로 맵핑할 때 사용하는 메소드입니다.

각 요소에 callback의 결과를 모은 새로운 배열을 반환합니다.

기본 형태

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

◆ callback

• 배열 각 요소에 대해 실행할 함수

◆ currentValue

 

• 처리할 현재 요소

 

◆ index

• 현재 요소의 인덱스

◆ array

• map을 적용하는 전체 배열

◆ thisArg

• callback을 실행할 때 this로 사용할 값

 

map을 이용한 모든 요소 연산

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

let mappingArr = arr.map(function(currentValue, index, array){

    if(currentValue % 2 === 0){

        return currentValue + 1; // arr의 요소가 짝수일 경우, 1을 더함

    }else{

        return currentValue // arr의 요소가 홀수일 경우, 그대로 반환

    }

})

console.log(mappingArr);

 

 

reduce

reduce는 배열 내장 메소드로, 배열 내의 모든 요소 각각에 대하여 callback 함수를 실행하고, 하나의 결과 값을 반환하는 메소드입니다.

빈 배열에서 initialValue 없이 reduce를 사용하면 오류가 납니다.

기본 형태

arr.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue);

◆ callback

• 배열 각 요소에 대해 실행할 함수

◆ accumulator

• 콜백의 누적된 반환 값
• callback의 최초 호출 시, initialValue의 값
• 이전 callback의 반환 값

◆ currentValue

• 현재 처리할 요소

◆ currentIndex

 

• 현재 처리할 요소의 인덱스

 

◆ array

• reduce를 적용하는 전체 배열

◆ initialValue

• callback의 최초 호출 시, accumulator에 값을 제공
• 초기 값을 제공하지 않을 시, 배열의 첫 번째 요소를 사용

 

reduce를 이용한 누적 연산

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let reducedArr = arr.reduce(function(accumulator, currentValue, currentIndex, array){

    return accumulator + currentValue; // 1부터 10까지의 합을 연산

})

console.log(reducedArr);

 

reduce를 이용한 최댓값 구하기

let arr = [15, 3, 27, 40, 6, 32, 38, 10];

let reducedArr = arr.reduce(function(accumulator, currentValue, currentIndex, array){

    if(accumulator < currentValue){

        return currentValue;

    }else{

        return accumulator;

    }

})

console.log(reducedArr);