자바스크립트에서 마우스 이벤트 처리를 할 때, Nullish Coalescing(널 병합 연산자)를 활용하면 코드를 간결하게 작성할 수 있습니다. Nullish Coalescing은 왼쪽 피연산자가 null 또는 undefined인 경우 오른쪽 피연산자를 반환하는 연산자입니다.

예를 들어, 다음과 같이 컨테이너 요소를 선택하고 클릭 이벤트를 처리하는 코드가 있다고 가정해봅시다:

const container = document.querySelector('.container');
container.addEventListener('click', (event) => {
  const target = event.target || event.srcElement;
  console.log('클릭된 요소:', target);
});

위의 코드에서 마우스 클릭 이벤트 발생 시 클릭된 요소를 출력하는 부분에서 Nullish Coalescing을 활용할 수 있습니다. 아래는 Nullish Coalescing을 사용한 예시 코드입니다:

const container = document.querySelector('.container');
container.addEventListener('click', (event) => {
  const target = event.target ?? event.srcElement;
  console.log('클릭된 요소:', target);
});

이렇게 Nullish Coalescing을 사용하면 event.target이 null 또는 undefined일 경우 event.srcElement을 대체로 사용하여 클릭된 요소를 정확하게 가져올 수 있습니다. 코드를 간결하게 유지하면서도 마우스 이벤트를 처리할 수 있습니다.

마우스 이벤트 처리, 자바스크립트, Nullish Coalescing, 프론트엔드

#mouseevents #nullishcoalescing