자바스크립트

[인간 JS엔진 되기] 1-1. 함수와 함수의 호출

옴악핫세 2023. 12. 19. 10:57

함수와 함수의 호출 차이는?

함수의 호출 표현은 그냥 함수의 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