学習サポート始めました(有料)

プロフィール

学ぶパンダ

初心者向けにプログラミング学習や

就職・転職に向けた情報を発信

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

変数とスコープ

変数

javaScriptを書く時に、

「変数」として

このように、

値をいれるために使う」

というのが

「変数」

と呼ばれるものです。

この変数は、

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

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

具体的には、

let 変数名 = 入れたい値

という形で使い、

実際の例としては、

let sample = 'サンプル';

のように設定します。

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

その辺りのことは、

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

有効な範囲(スコープ)

変数の基本的な内容は、

ですが、

この「変数」について、

変数自体の

「有効な範囲」

のことを、

「スコープ」

といいます。

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

このように、

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

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

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

実際の変数を使う例で、

有効な範囲外から、

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

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

コードとして、

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

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

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

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

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

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

という形で、

値を取得できますが、

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

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

値が取得できません。

このように、

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

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

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

「スコープ」を決める変数の「宣言」に関して

  • 変数の宣言は、
  • 「let」というものを使います。
  • この「let」が設定された位置で、
  • 変数の宣言が判断されることを理解しておきましょう。
  • 関数などの、
  • 決まった範囲内であれば、
  • 「let」自体があってもなくても、
  • 変数の「スコープ」としては、
  • 関数の内外で切り分けされます。 
  • この記事の中で説明した
function sample() {
  let mojiLocal = '関数の中の文字';
}
console.log(mojiLocal);
  • のように、
  • 関数の「内側」の変数は、
  • 「let」があってもなくても「スコープ」は変わりません。
  • ポイントとして、
  • javaScriptで「let」のない変数が現れた場合は、
  • プログラム実行時に自動で変数の宣言が処理される
  • ということを覚えておきましょう。
  • 繰り返し処理などで、
for(idx=0;idx<2;idx++) {
}
console.log(idx);
  • このように
  • 「let」がない場合は、
  • プログラム実行時に変数の宣言が自動で処理されています。
  • イメージとしては、
for(let idx=0;idx<2;idx++) {
}
console.log(idx);
  • のように、
  • 「let」が自動で付与されていると考えてもらえると、
  • わかりやすいと思います。
  • ちなみに、
  • 「判定処理」「繰り返し処理」の変数に関しては、
  • 上記のように、
  • 変数自体を関数とは違って、
  • 変数のスコープが、「判定処理」「繰り返し処理」の中と外など、
  • 範囲が狭まることがない点に注意しましょう。

初心者向けピックアップ

Webデザインの基礎学習におすすめ

IT関連の記事を掲載

HTML/CSS/JSのポイントのみ学習

ポートフォリオを作る流れを理解

コスパ良く学習サポートを受けたい人向け