【Javascript】スコープ

スコープは変数の有効範囲を意味する概念です。

グローバル変数

関数の外で宣言された変数は、ソースコード全体からアクセス可能です。

var scope = 'global';
function f() {
  console.log(scope);
}

f();
// global と表示される

ローカル変数

関数の中で宣言された変数は、関数の中でのみアクセス可能です。

function f() {
  var scope = 'block';
}

console.log(scope);
// エラー 'scope' is not defined

ただし、関数内でも var を使用せずに変数を宣言した場合、変数のスコープはグローバルになります。

function f() {
  scope = 'global';
}

f();

console.log(scope);
// global と表示される

ブロックスコープではなく、関数スコープ

Javascript におけるスコープの基本単位は、文ブロック {} ではなく、関数です。

ブロックの中で変数を宣言しても、ブロックの外からアクセスできます。

{
  var scope = 'block';
}

console.log(scope);
// block と表示される

ただし、var ではなく、let もしくは const を使用して変数を宣言すると、ブロックスコープが働きます。 ブロックの中で宣言した変数は、ブロックの外からはアクセスできません。

{
  const scope = 'block';
}

console.log(scope);
// エラー 'scope' is not defined

let もしくは const を常に使えば良し

以上のように、Javascript における変数のスコープは、仕様が散らかっている印象があります。 対策としては、常に let もしくは、const を使用することです。

ESLint などのスタイルガイドを使用している場合は、var による変数宣言（あるいは var を省略した変数宣言）には警告が出る傾向にあります。変数宣言は let、もしくは const を指定するようにしましょう。そうすれば、変数は全てブロックスコープで考えることができます。