함수와 함수의 호출 차이는?
함수의 호출 표현은 그냥 함수의 return값으로 생각하면 됨
그렇기 때문에 아래 코드 예제에서 add()를 넣으면 a+b한 결과가 반환되므로 TypeError가 발생함
const add = (a,b) => a+b;
//const add = (a,b) => {a+b}; 이렇게 선언하면 {a+b}가 함수의 return이 아니라 함수의 body로 인식
//함수의 return으로 선언하려면 ({a+b}) 처럼 괄호 () 로 return할 객체를 감싸야함
function calculator(func, a,b) {
return func(a,b);
}
console.log(add(3,5)) //8
console.log(calculator(add,3,5)) // 8
//calculator 함수의 매개변수에 add 함수를 넣음
console.log(calculator(add(),3,5)) // TypeError, func is not a function
//함수의 매개변수에 add() 호출을 넣음
//함수와 함수 호출은 차이가 있음!
하나더!
const onClick = () => {
console.log('hello');
}
document.querySelector('#header').addEventListener('click', onClick()) //onClick()의 return값은 undefined
//하지만 만약 아래처럼 하면 onClick2의 return 값이 존재
const onClick2 = () => () => {
console.log('hello');
}
//onClick2를 풀어서 쓰면 아래와 같이 됨
const onClick3 = () => {
return () => {
console.log('hello');
}
}
참고
https://www.youtube.com/watch?v=eXQQipdastk&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3
'자바스크립트' 카테고리의 다른 글
[인간 JS엔진 되기] 2-1. 비동기 - 콜백, promise, async/await (1) | 2023.12.20 |
---|---|
[인간 JS엔진 되기] 1-4,5. 스코프 체인 및 호이스팅 (0) | 2023.12.19 |
[인간 JS엔진 되기] 1-3. 호출 스택 분석 (0) | 2023.12.19 |
함수 호출 방식에 의해 결정되는 this (0) | 2023.09.05 |
프로토타입 기반의 상속 (0) | 2023.09.04 |