Scope 관련 질문 입니다.

자바스크립트 중고급: 엔진 핵심

해결된 질문

작성

165

안녕하세요.

항상 질문에 대해 자세하게 답변해주시는 점 감사합니다.

강의를 한 번 다시 들으면서 JavaScript를 정리하다가 function scope 관련해서 궁금한 점이 생겨 글을 올리게 되었습니다.

const globalValue = 'global variable';

const test = {

  value: "function's value",

  getValue: function() {

    console.log('this: ', this);

    console.log('value: ', this.value);

    function innerFunc() {

      console.log("Inner Function's this: ", this);

}

    const arrowFunc = () => {

      console.log("Arrow Function's this: ", this);

};

    innerFunc();

    arrowFunc();

},

};

test.getValue();

[코드결과]

this: {value: "function's value", getValue: ƒ}
value: function's value
Inner Function's this: Window {0: global, 1: global, 2: global, 3: Window, 4: global, …}
Arrow Function's this: {value: "function's value", getValue: ƒ}

1️⃣ 위의 코드에서 getValue 함수 내부에 있는 innerFunc의 this는 왜 전역 객체를 참조하는지 궁금합니다.

조사를 해보니 "JavaScript에서는 함수를 호출하면, 해당 함수 내부 코드에서 사용된 this는 전역 객체에 바인딩 된다." 라는 정보를 보게 되었는데, 논리적으로 접근하려고 해도 왜 이렇게 되는건지 이해가 안됩니다. 어쩌면 단순히 생각해서 그렇게 만들어졌기 때문인가요?

const setTimeoutTest = {
  func: function() {
    setTimeout(function() {
        console.log(this);
    }, 1000);
  },
};

2️⃣ 위의 코드에서도 this는 전역 객체(window)를 반환하는데, 저는 처음엔 setTimeout이 전역객체에 선언되어 있기 때문이라고 생각했습니다. 그렇다면 사실은 1️⃣번 질문과 마찬가지로 함수 내부의 함수이기 때문일까요?

답변 주시면 감사하겠습니다.

javascript

답변 3

김영보

지식공유자

// 1️⃣ 위의 코드에서 getValue 함수 내부에 있는 innerFunc의 this는 왜 전역 객체를 참조하는지 궁금합니다. 조사를 해보니 "JavaScript에서는 함수를 호출하면, 해당 함수 내부 코드에서 사용된 this는 전역 객체에 바인딩 된다."

1. 이것은 맞지 않습니다.
1) test.getValue() 형태로 호출했을 때, getValue() 함수에서 this는 test 오브젝트를 참조합니다.
2) test 오브젝트를 작성하지 않고 글로벌 함수로 함수를 작성했을 때, 함수에서 this는 window 오브젝트를 참조합니다.
3) 함수 안에 함수를 작성한 케이스는 아래에 작성되어 있습니다.
------------

2. 함수 안에 함수를 작성하는 것은 작성한 코드처럼 헛점이 있습니다.
1) innerFunc()을 getValue()와 같은 레벨(단계)로 작성하면 this를 유연하게 사용할 수 있습니다.
2) "use strict";를 작성하면 this가 undefined를 참조합니다.
이것은 test.getValue()처럼 innerFunc() 앞에 오브젝트를 작성해야 하는데 작성하지 않았기 때문입니다.
이런 점에서도 함수 밖으로 빼내어 함수를 선언하는 것이 좋습니다.
3) "use strict";를 작성하지 않았을 때, innerFunc() 앞의 오브젝트는 window 오브젝트가 됩니다.
그래서 앞 코드에서 window 오브젝트를 참조한 것입니다.
이런 점이 있으므로 "use strict";를 코드 파일의 첫 라인에 작성하는 것이 좋습니다.

------------
3. 화살표 함수는 실행되는 환경에 따라 this 참조가 다릅니다. 이에 대해서는 "자바스크립트 ES6+ 기본" 과정에서 다루고 있습니다. 여기서 이를 위한 기본 내용을 다루는 것은 한계가 있으므로 강좌를 참조하기 바랍니다.

------------
2️⃣ 위의 코드에서도 this는 전역 객체(window)를 반환하는데, 저는 처음엔 setTimeout이 전역객체에 선언되어 있기 때문이라고 생각했습니다. 그렇다면 1️⃣ 번 질문과 마찬가지로 함수 내부의 함수이기 때문일까요?

4. setTimeout() 함수는 window 오브젝트의 함수입니다. 즉, window.setTimeout() 형태로 호출해야 하지만 window 오브젝트는 생략해도 호출이 되므로 window 오브젝트를 생략한 것입니다.
window.setTimeout() 형태로 호출한 것이 되므로 setTimeout() 함수 안에서 this는 window 오브젝트를 참조하게 됩니다.

------------
5. 위 내용을 바탕에 두고 강좌의 this와 관련된 부분을 들으면서 정리하시기 바랍니다. this 키워드는 확실하게 논리를 정리해 두어야 함수에서 this 사용과 ES6의 class를 정확하게 사용할 수 있습니다.

김영보

지식공유자

바보같은 질문아닙니다. 한 번은 정리해야 할 사항입니다.

taylous

질문자

답변 정말 감사합니다.

강사님 답변을 보고나니 바보 같은 질문을 한 것 같습니다. 학습하고 이해했던 내용인데 한 번 잘 못된 생각에 빠지니 헤어나오기가 힘드네요. :(

답변 다시 한 번 너무나 감사합니다.

인프런 커뮤니티 질문&답변

Scope 관련 질문 입니다.