[javascript] 애로우 함수와 이벤트 핸들러

11 Dec 2023

자바스크립트에서 애로우 함수는 함수를 간결하게 작성할 수 있는 편리한 방법으로, 특히 이벤트 핸들러를 정의할 때 유용하다. 이번 글에서는 애로우 함수를 사용하여 이벤트 핸들러를 더 간결하게 작성하는 방법에 대해 알아보겠다.

애로우 함수란?

애로우 함수는 함수를 간결하게 작성할 수 있는 ES6의 문법이다. 기존의 함수 표현식에 비해 간결하고 명확한 구문을 제공하여 코드를 단순화할 수 있다.

애로우 함수의 일반적인 구문은 다음과 같다.

const 함수명 = (매개변수) => { 
    // 함수 내용 
};

예를 들어, 애로우 함수를 사용하여 간단한 덧셈 함수를 작성하면 다음과 같다.

const add = (a, b) => { 
    return a + b; 
};

DOM 요소의 이벤트 핸들러를 설정할 때에도 애로우 함수를 사용하여 간결하게 작성할 수 있다.

예를 들어, 클릭 이벤트에 대한 핸들러를 애로우 함수로 작성하면 다음과 같다.

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
    // 클릭 이벤트 핸들러 내용
});

애로우 함수는 this를 바인딩하지 않는다는 특징이 있다. 이는 일반 함수와의 중요한 차이점으로, 애로우 함수 내에서의 this는 상위 스코프의 this를 그대로 이용한다.

따라서, 이벤트 핸들러 내에서 this를 사용해야 하는 경우에 애로우 함수를 사용하면 더욱 편리하게 코드를 작성할 수 있다.

애로우 함수는 간결한 문법을 통해 함수를 정의할 때 코드를 간소화할 수 있는 장점을 가지고 있다. 이벤트 핸들러 등의 콜백 함수를 정의할 때에도 애로우 함수를 적절히 활용하면 코드를 보다 간결하고 가독성 높게 작성할 수 있다.

애로우 함수를 이용하여 이벤트 핸들러를 작성하면, 코드의 가독성과 유지 보수성을 향상시킬 수 있으며, 개발 작업을 더욱 효율적으로 수행할 수 있다.