JavaScript constとletとvarの違い

JavaScriptの変数の宣言のconstとletとvarの違いについてです。

目次

サンプル constとは
  letとは
  varとは
  constとletとvarの違いのまとめ
参考 変数宣言のconst/let/varがない場合
  const/let/varのつけ忘れを防ぐ(strictモード)

constとは

・再代入不可

    const k = 0;
    k = 3;	// Assignment to constant variable.

1行目は、変数に値を代入しています。
2行目は、変数に値を再代入しようとしていますがエラーになります。
const=再代入しない項目と認識できます。

ただし以下のようにオブジェクトに格納された値の変更はできます。

  const a = ["赤", "黄", "青"];
  a.push("黒"); // 末尾に追加
  console.log(a); // ["赤", "黄", "青", "黒"]

1行目は、配列です。constを使用しています。
2行目は、pushで値を追加していますがこの場合はエラーになりません。

・ブロックスコープ

constは、ブロックスコープです。varよりスコープが狭いのでその分使いやすいです。
(ブロックとは、波括弧{ }で囲んだ箇所です)

  {
    const k = 0;
    console.log(k); //0
  }
  console.log(k); // k is not defined

3行目は、ブロック内のため値は表示されます。
5行目は、ブロックの外のためエラーになります。

・変数宣言のみはエラー

    const k; // Missing initializer in const declaration
    k = 0;

3行目は、constで変数の宣言のみしています。この場合エラーになります。

・変数名の重複は不可

    const k = 0;
    const k = 1; //Identifier 'k' has already been declared

2行目は、変数名kが重複しているのでエラーになります。

letとは

・再代入可能

    let k = 0;
    k = 3;
    console.log(k); //3

1行目は、変数に値を代入しています。
2行目は、変数に値を再代入しています。constと異なりエラーになりません。

・ブロックスコープ

letは、ブロックスコープです。varよりスコープが狭いのでその分使いやすいです。
(ブロックとは、波括弧{ }で囲んだ箇所です)

  {
    let k = 0;
    console.log(k); //0
  }
  console.log(k); // k is not defined

3行目は、ブロック内のため値は表示されます。
5行目は、ブロックの外のためエラーになります。

・変数宣言のみでもエラーにならない

  let k;
  k = 0;

1行目は、letで変数の宣言のみしています。constと異なりエラーになりません。

・変数名の重複は不可

  let k = 0;
  let k = 1; //Identifier 'k' has already been declared

2行目は、変数名kが重複しているのでエラーになります。

varとは

・再代入可能

    var k = 0;
    k = 3;
    console.log(k); //3

1行目は、変数に値を代入しています。
2行目は、変数に値を再代入しています。エラーになりません。

・関数スコープ

varは、関数スコープです。

  {
    var k = 0;
    console.log(k); //0
  }
  console.log(k); //0

3行目は、ブロック内のため値は表示されます。
5行目は、ブロックの外ですがエラーになりません。constとletより影響範囲が広いです。(影響範囲は狭いほうが良いです)

・変数宣言のみでもエラーにならない

  var k;
  k = 0;

1行目は、varで変数の宣言のみしています。エラーになりません。

・変数名の重複も可能

  var k = 0;
  var k = 1;

変数名の重複は可です。(好ましくないです)

constとletとvarの違いのまとめ

変数の宣言としてconst,let,varがあり、以下の違いがあります。

変数の宣言 スコープ 変数に値を再代入 変数名の重複
const ブロックスコープ 再代入できない 不可
let ブロックスコープ 再代入できる 不可
var 関数スコープ 再代入できる

constとletは、ECMAScript 2015(ES6)で使用できるようになりました。
varでなくconstとletを使用するようにします。

変数宣言のconst/let/varがない場合

  • 変数宣言のconst/let/varがない場合、どこからでもアクセスできるグローバル変数になります。
    →ローカル変数のつもりがグローバル変数になっているとよくないです。
  • 変数宣言のつけ忘れの対策としてstrictモードがあります。

const/let/varのつけ忘れを防ぐ(strictモード)

'use strict';
"use strict";
  • strictモードであれば、変数の前にconst/let/varをつけずに変数に値を代入するとエラーになります。
  • strictモードの宣言は、use strictの文字列をシングルコーテーションまたはダブルコーテーションでくくります。
  • スクリプト全体を指定する場合は一番上に配置します。
  • 関数(function)内であれば一番上に配置します。
  • 以下は、MDNのStrictモードのページです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Strict_mode

strictモードのサンプルです。

<script>
  function test1() {
    "use strict";
    i = 2; // i is not defined
  }
  
  test1();
</script>

3行目は、strictモードにしています。
4行目は、変数の宣言をせずに値を代入しようとしているのでエラーになります。

関連:strictモードの時の即時関数の注意点

関連の記事

JavaScriptのデータ型とデータ型を調べる方法

△上に戻る