javascript

【javascript】var / let / constの違いや使い分け方を初心者向けに徹底解説!

jsのletとvarとconstの違い

 

var や let や  const とは?

var letconst 変数を宣言するために使用するキーワードです。

それぞれのキーワードには、簡単に言うと以下のような違いがあります。

var と let と const の違い

しかし、次のような疑問が湧いてくるのではないでしょうか…

結局どれを使えば良いの? / そもそもvarって使わない?

この記事では、そんな疑問や var と let と  const 違いについて初心者向けに解説します。

 

letconst使い方について詳しく知りたい方はコチラの記事を見てね!

目次

letとvarとconstの違い再宣言と再代入変数宣言とスコープ変数の巻き上げ(ホイスティング)
3つの宣言方法のまとめvarは非推奨?使わない?letとconstの使い分け方は?



 📖目次に戻る

var と let と const の違い

変数や定数を宣言する際に使用する var と let const ですが、それぞれに違いがあり、何を使っても良いわけではありません。

注意ポイント

中でも var は、 let const が生まれる前から存在する古い宣言方法で、今では使うべきではないとされています。

 

そこで、それぞれの違いを詳しく分類したものを以下の表にまとめてみました。

再宣言 再代入 スコープ 巻き上げ
const × × ブロック、関数 エラー
let × ブロック、関数 エラー
var 関数のみ undefined
  • 再宣言 / 再代入 … 文字通り、一度宣言または代入した変数に、再び宣言又は代入すること
  • スコープ … 変数の有効範囲
  • 巻き上げ宣言を行う前にも有効範囲が及ぶこと

ご覧の通り、それぞれの宣言方法にも、微妙に出来ることが異なるのがわかると思います。

 

それでは、一つずつ項目別に確認していこう!

 📖目次に戻る

再宣言と再代入

再宣言とは、文字通り変数を宣言した後、再度宣言することで、再代入は一度値を代入した後、再度代入することです。

const は、再宣言も再代入もできず、 let は再代入が可能で、 var はいずれも可能となっています。

再宣言 再代入
const × ×
let ×
var

 

では実際に、再宣言すると、どのような結果になるか見てみましょう。

 </>javascript

var test1 = '1回目';

var test1 = '2回目';

console.log(test1);  // 2回目  

let test2 = '1回目';

let test2 = '2回目'; // SyntaxError: Identifier 'test2' has already been declared  

const test3 = '1回目';

const test3 = '2回目'; // SyntaxError: Identifier 'test3' has already been declared

var は問題なく参照できていますが、

letconst再宣言出来ずに、「SyntaxError: Identifier '○○' has already been declared」というエラーが発生してしまいます。

 

ちなみにエラーの内容は、「○○は既に宣言されていますよ!!」だよ。

 

では、再代入した場合はどうでしょうか、

 </>javascript

var test1 = '1回目';

test1 = '2回目';

console.log(test1);  // 2回目  

let test2 = '1回目';

test2 = '2回目';

console.log(test2); // 2回目  

const test3 = '1回目';

test3 = '2回目'; // TypeError: Assignment to constant variable.

varlet も再代入出来ていますが、constエラーが発生していますね。

 

じゃあ、再宣言再代入も出来る var の方が便利で良いのでは?

と思うかもしれませんが、var は自由度が高い分、気付かぬうちに同じ名前で宣言して値を上書きしてしまうというデメリットがあります。

 

なので、基本的に var を使うことはオススメしないよ!



 📖目次に戻る

変数宣言とスコープ

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

基本的には有効範囲内の変数や定数にアクセスできても、有効範囲外のものにはアクセスすることは出来ません。

 

constlet は、ブロックスコープ関数スコープを持ち、var関数スコープのみを持ちます。

スコープについて詳しく知りたい方はコチラの記事を見てね
スコープ
const ブロック、関数
let ブロック、関数
var 関数のみ
つまり、関数内ではどのキーワードで変数宣言しても外部からは参照できませんが、それ以外のブロック内 で且つ var で宣言された変数は外部から参照できてしまいます

 

では実際に、ブロックスコープについて確認してみましょう。

 </>javascript

if(true){

        var test1 = 1;

        let test2 = 2;

        const test3 = 3;

    }

    console.log(test1); // 1 

    console.log(test2); //ReferenceError: test2 is not defined

    console.log(test3); //ReferenceError: test3 is not defined

var で宣言した変数のみブロックスコープの外から参照することができ、それ以外の letconst では

「ReferenceError:○○ is not defined」というエラーが出てしまいます。

 

ちなみにエラーの内容は「○○は定義されてません!!」だよ。

 

このように、var はスコープが広く、ブロックスコープ内で宣言した変数も外部で上書き可能となっています。

注意ポイント

思わぬバグの原因となるので、やはり変数を宣言する際はvarを使わずconst let 宣言するのが望ましいでしょう。

 

念のため、関数スコープについても確認します。

 </>javascript

function myFunc(){

    var test1 = 1;

    let test2 = 2;

    const test3 = 3;

}

console.log(test1); //ReferenceError: test1 is not defined

console.log(test2); //ReferenceError: test2 is not defined

console.log(test3); //ReferenceError: test3 is not defined

varletconst も全て、先程と同様のエラーが出て参照できませんでした。

 

最後に、変数の巻き上げについてみてみよう!

 📖目次に戻る

変数の巻き上げ(ホイスティング)

変数の巻き上げとは、変数の有効範囲が宣言を行う前にも及ぶことです。

巻き上げが発生した場合、constletエラーとなり、var はエラーにならずに、undefinedになります。(※Undefinedとは、未定義を表す値のことです。)

巻き上げ
const エラー
let エラー
var undefined

 

では、実際に変数の巻き上げについて確認してみましょう。

 </>javascript

if(true){

    let test = 1;

    console.log(test); // 1

    if(true){

        let test = 2;

        console.log(test); // 2

    }

}

最初のコンソールで「1」が表示され、内側のブロックスコープの内で宣言している変数を参照すると「2」が表示されます。

 

今度は、この内側のブロックスコープ内の「console.log(test);」を同じスコープ内宣言の直前に移動してみるとどうでしょうか。

 </>javascript

if(true){

    let test = 1;

    console.log(test); // 1

    if(true){         console.log(test); // ReferenceError: Cannot access 'test' before initialization

        let test = 2;

    }

}

一つ上の階層で宣言された変数を参照するので「1」が表示されると思いきや、「ReferenceError: Cannot access 'test' before initialization」というエラーが発生してしまいます。

 

エラーの内容は「初期化前に「test」にアクセスできません」だよ

 

これは、すぐ下で宣言している変数に影響を受けているためです。

要するに下から上に巻き上げられています。

と言うのも、javascriptはスコープ内で変数が宣言された場合、そのスコープの先頭で宣言された場合と同じように動作するという仕様になっているからです。

 

注意ポイント

宣言する前に参照することは普通はないので、あまり問題になることはありませんが、こういう仕様があるということは知っておきましょう。

 

変数を宣言する場合は、スコープの先頭で宣言すると良いね

 📖目次に戻る

3つの宣言方法のまとめ

これまで説明してきた varletconst の違いを踏まえ「varは使わないの?」や「letやconstはいつ使うのか?」といった疑問についてまとめてみました。

 📖目次に戻る

var は 非推奨? 使わない?

var は、互換のために残ったES5以前からある古い変数宣言です。

  • 再宣言や再代入ができるため、同じスコープ内で何度も宣言や代入が可能です。
  • 変数の巻き上げによってエラーを吐きません

 

これらの特徴により、気付かぬうちに同じ名前で変数を宣言し、値を上書きしてしまったり、巻き上げ時に思わぬバグを誘発してしまう恐れがあります。

明確に非推奨とはされていませんが、出来るだけletやconstを使用するべきでしょう。

よってvar は、新たにコードを書く場合に使うべきではありません。 

 📖目次に戻る

let や const の使い分け方は?

let は変数を宣言する時に、const は定数を宣言するときに使用します。

  • どちらのスコープもブロックスコープです。
  • letは再代入ができますが、const は再宣言も再代入もできません。
  • letconst も巻き上げ時にエラーが発生します。

 

つまり、const を使用していれば、後で誤って値を上書きしてしまう恐れがありません。

よって、基本は const を使用し、再代入が必要な場合に let を使うと良いでしょう。 

 

これで let と var と const の違いは理解できたかな?

📖目次に戻る

最後に

いかがでしたでしょうか、今回は letvarconst の3つの宣言方法の違いについて解説しました。

もっと詳しく学習したい方は、下の記事一覧から他の記事もご覧下さい。

Javascript

javascriptの基本文法と基礎テクニックについて初心者向けに解説しているよ!!

続きを見る

最後までお読みいただき、ありがとうございました!



-javascript
-