雑学

JavaScriptのvarとletの変数の違いを解説!正しい使い分け方は?

JavaScriptには、ES2015(ES6)から『let』という変数宣言が利用できるようになりました。

以前からあった変数宣言用の『var』とは何が違うのでしょうか?

 

はなこ
JavaScriptで、変数宣言の時に『var』とか『let』を使うでしょ。

あの2つの違いがよく分からなくて。

『let』は新たに導入された変数宣言の方式だね。

でも、僕もよく違いが分からないんだ。

たろう
はなこ
じゃあ、『var』と『let』の違いについて、ちょっと調べてみましょう。

 

今回は、JavaScriptの『var』と『let』の違いを解説し、その正しい使い分け方を見てみましょう。

【JavaScript】『var』と『let』の違い

『var』と『let』の主な違いは次のようになります。

『var』と『let』の違い

  • 『var』は関数スコープであり、『let』はブロックスコープである。
  • 『var』は再宣言が可能だが、『let』は再宣言できない。

それでは、ひとつずつ詳しく見てみましょう。

 

スコープについて

スコープとは、変数が有効になる範囲のことです。

宣言した変数は、スコープ内なら利用することができますが、スコープ外になると利用不可となります。

『var』と『let』では、有効なスコープに違いがあります。

まず、

『var』は関数スコープなので、関数の中だけで有効になります。

function isPlus( x ) {

_if ( x >= 0 ) {

__var message = 'Plus';

_} else {

__var message = 'not Plus';

_}

_console.log( message ); // OK!!

}

このように関数を定義したとき、messageという変数は『var』で宣言されているので関数 isPlus 内で利用可能であり、console.logメソッドによって message の内容が出力されます。

 

しかし、

『let』はブロックスコープなので、ブロック({ } の間)の中だけで有効になります。

function isPlus( x ) {

_if ( x >= 0 ) {

__let message = 'Plus';

_} else {

__let message = 'not Plus';

_}

_console.log( message ); // エラー!! message変数がない

}

先程のスクリプトとの違いは、『var』が『let』になっただけです。

しかし、この場合はエラーになります。

『let』で宣言した変数messageは、if文の中のブロックだけで有効になります。

なので、ブロック外にあるconsole.logメソッドでmessage変数を使うことはできないわけですね。

 

宣言について

『var』は、再宣言することができます。

var x = 1; // varで宣言

x = 0; // OK!!

var x = 2; // OK!!

変数 x は1行目と3行目で二度宣言されていますが、問題はありません。

 

しかし、

『let』は再宣言できません。

let x = 1; // letで宣言

x = 0; // OK!!

let x = 2; // エラー!! let で二度宣言できない

3行目の『let』による宣言はエラーになります。

 

はなこ
たぶん、『let』の方がC言語やJavaなんかと同じスタイルなんじゃないかな?
そうだね。

昔は var のスコープが特殊だったから、他の言語と仕様が違っていて不満が多かったんじゃないのかな。

だから、新たに『let』が導入されたんだろうね。

たろう

 

『var』と『let』変数宣言の使い分け方

では、『var』と『let』はどのように使い分ければいいでしょうか?

『let』は、ES2015(ES6)と呼ばれる言語仕様で新たに導入されたものです。

『var』のスコープを関数スコープからブロックスコープに変更すればスッキリするわけですが、そうすると、今まで作成したスクリプトを見直す必要になり、大変ですよね。

そこで、代わりに『let』というものを導入したわけです。

なので、

これから新規にスクリプトを作成する場合は、『let』のみを使うようにしましょう。

他の言語では、変数は基本的にブロックスコープです。

それでも問題ないということは、JavaScriptでも『var』は不要であるということになります。

また『var』は変数宣言が重複してもよいという仕様になっていますが、そのような必要がある場面は皆無です。

ですから、

『var』を利用する意味はまったくない

ということですね。

 

ちなみに『let』の他に、ES2015から『const』というものも追加されています。

『const』は他の言語にもあるので、知っている人も多いと思いますが、定数宣言を行うために使われます。

定数宣言ですから、新たに値を代入することはできません。

また、スコープは『let』と同じでブロックスコープになります。

const x = 10; // 定数宣言

x = 15; // エラー!! 定数への代入は不可

スポンサーリンク

まとめ

今回の違いのポイントを、まとめていきましょう。

ポイント

  • 『let』は、ES2015(ES6)から新たに導入された変数宣言である。
  • 『var』は、関数スコープであり、『let』はブロックスコープである。
  • 『var』は、再宣言が可能だが、『let』は再宣言できない
  • これから新規にスクリプトを作成する場合は、『let』のみを使えばよい。

JavaScriptは、他の言語仕様に近づき、利用しやすい言語になりました。

まだ使ったことがなければ、試してみることをおすすめします。

-雑学

Copyright© 黄金時代 , 2020 All Rights Reserved.