window.addEventListener() 화살표 함수 와 일반 함수 참조 차이

window.addEventListener("click", fireLaser)

또는

window.addEventListener("click",()=> fireLaser())

 

두 방식 모두 JavaScript에서 window 객체의 "click" 이벤트를 처리하기 위해 fireLaser 함수를 호출하는 역할을 합니다. 하지만 두 방식 사이에는 미묘한 차이가 있습니다. 그 차이는 함수 참조와 익명 함수의 사용에 있습니다.

 

1. window.addEventListener("click", fireLaser)

• 여기서는 fireLaser 함수의 참조를 전달합니다.
• 클릭 이벤트가 발생하면 fireLaser 함수가 직접 호출됩니다.
• 클릭 이벤트가 발생할 때 브라우저가 fireLaser를 호출할 뿐, 추가적인 함수 호출이 일어나지 않습니다.

요점:

• 이벤트가 발생하면 fireLaser가 바로 실행됩니다.
• fireLaser가 이벤트 리스너 함수로 직접 사용됩니다.
• 효율적이며 추가적인 함수 호출이 없기 때문에 더 간결합니다.

2. window.addEventListener("click", () => fireLaser())

• 여기서는 익명 화살표 함수(() => {})를 전달하고, 그 안에서 fireLaser()를 호출합니다.
• 클릭 이벤트가 발생하면 익명 화살표 함수가 실행되고, 그 안에서 fireLaser()가 호출됩니다.
• 즉, 이벤트가 발생하면 먼저 익명 함수가 호출되고, 그 익명 함수가 내부적으로 fireLaser()를 호출하는 구조입니다.

요점:

• 이벤트가 발생하면 익명 함수가 먼저 호출되고, 그 익명 함수가 다시 fireLaser()를 호출합니다.
• 익명 함수는 추가적인 호출을 추가하므로 약간의 오버헤드가 있을 수 있습니다.
• 추가적인 코드를 실행하거나 파라미터를 전달해야 할 때 유용합니다. 아래 예제처럼, 클릭 이벤트 전에 추가적인 작업(조건 체크, 로그 출력, 인자 전달 등)을 수행하고자 할 때 유용합니다.

let isTargetLocked = false;

function fireLaser() {
  console.log("Laser fired!");
}

// 익명 함수로 조건 추가
window.addEventListener("click", () => {
  if (isTargetLocked) {
    console.log("Target locked, firing laser...");
    fireLaser(); // 조건이 만족되면 fireLaser 호출
  } else {
    console.log("Cannot fire, target not locked.");
  }
});

window.addEventListener("click", () => {
  console.log("Preparing to fire laser...");
  fireLaser();
});

function fireLaser(target) {
  console.log(`Firing laser at ${target}!`);
}

let target = "Enemy Ship";

window.addEventListener("click", () => {
  fireLaser(target); // 클릭할 때 특정 인자를 전달
});