고차함수 - HOF

Evan Lee ㅣ 2022. 7. 19. 14:52

고차함수란 ?

 하나 이상의 함수를 인수로 취하는 함수를 말합니다.  

 

가장 기본적인 고차함수 프레임

function f(a){
    console.log(a);
    function hof(b){
        console.log(b)
    }
    return hof;
}

f 함수 호출시 출력값

위에서 볼 수 있듯이 인자로 3을 전달해주면 그대로 console.log(a)가 실행되면 3을 출력해주고, hof 함수를 반환하고 코드가 종료하는 것을 확인 할 수 있다. 여기서 중요한 것은 함수가 실행되고 내부함수를 반환을 해주는 것이다.

반환된 내부함수를 변수에 할당해주면 어떻게 될까 ? 

변수에 반환된 내부함수 할당

assignedhof 라는 변수에 f함수의 반환값을 할당하였다. 그리고 assignedhof 함수를 호출해보면 위에서 보았던 f함수 반환값으로 나왔던 함수가 그대로 적용되서 실행되는 것을 확인 할 수 있었다. 

 


연습문제

 

출력값이 이렇게 나오는 고차함수를 만들어라

 

 

 

 

정답 코드 

function add(a){
    return function(b){
        return a+b;
    }
}

다른 방법도 있겠지만, 내가 듣던 수업 선생님의 정답은 이거였고 나도 수긍을 했기에 이렇게 적었습니다. 

add라는 기명함수를 만들었고 그안에서 바로 내부함수를 반환을 하게됩니다. 

add함수 인수를 넣고 호출시 출력

위는 add함수에 1이라는 인수를 넣고 실행하면 따로 실행되는 코드는 없고 바로 내부함수를 반환하기 때문에 저렇게 출력이 되는데, 저때 우리가 넣은 1이라는 인수는 반환해주는 함수 a에 할당이 되게 됩니다. 

그렇기 때문에 그 반환되는 함수에 들어갈 인수를 저렇게 바로 옆에 적어주고 호출을 위해 소괄호를 쳐주게되면,

그 반환된 내부함수가 호출되면서 a+b를 반환하게 됩니다. 그리고 변수에 내부함수를 할당해줌으로써 어떠한 동작들을 반복적으로 수행할 수 있게 만들수 있는데, 그게 저 문제 사진에 있는것이 그렇습니다. 

add1 이라는 변수에 add(1) 함수의 내부함수를 할당하게 되주면 아래 함수자체가 할당이 되는데, 함수 내 a라는 변수에 1이 이미 할당되어 있기때문에  add1(5)이라는 함수호출을 하게되면 알아서 1과 들어오는 인자를 더해주고 반환하게 되는 함수가 되는것이다.

add(1)의 반환된 내부 함수


연습문제2

 

const arr = [{ name: 'kim', age: 10,
}, {
name: 'park', age: 15,
}, {
name: 'lee', age: 12,
}, {
name: 'choi', age: 13,
}, {
name: 'jin', age: 20,
}, {
name: 'woo', age: 30,
}];
arr.find(findAge('jin')).age; // 20;
arr.find(findAge('woo')).age; // 30;

위에 배열 변수와 find 메소드를 통해 올바른 출력값을 받게끔 해봐라 ~ 

 

일단 여기서 우리가 알아야 할 것은 find 메소드는 인자로 함수만 받는다. 그렇기 때문에 findAge() 함수의 반환값은 반드시 함수여야한다. 그래서 사실상 findAge에서는 어떠한 결과가 나오는게 아니라 arr.find에서 사용될 함수의 뼈대를 반환(?)한다고 나는 이해를 했다. 

find 메소드의 동작확인

find 동작을 보니 배열안에 요소들을 하나씩 가져오는 것을 확인할 수 있다. 흡사 forEach, map 처럼 생각할 수 있지만 find는 또 특이한점이 있다. 조건에 맞으면 해당 item을 무조건 return을 하는데, 즉 조건에 맞아 true가 나면 return item이 기본적으로 수행되기 때문에 따로 return item을 수행해 줄 것이 아니라 true를 반환을 해줘야 item 이 반환된다. 

findAge() 선언 그리고 반환값 확인

일단 findAge 함수를 선언해줘야한다. 하지만 알다시피 반환된게 arr.find()로 들어갈거니까 반환값이 함수여야하는건 당연하고,

사실상 이 함수에서는 어떠한 계산도 필요가 없는 것이다. arr.find()에서 인자로 받은 문자열과 비교해서 true와 false로 분리할수 있는 함수를 반환하면 되는 것입니다. 그래서 저렇게 삼항연산자로 비교하는 함수를 바로 return하였고, 실제로 적용해보면 아래 처럼 나옵니다.

 

'Javascript > MGS-JS' 카테고리의 다른 글

정규표현식 - Regular Expression  (0) 2022.07.03
Javascript Data Practical  (0) 2022.07.03
자바스크립트 데이터 - Javascript Data  (0) 2022.07.01
클래스 개념 - Class Concept  (0) 2022.07.01
함수 복습 - Fn Theory Recap  (0) 2022.06.30