[JS] 왜 프로미스의 then()에서 this는 undefined인걸까? ( then에서 this를 사용하는 방법 )

 

 

 

 

보통 프로미스에서 비동기통신을 한 뒤 then()에서 가져온 데이터를 정제할 때 this 객체를 이용하면

아래와 같이 undefined가 뜨는 것을 볼 수 있다...

 

샘플코드

<script>

"use strict" // 엄격모드 설정

function thisFun() {

    /*
         thisFun함수내에서의 this객체를 콘솔에 찍음 => Window 객체
    */
    console.log(this); 

    let promiseObj = new Promise((resolve, reject) => {
        
        let proFunc = () => {
            setTimeout(() => {
                resolve("비동기 통신성공");
                reject(new Error('i dont know..'));
            }, 2000);
        }
        
        /*
            promise객체내에서 this객체를 콘솔에 찍음 => Window 객체
        */
        console.log(this); 
        proFunc();

    });

    promiseObj.then(function(){
        /*
            then()에서 this객체를 콘솔에 찍음 => undefined 객체
        */
        console.log(this); 
    })
}

this.thisFun();

</script>

 

결과

 

this객체는 누가 호출했냐에 따라 동적으로 변한다. Window에서 thisFun()을 호출하였으니, thisFun()에서의 this는

Window가 될 것이며, Window객체가 콘솔에 찍히는 것을 확인 할 수 있다..

 

그런데 3번째 라인을 보면 undefined가 콘솔에 찍혔다.

즉 then()안에서는 this가 Window객체를 바라보고 있지 않다는 의미...

 

왜 then()에서는 this객체가 undefined로 뜰까? 구글링을 해본 결과 

 

this객체는 함수를 호출 하는 "녀석"을 가르키게 되는데 then() 안에서는 해당 메서드가 어딘가에 저장 되지만,

호출은 나중에 되기 때문에 undefined가 된다고 한다.. 무슨 말인지 정확히는 모르겠지만, 대충 감이 온다.

메서드가 호출되기전이니 this가 undefined이 찍혔다고 이해된다..

 

그래서 결국 문제는 then()에서 어떻게 this를 써야할까? 이다. 몇가지 방법을 정리해보았다.

방법중에는 then()안에서 사용하는 방법을 알아보자.

 

1. 지역변수에 this를 할당하는 방법

============================================================================

 

함수안에 지역변수를 선언하여, this객체를 할당하는 방법이다. ES6의 화살표 함수가 나오기전에 사용되던 방법으로,

이렇게 하면 then()안에서도 this를 사용할 수 있다.

 

<script>

"use strict" // 엄격모드 설정

function thisFun() {

    var here = this; // 지역변수 here에 this객체를 할당

    let promiseObj = new Promise((resolve, reject) => {
        resolve();
        reject();
        console.log('로직실행');
    });

    promiseObj.then(function(){
        console.log(here); // this객체를 할당받은 here 지역변수를 then안에서 사용
    });

}

this.thisFun();

</script>

 

 

2. 화살표 함수를 활용하는 방법

============================================================================

 

ES6가 나오면서 화살표 함수를 사용하면 쉽게 then() 안에서 this를 사용할 수 있게 되었다.

화살표 함수의 this는 자신이 아닌 상위객체를 바라보기 때문에 thisFun()의 this가 되고, 

thisFun()의 this는 Window이기 때문에 Window객체가 뜰 것이다.

 

<script>

"use strict" // 엄격모드 설정

function thisFun() {

    let promiseObj = new Promise((resolve, reject) => {
        resolve();
        reject();
        console.log('로직실행');
    });

    promiseObj.then(()=>{ // 화살표 함수로 작성
        console.log(this); // this를 콘솔에 찍음 => Window 객체
    })

}

this.thisFun();

</script>

 

 

이렇게 2가지 방법을 알아보았다. 이것 말고도 then()자체를 사용하지 않는

async와 await을 활용하여 동적처리를 하는 방법과, then에서 다른 함수를 호출하여

해당 함수에서 로직을 처리하는 방법도 있을 수 있겠다..