🔖 고차함수 개념 및 응용

고차함수란? 

함수를 호출할 때마다 반환 함수를 생성하는 함수를 고차 함수(high orderr function)라고 한다.

const func = () => {
  return () => {
    console.log('hello');
  }; 
};

 

반환된 함수는 다른 변수에 저장할 수 있고, 그 변수에 저장된 함수를 다시 호출할 수 있다.

const innerFunc = func();
innerFunc(); // hello

 

반환하는 값을 바꾸고 싶을 때는 매개변수를 사용한다.

const func = (msg) => {
  return () => {
    console.log(msg);
  };
};

 

화살표 함수 문법에 따라 함수의 본문에서 바로 반환되는 값이 있으면 { 와 return을 생략할 수 있다.

const func = (msg) => () => {
  console.log(msg);
};

 

 

 

 

 

응용

document.querySelector('#num-0').addEventListener('click', () => {
  console.log('0')
});
document.querySelector('#num-1').addEventListener('click', () => {
  console.log('1')
});
document.querySelector('#num-2').addEventListener('click', () => {
  console.log('2')
});
document.querySelector('#num-3').addEventListener('click', () => {
  console.log('3')
});
document.querySelector('#num-4').addEventListener('click', () => {
  console.log('4')
});
document.querySelector('#num-5').addEventListener('click', () => {
  console.log('5')
});
document.querySelector('#num-6').addEventListener('click', () => {
  console.log('6')
});
document.querySelector('#num-7').addEventListener('click', () => {
  console.log('7')
});
document.querySelector('#num-8').addEventListener('click', () => {
  console.log('8')
});
document.querySelector('#num-9').addEventListener('click', () => {
  console.log('9')
});

다음과 같이 각각의 버튼을 클릭했을때 콘솔창에 버튼에 맞는 숫자를 출력해주는 함수가있다.

리스너함수가 반복되는것을 볼 수 있다.(숫자만바뀌면서)

 

이럴때 함수로 감싸면 중복을 제거할 수 있다.

const onClickNumber = (number) => {
  console.log(number)
}

document.querySelector('#num-0').addEventListener('click', onClickNumber(number));
document.querySelector('#num-1').addEventListener('click', onClickNumber(number));
document.querySelector('#num-2').addEventListener('click', onClickNumber(number));
document.querySelector('#num-3').addEventListener('click', onClickNumber(number));
document.querySelector('#num-4').addEventListener('click', onClickNumber(number));
document.querySelector('#num-5').addEventListener('click', onClickNumber(number));
document.querySelector('#num-6').addEventListener('click', onClickNumber(number));
document.querySelector('#num-7').addEventListener('click', onClickNumber(number));
document.querySelector('#num-8').addEventListener('click', onClickNumber(number));
document.querySelector('#num-9').addEventListener('click', onClickNumber(number));

훨씬 코드가 깔끔해진것을 볼 수 있다.

 

하지만 이렇게 작성하면 의도한대로 동작이 안된다.

왜냐하면 저 곳은 리스너함수가 와야하기 때문이다. onClickNumber(number)는 함수를 호출하는것이기 때문에 반환값을 받아온다.

onClickNumber함수의 반환값은 undefined이다. return undefined가 생략되어있다.

 

그럼 어떻게 해결해야할까? 반환값을 함수로 만들면된다. 

이때 위에서 배운 고차함수를 사용할 수 있다.

const onClickNumber = (number) => (event) => {
  console.log(number);
  }


document.querySelector('#num-0').addEventListener('click', onClickNumber(number));
document.querySelector('#num-1').addEventListener('click', onClickNumber(number));
document.querySelector('#num-2').addEventListener('click', onClickNumber(number));
document.querySelector('#num-3').addEventListener('click', onClickNumber(number));
document.querySelector('#num-4').addEventListener('click', onClickNumber(number));
document.querySelector('#num-5').addEventListener('click', onClickNumber(number));
document.querySelector('#num-6').addEventListener('click', onClickNumber(number));
document.querySelector('#num-7').addEventListener('click', onClickNumber(number));
document.querySelector('#num-8').addEventListener('click', onClickNumber(number));
document.querySelector('#num-9').addEventListener('click', onClickNumber(number));

onClickNumber 함수의 return에 우리가 원하는 함수를 다시 넣어줬다.

화살표함수는 { 다음에 return 이 오면 둘 다 생략 가능하다. 위에 설명되어있다.

이러면 우리가 의도한대로 동작이 잘 된다. onClickNumber 함수 호출시 함수가 오므로 문법상 틀린곳이 없다. 

 

추가적으로 리턴에 넣은 함수는 리스너함수가 되므로 이벤트객체(event)를 받을 수 있다.