[JavaScript] this 이해하기

this?

 

this는 함수에서 나타나는데, this키워드를 사용하면 그 함수를 호출한 주체(객체)를 가리키게 된다.

쉽게 말해서 '누가 이 함수를 불렀느냐'가 된다.

 

const myObject = {
    printThis: function() {
        console.log(this);
    }
}

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

myObject.printThis(); // {printThis: ƒ}
printThis(); // Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

 

위 코드를 살펴보면, this를 콘솔에 출력하는 printThis라는 함수가 두 개 선언되어 있다.

첫 번째는 myObject의 메서드로 선언되어있고 두 번째는 그냥 일반 함수인데,

아랫부분에 두 함수를 실행한 결과를 살펴보면, 메서드로 실행된 함수의 this는 해당 함수를 호출한 주체,

즉 myObject 객체가 출력되고, 두 번째의 경우에는 window 객체가 출력이 되었다.

window 객체는 아직 정리한 내용이 없지만,

간단하게 그냥 브라우저에서 동작하는 자바스크립트 코드에서 가장 최상위에 위치한 객체라고 할 수 있다.

 

 

 

 

this의 활용

 

일반적으로 this는 메서드에서 자주 활용된다.

 

const user = {
    name: 'ddory',    
    sayHi: function () {
        const msg = `안녕하세요 저는 ${this.name}입니다.`;
        console.log(msg);
    },
}

user.sayHi(); // 안녕하세요 저는 ddory입니다.

 

 

this는 이렇게 메서드로 활용될 때, 해당 객체의 프로퍼티들을 다양하게 활용할 수 있도록 해준다.

그런데 이쯤되면 어느 정도 유추할 수 있듯이 이 this라는 녀석은 언제, 누가 함수를 호출했는지에 따라 상대적으로 그 주체가 변하기 때문에 아래의 코드처럼 활용할 수도 있다.

 

 

const user1 = { name: 'sory' };
const user2 = { name: 'dory' };

function sayThisName() {
    const msg = `안녕하세요 저는 ${this.name}입니다.`;
    console.log(msg);
}

user1.sayHi = sayThisName;
user2.sayHi = sayThisName;

user1.sayHi(); // 안녕하세요 저는 sory입니다.
user2.sayHi(); // 안녕하세요 저는 dory입니다.

 

 

 

이렇게 this.name을 출력하는 sayThisName을 따로 선언하고 각각 user1과 user2의 메서드로 추가해 주고 있는데,

이렇게 해도 메서드가 호출될 때 해당 객체의 프로퍼티를 받아오기 때문에 똑같은 함수를 받아왔지만

다른 결과가 나타나는 걸 확인할 수 있다. 

 

이렇게 this는 함수가 실행될 때 그 값이 결정되기 때문에 다양하게 활용할 수 있다.

 

 

 

주의사항

 

this를 활용할 떄 주의해야 할 부분은 바로 화살표 함수이다.

화살표 함수는 this를 외부에서 불러온다. 

 

const myObject = {
    printThis: () => {
        console.log(this);
    }
}

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

myObject.printThis(); // Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
printThis(); // Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

 

 

처음에 살펴본 코드에서 myObject의 메서드인 printThis를 화살표 함수로 바꿔보았다.

결과로 myObject가 아니라 window 객체를 출력하는걸 확인할 수 있는데 뭔가 단점처럼 느껴질 수도 있지만

상황에 따라서 외부의 값을 가져올 때는 오히려 화살표 함수를 활용할 수 있기 때문에,

여러 가지 상황을 고려해서 함수의 형태를 결정하고 this를 활용하는 것이 좋다.