자바스크립트 this 키워드 완벽 가이드 함수와 메서드 화살표 함수 이벤트 핸들러까지

🔑 일반 함수에서의 this

자바스크립트에서 일반 함수 내부의 this 값은 호출 방식에 따라 달라집니다.
전역 범위에서 단순히 함수를 호출한다면, 엄격 모드(strict mode)에서는 undefined가 되고, 비엄격 모드에서는 전역 객체(브라우저의 window, Node.js의 global)를 가리키게 됩니다.
이 차이 때문에 환경에 따라 의도하지 않은 결과가 나올 수 있죠.

특히 일반 함수는 독립적으로 실행될 때와 객체의 메서드 형태로 실행될 때 this의 결과가 달라집니다.
아래 예제를 보면 그 차이를 쉽게 이해할 수 있습니다.

function showThis() {
    console.log(this);
}

showThis(); // 브라우저: window, strict 모드: undefined

위와 같이 단순 호출하면 this는 전역 객체 또는 undefined를 출력합니다.
이런 특징은 초보자가 자주 헷갈리는 부분으로, 객체와 함께 사용하지 않는다면 원하는 결과를 얻기 어렵습니다.

💬 일반 함수의 this는 호출한 방식에 따라 달라집니다. 단순히 “현재 객체”라고 기억하기보다는 호출 맥락을 함께 이해해야 오류를 줄일 수 있습니다.

또한 call(), apply(), bind() 같은 메서드를 사용하면 원하는 대상을 this로 강제로 지정할 수도 있습니다.
이 기능은 콜백 함수나 이벤트 처리에서 특히 유용하게 쓰입니다.

🏠 객체 메서드에서의 this

객체 내부에서 메서드를 정의하고 호출할 경우 this는 해당 메서드를 소유한 객체를 가리킵니다.
즉, 메서드가 호출된 시점의 주체가 누구냐에 따라 this가 결정됩니다.
이 특성을 이해하면 객체 지향적으로 코드를 작성할 때 유용하게 활용할 수 있습니다.

const user = {
    name: "홍길동",
    greet: function() {
        console.log("안녕하세요, 저는 " + this.name + "입니다.");
    }
};

user.greet(); // "안녕하세요, 저는 홍길동입니다."

위 예제에서 greet() 메서드의 this는 user 객체를 가리키며, 따라서 name 속성에 접근할 수 있습니다.
하지만 메서드를 다른 변수에 할당해 호출하면 상황이 달라집니다.

const fn = user.greet;
fn(); // undefined (strict 모드) 또는 전역 객체에서 name 탐색

이처럼 객체에서 분리된 함수는 더 이상 원래 객체와 연결되지 않기 때문에 this가 달라집니다.
이 문제를 해결하려면 bind() 메서드나 화살표 함수를 적절히 활용해야 합니다.

🎯 이벤트 핸들러에서의 this

이벤트 핸들러에서의 this는 브라우저 환경과 바인딩 방식에 따라 다르게 동작합니다.
가장 기본적으로는 이벤트가 바인딩된 DOM 요소를 가리킵니다.
따라서 버튼이나 입력창에 이벤트 리스너를 붙이면, 핸들러 내부에서 this는 해당 요소를 참조하게 됩니다.

const button = document.querySelector("button");

button.addEventListener("click", function() {
    console.log(this); // 클릭된 button 요소
});

위 예제에서는 클릭 이벤트가 발생한 버튼 자체가 this가 됩니다.
이러한 특징은 여러 개의 버튼을 동적으로 제어할 때 유용하게 활용됩니다.

• 🖱️일반 함수 핸들러 → this = 이벤트가 걸린 요소
• ⚡화살표 함수 핸들러 → 상위 스코프의 this를 그대로 사용
• 📌bind()를 통해 원하는 객체를 this로 지정 가능

단, 이벤트 핸들러를 화살표 함수로 작성하면 this가 바뀌지 않고 상위 스코프의 값을 그대로 사용하게 됩니다.
이 점은 종종 헷갈리는 부분이므로 코드 작성 시 의도에 맞는 함수 형태를 선택하는 것이 중요합니다.

⚡ 화살표 함수에서의 this

화살표 함수는 일반 함수와 달리 this를 자체적으로 바인딩하지 않습니다.
즉, 화살표 함수 내부에서의 this는 자신을 둘러싼 상위 스코프의 값을 그대로 참조합니다.
이 특징 덕분에 콜백 함수나 이벤트 처리에서 원하는 컨텍스트를 유지하는 데 매우 유용합니다.

const user = {
    name: "이몽룡",
    greet: function() {
        const arrow = () => {
            console.log("안녕하세요, " + this.name);
        };
        arrow();
    }
};

user.greet(); // "안녕하세요, 이몽룡"

위 코드에서 화살표 함수 arrow()는 자신을 감싸고 있는 greet() 함수의 this를 그대로 상속받습니다.
따라서 user 객체를 올바르게 참조할 수 있게 됩니다.

💬 화살표 함수의 this는 “렉시컬 this”라고 부르며, 선언된 위치의 상위 스코프에 고정됩니다.

하지만 이 특성은 한편으로 제약도 있습니다.
예를 들어 객체의 메서드를 화살표 함수로 정의하면, 메서드 호출 시에도 this가 객체를 가리키지 않고 전역 스코프에 묶여 버립니다.

const person = {
    name: "성춘향",
    greet: () => {
        console.log("안녕하세요, " + this.name);
    }
};

person.greet(); // "안녕하세요, undefined"

💡 this 키워드 사용 시 주의할 점

자바스크립트에서 this는 매우 유연하게 동작하는 동시에 혼란을 일으키는 대표적인 키워드입니다.
일반 함수, 객체 메서드, 이벤트 핸들러, 화살표 함수 등 각 맥락에서 동작이 다르기 때문에 정확히 이해하지 못하면 버그가 발생하기 쉽습니다.
따라서 몇 가지 주의사항을 반드시 숙지해 두어야 합니다.

• 🔍엄격 모드(strict mode)에서는 일반 함수 호출 시 this가 undefined가 됩니다.
• 🔗메서드를 다른 변수에 할당해 호출하면 원래 객체와의 연결이 끊겨 this가 달라집니다.
• ⚡화살표 함수는 this를 상위 스코프에 고정하기 때문에 메서드 정의에는 적합하지 않습니다.
• 🖱️이벤트 핸들러에서 화살표 함수를 쓰면 this가 DOM 요소를 가리키지 않습니다.
• 📌call(), apply(), bind()를 통해 원하는 객체로 this를 강제로 지정할 수 있습니다.

개발 실무에서는 이러한 특성을 올바르게 이해하고, 상황에 따라 적절한 함수 형태를 선택하는 것이 중요합니다.
특히 팀 프로젝트에서는 코드 일관성을 위해 this 사용 규칙을 미리 정해두는 것도 좋은 방법입니다.

❓ 자주 묻는 질문 (FAQ)