【理解を深める_02】変数のスコープ（有効な範囲）

変数とスコープ

変数

javaScriptを書く時に、

「変数」として

このように、

値をいれるために使う」

というのが

「変数」

と呼ばれるものです。

この変数は、

• 数値
• 文字列
• 配列
• 真偽値

などを設定することができます。

具体的には、

let 変数名 = 入れたい値

という形で使い、

実際の例としては、

let sample = 'サンプル';

のように設定します。

配列を設定したりすることができますが、

その辺りのことは、

以下の記事を参考にしてください。

【基本を抑える_02】変数と配列

有効な範囲（スコープ）

変数の基本的な内容は、

ですが、

この「変数」について、

変数自体の

「有効な範囲」

のことを、

「スコープ」

といいます。

具体的な例とイメージとしては、

このように、

• 関数の「外側」で設定した変数
• 関数の「内側」で設定した変数

の違いを意識しておくと良いでしょう。

有効な範囲の内側と外側の定義した例を確認してみよう

実際の変数を使う例で、

有効な範囲外から、

変数を使った場合に「スコープ」の範囲外なので、

その変数が使えないことを確認しましょう。

コードとして、

let mojiGlobal = '関数の外の文字';
function sampleFunc() {
  let mojiLocal = '関数の中の文字';
}

// 関数の外側の変数を確認
console.log('関数の外側の変数を確認');
console.log(mojiGlobal);

// 関数の内側の変数を確認
console.log('関数の内側の変数を確認'); 
console.log(mojiLocal);

このコードで確認すると、

まずは、外側の変数の値は、

関数の外側の変数を確認
関数の外の文字

という形で、

値を取得できますが、

内側の変数の値に関しては、

このようにエラーが起きて、

値が取得できません。

このように、

有効な範囲（スコープ）の違いによって、

値を扱えるかどうかが違うことを、

実際に試して理解しておきましょう。

function sample() {
  let mojiLocal = '関数の中の文字';
}
console.log(mojiLocal);

for(idx=0;idx<2;idx++) {
}
console.log(idx);

for(let idx=0;idx<2;idx++) {
}
console.log(idx);