JavaScript変数宣言varとletの違いとスコープ

変数には値を保持している寿命がありますスコープともいいますが、変数宣言「var」と「let」では少し挙動が違いますのでその違いとスコープとはどんなものなのか関数を例にして解説してみたいと思います。

スコープとは

変数のスコープとは、その変数が参照できる範囲のことを言います。

大きな範囲でスコープできる変数をグローバル変数、狭い範囲で参照する変数をローカル変数と言ったりします。

といってもプログラミングがはじめての方はなんだかわかりませんよね。

ブロック内とブロック外で宣言した変数

一つの関数をブロックと考えるとブロック内で宣言する変数とブロック外で宣言する関数では違いがあります。

以下はブロック内で宣言した変数です

<button onclick="clk()">ボタン</button>
<script>
function clk() {
let rokaru = 5;
alert(rokaru);//ココは正常に表示される
}
alert(rokaru);//ココは表示されない
</script>

サンプル（別窓）

上記のサンプルでは1回しか表示されません。変数をブロック内で宣言しているからです。ブロック内で宣言した変数はブロックの外では無効になります。つまりブロック内で宣言した変数のスコープはブロック内だけです。

下記はブロックの外で宣言した場合です。

 <button onclick="clk()">ボタン</button>
<script>
let gurobaru = 5;
function clk() {
alert(gurobaru);//ボタンをクリックすると表示される
}
alert(gurobaru);//ココが先に表示される
</script>

サンプル(別窓）

上記では変数をブロックの外で宣言してみました。アラートが2回表示されます。ブロックの外で宣言した変数はブロック内でもブロック外でも参照（スコープ）できます。

プログラミングではこの使い分けが非常に重要です、しっかり覚えておいてくださいね。

尚、ブロックとは{～～～}中括弧でくくられた部分をいいます。これから出てくるif文や繰り返しの記述もそれにあてはまります。

変数の上書き

ブロックの外で宣言した変数はブロック内で操作することが可能です。

下記のコードはブロックの外で宣言した変数をブロック内で操作しています。

 <button onclick="clk()">ボタン</button>
<script>
let num = 0;
function clk() {
num = num + 1;
alert(num);//ボタンをクリックすると表示される
}
</script>

サンプル(別窓）

ボタンをクリックするたびに数字が1づつ増えるプログラムです。ブロックの外で宣言した時値を0にしましたがブロック内で変数に1を足していきますので変数が上書きされてどんどん数字が大きくなっていきます。この方法もめっちゃ頻繁に使います。

letとvarの違い

変数を宣言するときletとvarの両方を使うことが可能です。でも違いがありますので注意してください。

var

下記のコードを見てください、プログラミングの経験をしている方はとても不自然に感じるかもしれません。

<button onclick="clk()">ボタン</button>
<script>
function clk() {
var num = 5
alert(num);
var num = 10;
alert(num);
}
</script>

サンプル(別窓）

同じブロック内で2度「num」変数が出てきます。実行してボタンをクリックすると5と10のアラートが2度表示されてしまいます。この動作がvarの動作です。ブロック内で同じ名前の変数が使えるという変な仕組みになっています。

let

プログラミングの経験のある方は、こちらのほうがわかりやすいかもしれません。上記のvarに対してletは下記の動作になります。

<button onclick="clk()">ボタン</button>
<script>
function clk() {
let num = 5;
alert(num);
let num=10;
alert(num);//ココがエラーになって動かない
} 
</script>

サンプル(別窓）

上記ではアラートが2個設定されていますが全く表示されません、これは同じブロック内で2回変数宣言しているためエラー状態になっているためです。letで変数宣言する場合はこのように同じブロック内で同じ名前の変数を2度宣言することはできません。通常のプログラミングと同じです。

<button onclick="clk()">ボタン</button>
<script>
let num = 5;
let num = 10;
function clk() {
alert(num);//ココがエラーになって動かない
} 
</script>

サンプル(別窓）

冒頭の部分で2回同じ変数名で変数宣言しています。

当サイトでは基本的にletで変数宣言します。

変数の寿命

一度変数宣言した変数はいつまでも値を保持しているわけではありません。変数には寿命があり宣言した場所のみで有効です。

変数の寿命

下記のサンプルを見てください。

<button onclick="clk()">ボタン1 </button>
<script>
function clk() {
let num = 0;
num += 1;
alert(num);
} 
</script>

サンプル(別窓）

上記ではボタンをクリックすると1と表示されます。クリックするたびに1、2、3・・・・と増えていきそうな気がしますが増えてません。これが変数の寿命です、いったんブロックを抜けると変数の値が消滅します。だからボタンをクリックすると変数が初期化されて0が代入されてしまいます。

変数の寿命を変更してみる

上のコードではボタンをクリックするたびに変数が初期化されてしまいましたが、下記のようにするとボタンをクリックしても変数が初期化されることがありません、寿命がのびたような…

<button onclick="clk()">ボタン1 </button>
<script>
let num = 0;
function clk() {
num += 1;
alert(num);
} 
</script>

サンプル(別窓）

変数が初期化されないためボタンをクリックするたびに1、2、3、・・・・と数字が増えていきます。

今回はletとvarの違い変数のスコープなどを扱いました。まだまだ書き足りませんが初心者入門サイトなのでこのくらいにします。詳細な点はその都度扱っていきます。

このページは以上で終了です。

お疲れ様でした！