JS] 계산기 / higher Order Functions and Passing Functions as Arguments

이 전에 .addEventListener( ) 에서 함수를 인풋으로 사용하는 것을 보았다. 

여기서 .addEventListener( ) 같이 다른 함수를 인풋으로 받는 함수를 higher order function이라고 한다. 

아래는 클릭이 됐을 때 뭘할 지를 나타내는 코드이다.

여기서 주의 할 점은 인풋으로 들어갔을 때의 함수는 괄호( )를 사용하지 않는다는 것이다.

handleClick안에 파라미터가 없다면 괄호를 쓰지 않는다. 

document.querySelector(".drum").addEventListener("click", handleClick ); ⭕️

document.querySelector(".drum").addEventListener("click", handleClick( )); ❌

여기서 괄호를 넣어버리면 클릭시 함수가 실행 되는 것이아니라 페이지 열 때 바로 함수가 실행되어버린다. 

 

 

 

 

 

계산기 만들기

 

더하기 하는 함수

 

곱하기 하는 함수

 

 

higher order function

이렇게 매 번 계산 때마다 함수를 만들어야 하는 엄청난 고통이 따른다.

더 간단하게 하는 방법이 있다. 

higher order function을 사용하면 된다.

 

 

각 계산 함수를 미리 만들어 놓고서 

 

 

또 새로운 함수를 만들어서 파라미터로 (숫자1, 숫자2, 미리 입력한 함수이름)을 받는다. 

이 함수에 인풋이 들어오면 위 입력 받은 함수들을 호출 시킨다.