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

jsのletとvarとconstの違い

var や let や const とは？

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

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

var と let と const の違い

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

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

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

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 は問題なく参照できていますが、

let と const は再宣言出来ずに、「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.

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

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

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

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

📖目次に戻る

変数宣言とスコープ

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

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

const と let は、ブロックスコープと関数スコープを持ち、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 で宣言した変数のみブロックスコープの外から参照することができ、それ以外の let と const では

「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

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

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

📖目次に戻る

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

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

巻き上げが発生した場合、const と let はエラーとなり、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
    }
}

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

今度は、この内側のブロックスコープ内の「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;
    }
}