JavaScriptのスコープのメモ

関数によるスコープ

関数内{}で定義した変数は外から参照できない。

function h() {
  const x = 1;
  console.log(x); // 1
}

h();
console.log(x); // Error

関数の仮引数も外から参照できない。

function h(i) {
  console.log(i); // OK
}
h('OK');
console.log(i); // Error

ブロックによるスコープ

ブロックもスコープを作成する。 ブロック内で宣言された変数は外から参照することができない。

{
  const x = 1;
  console.log(x); // 1
}

console.log(x); // Error

ifやforなども同じ働きをする。
※forはループごとに変数が宣言される。

const x = [1];
for (const i of x) {
  console.log(i); // 1
}

if (1 in x) {
  const y = true
  console.log(y); // true
}

console.log(i); // Error
console.log(y); // Error

ブロックのネスト

外のブロックで宣言された変数は内側のブロックでも参照可。 内側のブロックで参照できる変数がなければ、外側のブロックへ同じ名前の変数を確認しに行き、あればそれを参照する。

{
  const x = 1;

  {
    console.log(x); // x
  }

}

内側、外側に同じ変数名で宣言されていた場合、同じブロックの変数を優先的に参照する。

{
  const x = 1;
  
  {
    const x = 2;
    console.log(x); // 2
  }

  console.log(x); // 1
}

グローバルスコープ

関数にもブロックにも属さない変数は暗黙的にグローバルスコープ(どこからでも参照可能)に属し、グローバル変数と呼ばれる。

const x = 1;
console.log(x);

グローバルスコープには自分で宣言した変数以外にも自動的に定義されるオブジェクトがある。(undefined, document, module, consoleなど) これらのオブジェクトと同じ名前の変数を宣言すると参照できなくなってしまうため注意が必要。

const x = 1;
const console = 1;

console.log(x); // ReferenceError: console is not defined