[javascript] 함수와 함수의 호출, 고차함수 편

1. 함수와 함수의 호출

const add = (a, b) => a + b;

function calculator(func, a, b) {
	return func(a, b)
}

add (3, 5);

calculator(??, a, b);

calculator 함수의 파라미터 ??에 적절한 것은 무엇일까?

1) add

2) add()

 

Tip) 함수호출이 아닌 함수가 와야한다. 선언된 함수 뒤에 ()라는 호출을 붙이게 되면, 위와 같은 경우는 undefined + undefined 라는 리턴값이 온다고 생각하면 헷갈리지 않는다.  ex) calculator(undefined + undefined , a, b)

 

---

2. 고차 함수

const onClick = () => () => {
	console.log('foo');
}

위에 onClick 함수는 고차함수의 예시이다.

헷갈릴때는 아래와 같이 바꿔줄 수 있어야한다.

const onClick = () => {
	return () => {
    	console.log('foo');
    }
}

---

Tip) 고차함수의 경우 함수를 리턴하기 때문에 addEventListener안에 onClick()형태로 함수호출하는 것이 가능하다.

파라미터가 존재할때, 더 헷갈리는 경우가 생긴다. event 파라미터로 위치 또한 신경써야하는 부분이다.

 

나쁜예

const onClick = (event) => () => {
	console.log('bar');
}

document.querySelector('#header').addEventListener('click', onClick());

//onClick 리턴 값을 직접 넣어본다.
//event가 들어오지 않는다.
//잘못됨 확인
document.querySelector('#header').addEventListener('click', () => {
	console.log('bar');
});

 

좋은예

const onClick = () => (event) => {
	console.log('bar');
}

document.querySelector('#header').addEventListener('click', onClick());

document.querySelector('#header').addEventListener('click', (event) => {
	console.log('bar');
});