JS - Block Scope


Block Scope


ES 5変数として使用できるキーワードはvarが一意であり、これは言語レベルで定数変数を提供しないことに関係する.
この問題を解決するために、ES 6は블록 스코프(block Scope)varを発売した.letconstconstif문for문while문およびswitch-case문と同じ文({})を追加のblock scopeと見なします.

/*** let, const ***/
if (true) {
  let a = 10;
  if (true) {
    console.log(a);	// undefined ----------------- 1번
    const a = 20;
  }
  console.log(a);	// 10
}

/****** var ******/
if (true) {
  var a = 10;	
  if (true) {
    console.log(a);	// 10
    var a = 20;
  }
  console.log(a);	// 20
}
上記の例によれば、疑問が生じることがある.문({})block scopeです.「最初の時点では、Scopeに値はありません.外部Scopeから値を検索して10を出力する必要がありますか?」この疑問.
これに対する答えはTDZの概念にある.まず、TDZはTemporal Dead Zoneの略であり、直訳して임시 사망 지역임시 사각 지대となり、一定の意味を持つ抽象概念である.これは内部で相応のスコフ宣言だけを昇格させ、外部参照を阻止しundefinedを返還する.したがって、第1の時点では、const aの宣言部分が対応するscopeの上部に昇格し、aは外部から参照できず、undefinedが出力される.

ちなみに、TDZという用語は、ECMAスクリプトで正式に宣言された概念ではなく、開発者の間では無名の共通用語にすぎません.

this


ES 6では、他の중괄호({})を使用することなく、this 바인딩を使用することなく、중괄호({})をオブジェクト内部で使用してコンテンツを囲むことができる.
/* 기존 */
let value = 0;
let obj = {
  value: 5,
  setValue: function () {
    this.value = 10;
    (function () {
      this.value = 20;	// 여기서 this는 window를 가리킴
    }).call(this);	// 때문에 this 바인딩을 추가로 해줘야함
  }
};

let value = 0;
let obj = {
  value: 5,
  setValue: function () {
    this.value = 10;
     {
      this.value = 20;	// 외부의 this와 동일한 this를 가리킴
     }
  }
};

リファレンス

  • https://www.inflearn.com/course/ecmascript-6-flow