2023-07-05 TIL

[js] 이벤트 리스너와 익명 함수

참고 문서

❓ 이벤트? 이벤트 리스너?

js 코드를 살펴보다보면 addEventListener라는 친구를 심심찮게 볼 수 있다.
이벤트 리스너는 뭐고, 또 JS에서 이벤트는 뭘 말하는걸까?

💬 이벤트

(우리가 지금) 프로그래밍하고 있는 시스템에서 일어나는 사건이나 발생

event라는 기존 사전적 의미와 크게 다르지 않다.

💬 이벤트 리스너

이벤트가 발생되면 실행되는 코드 블럭. 이벤트 핸들러라고 부르기도 함

이런 이벤트 리스너를 특정 동작을 할 때 실행시켜주는 게 addEventListener다!

<!-- html -->

<button id="btn">버튼</button>

// javascript

document.getElementById("btn").addEventListener("click", goHome)

function goHome() {
  console.log("안녕!")
  window.location.replace("index.html")
}

이런식으로 특정 object에 어떠한 event를 발생시켰을 때,
특정 코드가 동작하게 지정해주는 것이다!

🔎 이벤트 리스너와 익명함수

참고 블로그

이벤트 리스너에는 위의 예시처럼 선언되어진 일반 함수를 넣어줄 수도 있지만,
익명함수를 사용해 처리할 수도 있다!

익명함수 : 재사용하지 않을 한 번만 사용 될 함수. 변수 이름에 담을 수 있음

// 익명함수는 변수 이름에 담아줄 수 있다.

const hello = function() {
  console.log("hi!")
}

// 이벤트 리스너에서도 사용 가능하다.

document.getElementById("btn").addEventListener("click", function() {
  console.log("안녕!")
  window.location.replace("index.html")
})

💥 일반 함수 vs 익명 함수

이벤트 리스너를 달아줄 때, 각 함수별로 사용의 장단점이 있다.

💬 일반함수

👍

• 재사용성 높음 (다른 이벤트 리스너에서도 사용 가능)
• 디버깅 용이 (함수 이름으로 쉽게 식별 가능)

👎

• 가독성 나쁨
• 코드가 복잡해짐

💬 익명함수

👍

• 간단한 처리 시 함수 별도 정의 필요 X
• 가독성 좋음

👎

• 재사용성 낮음 (재사용 시 다시 똑같은 코드 적어줘야 함)
• 디버깅 어려움 (함수 추적 까다로움)

.

각자 마다의 장점과 단점이 있어서 나의 경우에는

간단한 실행(1~2줄)의 경우 익명 함수를 사용하고,
복잡한 실행의 경우 일반 함수를 사용하고 있다.