[자바스크립트] 응용형함수 또는 고차함수 -1

함수형으로 전환하는 과정 중 가장 중요한 함수형 프로그래밍의 컨셉을 잘 이해하고 어디에서 함수를 사용하는가이다. 

 

여기서는 함수를 사용하는 이유를 중복을 제거하거나 추상화할 때 ,함수를 사용함으로써 프로그래밍을 한다고 한다.

 

앞에서도 함수를 사용했었는데 이번 장에서는 함수가 함수를 받아 원하는 시점에 알고있는 인자를 적용하여 원하는 결과를 얻어내는 것으로 이러한 함수는 응용형 함수 또는 고차 함수라고 불린다고 합니다.

 

들어가기에 앞서 map 이라는 내장 함수를 자바스크립트에서 확인 할 수 있습니다. 간단하게 map 내장함수 설명을 읽어보고 마지막에 한번 더 보는 것을 저는 추천합니다. 

 

먼저 하나의 배열에 총 10개가 있는 객체를 생성해 봅니다. 

var array =[
    { id:1, name: 'AJ', age:31},
    { id:2, name: 'BJ', age:32},
    { id:3, name: 'CJ', age:33},
    { id:4, name: 'DJ', age:34},
    { id:5, name: 'EJ', age:35},
    { id:6, name: 'FJ', age:36},
    { id:7, name: 'GJ', age:37},
    { id:8, name: 'HJ', age:38},
];

sfdaㅓㅏㅣㅎㄴㅇ머ㅏㅣㅇ ;

영상에서는 Filter 함수와 수집을 따로 나누어서 쉽게 설명 하였습니다. 하지만 저는 한번에 걸러서 수집한 결과를 불러오려고 합니다. 조건은 나이가 35세 이상인 이름을 보여주는 것 입니다. 그렇게 될 경우 아래와 같이 먼저 만들어 보았습니다.

 

// 나이가 35 이상의 이름
var temp =[];
for (var i=0; i<array.length;i++){
    if (array[i].age >=35){
        temp.push(array[i].name);
    }
}
console.log(temp); // ["EJ", "FJ", "GJ", "HJ"]

그럼 조건이 반대로 35세 미만인 이름을 보여주는 것은 아래와 같은 코드로 나타낼 수 있습니다.

// 나이가 35 이하의 이름
var list =[];
for (var i=0; i<array.length;i++){
    if (array[i].age <35){
        list.push(array[i].name);
    }
}
console.log(list); //["AJ", "BJ", "CJ", "DJ"]

이 두코드를 보면 조건문에서 사용된 숫자와 기호만 다를 뿐 거의 다 똑같다고 보여집니다. 이럴 경우 함수형 프로그래밍을 사용하여 중복을 줄일 수 있습니다.

 

여기서 앞에 이야기 했던 응용형 함수나 고차 함수는 변형된 새로운 return 값을 가지고 값을 변형해 나가는 것입니다. 그럼 새로운 함수를 만들어 return 값을 만들어 보겠습니다.

 

// 새로운 함수 및 return 값을 반환
function _filterMap(list, func) {
    var new_list =[];
    for (var i=0; i<list.length;i++){
        if (func(list[i])){
            new_list.push(list[i].name);
        }
    }
    return new_list;
}

console.log(_filterMap(array,function (a) {
    return a.age >=35;
})); // ["EJ", "FJ", "GJ", "HJ"]

console.log(_filterMap(array,function (a) {
    return a.age < 35;
})); // ["AJ", "BJ", "CJ", "DJ"]

현재도 완전히 이해가 되지 않았다 하는 부분은 if문 안에 func가 들어와 return 값으로 변화해주는 곳인데 func을 받지 않는다면 아래와 같이 변형도 가능합니다.

 

if (func(list[i])){
            new_list.push(list[i].name);
        }
=================================================        
if (function(a) {return a.age>=35;}(array[i])){
		new_list.push(list[i].name);
    	}

 

저는 비록 하나의 함수로 원하는 값을 넣었지만, 두 개의 함수로 더 많은 조건을 구하거나 위와 같은 중복된 코드를 더 줄여나가면서 재사용 및 다형성을 극대화 할 수 있습니다.

 

현재도 중복이 남아있는 상태입니다. 다음 장에서 다른 함수를 사용하여 줄여나가 보로독 하겠습니다.

 

출처 : 자바스크립트로 알아보는 함수형 프로그래밍, 제로초 블로그