JavaScript의 this 키워드는 이해되지 않으면 매우 까다로울 수 있습니다. 숙련된 개발자라도 쉽게 이해하기 어려운 것 중 하나이지만 일단 이해하고 나면 많은 시간을 절약할 수 있습니다.

이 글에서는 그것이 무엇인지, 다양한 상황에서 어떻게 작동하는지, 그리고 사용할 때 저지르지 말아야 할 일반적인 실수에 대해 알아볼 것입니다.

JavaScript로 이것을 이해하기

이것은 단순히 현재 자바스크립트 코드에서 사용되는 개체를 나타냅니다. 그러나 여기에 까다로운 부분이 있습니다. 이것이 가리키는 내용은 코드에서 이를 사용하는 위치와 방법에 따라 달라질 수도 있습니다. 누군가는 "왜 그렇죠?"라고 물을 수도 있습니다. 음, 이것은 본질적으로 동적입니다. 즉, 해당 값은 함수가 작성될 때가 아니라 함수가 호출될 때 결정됩니다.

전역 및 기능 컨텍스트에서 이

전역적 맥락에서 이것을 사용할 때 종종 전역 객체를 참조하는데, 꽤 이해가 되시나요? 따라서 브라우저 콘솔에 이것을 입력하면 창을 가리킬 것입니다.

함수 내부에서 사용될 때는 상당히 다르게 동작합니다. 예를 들어, "myFunction" 함수를 호출하면 이는 여전히 전역 개체를 가리키지만 Javascript에서 엄격 모드를 사용하면 해당 함수 내에서 정의되지 않은 상태가 됩니다.

네, 꽤 혼란스러우실 겁니다. 그냥 따라오세요. 더 잘 설명드리겠습니다.

이것은 개체에 있습니다.

메소드(객체의 속성인 함수) 내에서 이것을 사용하면, 해당 메소드가 속한 객체를 참조합니다.

예:

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

myObject.greet(); // Output: 'Alice'

여기서 this.name은 'Alice'인 myObject.name을 의미합니다.

이것은 생성자와 클래스에서

생성자: 생성자 함수나 클래스를 사용하여 객체를 생성할 때 생성되는 새 객체를 나타냅니다.

예:

function Person(name) {
    this.name = name;
}

const person1 = new Person('Bob');
console.log(person1.name); // Output: 'Bob'

코드에서 this.name은 새 Person 객체의 name 속성을 나타냅니다.

일반적인 실수와 이를 피하는 방법

이에 대한 일반적인 실수 중 하나는 콜백이나 이벤트 핸들러에서 올바른 값을 잃는 것입니다. 예를 들어 객체의 메서드를 콜백으로 전달하면 더 이상 객체를 참조하지 않을 수 있습니다.

해결책: 이를 방지하려면 화살표 기능을 사용하거나 바인딩하여 올바른 개체를 계속 가리키도록 할 수 있습니다.

const myObject = {
    name: 'Eve',
    greet: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};

myObject.greet(); // Output: 'Eve'

결론

this 키워드는 골치 아픈 일이 될 수 있지만, 주의해야 할 것은 이 키워드를 어떻게, 어디에 호출하느냐에 따라 달라진다는 것입니다. 더 잘하려면 많은 예제를 통해 연습해 보세요. 시간이 지나면 곧 전문가가 될 것입니다.