함수 참조 vs 실행 예제

1. setTimeout에서의 차이

function greet() {
  console.log("👋 Hello from setTimeout!");
}

// ✅ 함수 참조: 2초 뒤에 실행됨
setTimeout(greet, 2000);

// ❌ 함수 실행: 즉시 실행되고, 반환값(undefined)이 타이머로 등록됨
setTimeout(greet(), 2000); // 바로 "👋 Hello from setTimeout!" 출력됨, 2초 뒤엔 아무 일도 안 일어남

2. 이벤트 핸들러에서의 차이

function handleClick() {
  console.log("🖱️ Button clicked!");
}

const button = document.querySelector("button");

// ✅ 함수 참조
button.addEventListener("click", handleClick);

// ❌ 함수 실행 (이벤트 등록 시 실행됨)
button.addEventListener("click", handleClick()); // 페이지 로드시 즉시 실행되고 undefined가 핸들러로 등록됨

3. 콜백 함수 전달에서의 차이

function process(callback) {
  console.log("Start");
  callback();
  console.log("End");
}

function sayHi() {
  console.log("👋 Hi!");
}

// ✅ 함수 참조
process(sayHi); 
// 출력: Start → 👋 Hi! → End

// ❌ 함수 실행
process(sayHi()); 
// 출력: 👋 Hi! → TypeError: callback is not a function

결론