JavaScript 애로우 함수와 DOM 조작

소개

이번 포스트에서는 JavaScript의 애로우 함수에 대해 알아보고, 애로우 함수를 사용하여 DOM을 조작하는 방법에 대해 살펴보겠습니다.

애로우 함수는 ES6(ES2015)부터 추가된 새로운 함수 문법입니다. 기존의 함수 표현 방식보다 간결하고 가독성이 좋으며, this의 동작 방식이 다르다는 점이 특징입니다.

// 기존 함수 표현식
function add(a, b) {
  return a + b;
}

// 애로우 함수 표현식
const add = (a, b) => a + b;

애로우 함수는 function 키워드 대신 화살표(=>)를 사용하여 함수를 정의하며, 명시적으로 return을 사용하지 않아도 암묵적으로 값을 반환합니다.

애로우 함수를 사용하여 DOM을 조작할 때, this의 바인딩에 대한 차이를 이해해야 합니다. 일반 함수 내에서 사용하는 this와 애로우 함수 내에서 사용하는 this의 동작 방식이 다르기 때문에 주의가 필요합니다.

예를 들어, 다음과 같이 애로우 함수를 사용하여 이벤트 핸들러를 등록할 수 있습니다.

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  this.classList.toggle('active');
});

위 예제에서 주의할 점은 addEventListener의 콜백 함수로 애로우 함수를 사용했을 때, this가 상위 스코프의 this를 참조한다는 것입니다. 때문에 일반 함수로 이벤트 핸들러를 등록하는 것과는 다르게 동작할 수 있습니다.

애로우 함수는 JavaScript에서 간결하고 가독성이 좋은 함수 표현 방식을 제공합니다. DOM 조작 시에 애로우 함수를 적절히 활용하면 코드를 더욱 간결하게 작성할 수 있지만, this의 동작 방식에 대한 이해가 필요합니다.

이상으로 JavaScript의 애로우 함수와 DOM 조작에 대해 알아보았습니다.

참고 문헌: