자바스크립트 this 키워드는 무엇을 가리키나

자바스크립트 this 키워드에 대해서 알아보겠습니다. 이 키워드는 경우에 따라서 가리키는 대상이 다릅니다.

 

- 일반 함수 호출 시에는 전역 객체를 가리킵니다. 즉, window 객체를 가리킵니다.

- 메서드 호출 시에는 메서드를 호출한 객체를 가리킵니다.

 

한 가지 기억해야 하는 점은 this keyword는 해당 키워드가 정의된 함수/메서드가 실제로 호출될 때까지는 값이 할당되지 않는다는 것입니다.

 

 

콘솔을 열고 this 키워드를 출력해보면 다음과 같이 window 객체를 확인할 수 있습니다.

 

console.log(this);

 

 

 

일반 함수 안에서 호출하면 무엇을 가리키는지 보겠습니다. 

 

function greeting(name) {
    console.log(`안녕하세요. 저는 {name}입니다.`);
    console.log(this);
}

greeting('Jack');

 

 

일반 함수 안에서 호출되었기 때문에 앞서 얘기한 것처럼 window 객체를 가리킵니다. 이 함수가 붙어있는 객체가 전역 객체인 window인 점을 생각하면 당연한 결과 같습니다.

 

 

이번에는 객체를 하나 만들고 해당 객체의 메서드 안에서 this 키워드를 호출해 보겠습니다.

 

let person = {
    name: 'Amy',
    age: '28',
    job: 'teacher',
    greeting: function() {
        console.log(this);
    }
}

person.greeting();

 

 

이번에는 this 키워드가 메서드를 호출한 객체를 가리키는 것을 확인할 수 있습니다. 그렇기 때문에 this 키워드를 이용해서 이 객체의 프로퍼티에 접근할 수 있는 것입니다.

 

let person = {
    name: 'Amy',
    age: '28',
    job: 'teacher',
    greeting: function() {
        console.log(`안녕하세요. 저는 ${this.name}입니다.`);
    }
}

person.greeting();