자바스크립트의 this 키워드 제대로 이해하기

자바스크립트의 this 키워드 제대로 이해하기

 

자바스크립트를 학습할 때 많은 개발자들이 혼란스러워하는 개념 중 하나가 바로 this 키워드입니다. this는 자바스크립트에서 매우 중요한 역할을 하지만, 문맥에 따라 다르게 동작하므로 제대로 이해하는 것이 필수적입니다. 이번 글에서는 자바스크립트의 this 키워드가 무엇인지, 어떻게 동작하는지, 그리고 각각의 상황에서 this가 가리키는 것이 무엇인지를 명확하게 설명하겠습니다.

this란 무엇인가?

자바스크립트에서 this는 현재 실행되는 문맥(context)에서의 객체를 가리킵니다. 즉, this는 함수를 호출하는 방식에 따라 다른 객체를 참조할 수 있습니다. 기본적으로 this는 객체 내에서 메서드를 호출할 때 그 메서드를 소유하고 있는 객체를 참조합니다. 하지만, 함수가 전역 컨텍스트에서 호출될 때는 this가 전역 객체(window 또는 global)를 가리킵니다. 이처럼 this는 상황에 따라 다르게 동작하기 때문에 사용 시 주의가 필요합니다.

일반 함수와 this

일반 함수에서 this는 함수를 호출한 방식에 따라 달라집니다. 예를 들어, 객체의 메서드로 호출될 경우 this는 그 객체를 참조하지만, 전역 함수로 호출될 때는 this가 전역 객체를 참조하게 됩니다. 다음 예시를 통해 이해해봅시다: const person = { name: 'John', sayName: function() { console.log(this.name); } }; person.sayName(); // John 여기서 this는 person 객체를 가리킵니다. 하지만 일반 함수로 호출하면 다르게 작동합니다. function sayHello() { console.log(this); } sayHello(); // 전역 객체 (브라우저에서는 window)

화살표 함수와 this

화살표 함수는 this를 처리하는 방식이 일반 함수와 다릅니다. 화살표 함수는 this를 자신이 정의된 스코프(정의된 위치)의 this를 그대로 상속받습니다. 즉, 화살표 함수는 자신의 this를 새로 바인딩하지 않고, 부모 스코프의 this를 사용합니다. 이를 통해 this 키워드를 보다 직관적으로 사용할 수 있습니다. const person = { name: 'Jane', sayName: function() { const innerFunc = () => { console.log(this.name); }; innerFunc(); } }; person.sayName(); // Jane 이 코드에서 innerFunc는 화살표 함수이기 때문에 this가 상위 스코프인 person 객체를 참조합니다.

이벤트 핸들러에서의 this

이벤트 핸들러에서 this는 이벤트가 발생한 HTML 요소를 가리킵니다. 즉, 이벤트가 발생한 대상이 this가 됩니다. 이는 DOM에서의 이벤트 처리를 할 때 유용하게 사용됩니다. const button = document.querySelector('button'); button.addEventListener('click', function() { console.log(this); // 클릭된 버튼 요소 }); 이 코드에서 this는 클릭된 버튼 요소를 참조하게 됩니다. 그러나 화살표 함수를 사용하면 this는 이벤트가 아닌 상위 스코프의 this를 참조하므로 주의가 필요합니다.

명시적으로 this 바인딩하기

자바스크립트에서는 this를 명시적으로 설정할 수 있는 방법이 있습니다. call(), apply(), bind() 메서드를 사용해 this가 가리키는 객체를 명시적으로 지정할 수 있습니다. call()과 apply()는 함수를 즉시 호출하면서 this를 설정할 수 있고, bind()는 this가 지정된 새로운 함수를 반환합니다. function greet() { console.log(this.name); } const person1 = { name: 'Alice' }; const person2 = { name: 'Bob' }; greet.call(person1); // Alice greet.apply(person2); // Bob const greetPerson1 = greet.bind(person1); greetPerson1(); // Alice 이 코드를 통해 call(), apply(), bind()를 사용하여 this를 명확하게 설정할 수 있습니다.

결론

자바스크립트의 this 키워드는 함수가 호출되는 방식에 따라 다른 객체를 참조하는 강력한 도구입니다. 일반 함수, 화살표 함수, 이벤트 핸들러, 명시적인 바인딩 등 다양한 상황에서 this의 동작을 이해하는 것이 중요합니다. 이를 통해 코드의 동작을 명확히 파악하고, 더 효율적이고 깔끔한 자바스크립트 코드를 작성할 수 있을 것입니다. this 개념을 정확히 익혀 다양한 자바스크립트 프로젝트에서 활용해보세요.