[JavaScript/ES6] let 과 this 키워드

안녕하세요, Jerry입니다.

 

ECMAScript 6(저자: 김영보)를 계속 읽고 있습니다. 저번 ES6 포스팅에선 let과 var의 차이점에 대해 이야기를 나눴었는데요. 혹시 let과 var의 차이점 포스팅을 못 보신 분들 중에 궁금하신 분들은 ▼여기 아래 링크로 접속해보세요 :)

·let 키워드와 var 키워드의 차이점 ☞ https://bejerry.tistory.com/7)

 

이번 포스팅에선 this 키워드를 다뤄보려고 합니다.

본 포스팅은 ECMAScript 6(저자: 김영보)를 기반으로 설명을 드리며, 예제 소스도 비슷한 점 안내드리고 포스팅 시작하겠습니다.

 

블록 스코프에서 this 키워드가 참조하는 오브젝트를 한 번 보실까요?

 

let - this

var music = '음악';
console.log(this.music); // 음악

let sports = '축구';
console.log(this.sports); // undefined

 

【실행 결과】 음악 / undefined

 

현재 스코프는 글로벌 오브젝트이고 this가 글로벌 오브젝트를 참조합니다. 글로벌 오브젝트가 window 오브젝트는 아니지만, window 오브젝트로 글로벌 변수에 접근은 가능합니다.

 

let 키워드로 sports 변수를 선언하고 '축구'라는 값을 할당하고 this.sports로 출력을 하면 undefined가 출력됩니다. 왜 var 키워드와 다르게 출력이 되는걸까요? 스코프의 차이점이 있다고는 하나, 현재 예제엔 스코프로 차이점을 설명하는 건 아닌 것 같습니다. 다르게 출력되는 이유는 바로 이어서 적겠습니다.

 

그 이유는 this가 window 오브젝트를 참조하는데 window 오브젝트에선 let 변수가 설정되지 않는다는 의미가 됩니다. 이 점이 var 변수와 let 변수의 차이입니다.

 

사실 책에 이렇게 적혀있었지만 저는 이해를 하지 못했습니다. 그래서 주위에 물어봤는데 이해하는데 도움을 준 친구가 있어서 그 답변을 공유해볼까 합니다.

 

var 키워드의 경우 scope가 window까지 가는거라고 하면, let의 scope는 window에 미치지 못한다.

 

이 말이 정답은 아니겠다만, 이해하는데에는 분명 도움이 되어서 공유한 것이니 혹시 자세히 설명해주실 수 있는 분은 댓글로 자세한 설명 부탁드리겠습니다.

 

+추가

this는 브라우저에서 window 객체에 바인딩 되고, var 키워드는 window 객체에 스코프를 생성하는 반면,

let 키워드는 window 객체에 스코프를 생성하지 않으므로 다른 결과가 나옵니다.