JavaScript constとletとvarの違い

nas2018/05/22

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

目次

サンプル constとletとvarの違い
  constとは
  letとは
  varとは
変数宣言のconst/let/varがない場合
  strictモードとは

constとletとvarの違い

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

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

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

 

constとは

定数(上書きしない)の場合に使用します。または配列やオブジェクトで使用します。

・再代入不可

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

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

 

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

  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;
  var k = 1;

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

 

・関数スコープ（問題点)

varは、関数スコープで影響範囲が広いです。

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

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

 

・再代入可能

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

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

 

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

  var k;
  k = 0;

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

 

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

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

 

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のデータ型とデータ型を調べる方法

△上に戻る