JavaScript의 this: 헷갈림을 극복하자!

JavaScript를 처음 배우다 보면 this라는 키워드에 자주 마주치게 됩니다. 그런데 this의 동작 방식은 상황에 따라 달라지기 때문에 혼란을 겪습니다. 이번 글에서는 Javascript의 this가 무엇인지, 다양한 상황에서 어떻게 동작하는지, 그리고 이를 명확히 이해하는 방법을 정리해보겠습니다.

---

this란 무엇인가?

• this는 "현재 실행 문맥(Context)"을 나타내는 키워드입니다.
• JavaScript에서 this는 코드가 어떻게 호출되었는지에 따라 참조하는 대상이 달라집니다.
• 즉, this는 항상 "누가 호출했느냐"에 따라 값이 결정됩니다.

---

this가 동작하는 다양한 상황

1. 전역 컨텍스트

전역 범위에서 this는 브라우저에서는 전역 객체(window)를, Node.js에서는 global 객체를 참조합니다.

console.log(this); // 브라우저: window, Node.js: {}

 

2. 함수 내부에서의 this

• 일반 함수에서 this는 기본적으로 전역 객체를 참조합니다.
• 하지만 strict mode(엄격 모드)에서는 undefined가 됩니다.

 

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

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

3. 객체의 메서드에서의 this

객체의 메서드를 호출할 때 this는 메서드를 호출한 객체를 참조합니다.

const obj = {
    name: "Alice",
    greet: function () {
        console.log(this.name);
    }
};

obj.greet(); // "Alice"

하지만, 메서드를 변수에 할당하거나 전달하면 this가 전역 객체를 참조하게 됩니다.

const greet = obj.greet; greet(); // undefined (strict mode에서는 undefined)

4. 생성자 함수에서의 this

생성자 함수에서 this는 새로 생성된 객체를 참조합니다.

function Person(name) {
    this.name = name;
}
    
    
const alice = new Person("Alice");
console.log(alice.name); // "Alice"

주의: new 키워드를 사용하지 않으면 전역 객체를 참조할 수 있으므로 주의가 필요합니다.

5. 화살표 함수에서의 this

화살표 함수는 일반 함수와 달리 고유한 this를 가지지 않습니다.
대신, 화살표 함수가 정의된 상위 스코프의 this를 그대로 사용합니다.

const obj = {
    name: "Alice",  
    greet: function () {
        const arrowFunc = () => console.log(this.name);
        arrowFunc();
    }
};


obj.greet(); // "Alice"

6. 이벤트 핸들러에서의 this

DOM 이벤트 핸들러에서의 this는 이벤트가 발생한 DOM 요소를 참조합니다.

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

하지만, 화살표 함수를 사용하면 this는 상위 스코프의 this를 참조합니다.

document.querySelector("button")
        .addEventListener("click", () => { 
            console.log(this); // 브라우저의 window 객체
        });

 

---

this 명확히 다루는 방법

1. • bind: 함수에 this를 영구적으로 설정합니다.
   • call, apply: 함수 호출 시 this를 지정합니다.bind, call, apply로 this를 명시적으로 설정하기
2. 화살표 함수로 상위 this 유지하기
   • 화살표 함수는 this를 상속받기 때문에, 복잡한 상황에서 유용합니다.
3. 객체 메서드 사용 시 주의
   • 메서드를 변수에 할당하거나 이벤트 핸들러에 직접 전달하지 않도록 주의합니다.
   • 필요할 경우 bind를 사용하세요.

const obj = { name: "Alice" };
function greet() {
    console.log(this.name);
}

const boundGreet = greet.bind(obj);
boundGreet(); // "Alice"

---

결론

JavaScript에서 this는 코드의 호출 문맥에 따라 동작이 달라지기 때문에 혼란스러울 수 있습니다.
하지만 다양한 상황에서의 동작 방식을 명확히 이해하고, 적절한 방법으로 컨텍스트를 관리한다면 this를 더 이상 두려워할 필요가 없습니다.

this를 다루는 기본 개념과 패턴을 익히고, 실전에서 조금씩 적용해 보세요! 🚀

---

위 글은 여러분이 JavaScript의 this를 마스터하는 데 도움을 주기 위해 작성되었습니다. 궁금한 점이 있다면 댓글로 남겨주세요! 😊