[JavaScript] 자바스크립트 this 가볍게 이해하기

자바스크립트를 공부하다 보면 객체와 메서드를 다룬 뒤부터는 this라는 키워드가 심심찮게 등장한다. 만약 react 같은 라이브러리를 다루기 시작하면 훨씬 더 this라는 키워드를 자주 보게 되는데, 과연 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의 활용

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

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

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

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

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

const user1 = { name: 'bigtop' };
const user2 = { name: 'bigmac' };

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

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

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

이렇게 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를 활용하는 것이 좋다.