2018年6月21日にプログラミング学習動画のドットインストールで、JavaScriptで学ぶFirebase入門(新しいタブで開く)というレッスンが公開されました。

“const”と”var” 2つの宣言子の使用例

const config = {
  apiKey: "hogehogefugafuga",
  authDomain: "myfirebasechatapp-hogehogefugafuga.firebaseapp.com",
  databaseURL: "https://myfirebasechatapp-hogehogefugafuga.firebaseio.com",
  projectId: "myfirebasechatapp-hogehogefugafuga",
  storageBucket: "myfirebasechatapp-hogehogefugafuga.appspot.com",
  messagingSenderId: "99999999999"
};

その動画の中でオブジェクト変数である”config”を宣言するために”const”という変数宣言子が使われています。動画で「”const”はJavScriptの新しい記法である」とさらっと説明されています。

var config = {
  apiKey: "hogehogefugafuga",
  authDomain: "myfirebasechatapp-hogehogefugafuga.firebaseapp.com",
  databaseURL: "https://myfirebasechatapp-hogehogefugafuga.firebaseio.com",
  projectId: "myfirebasechatapp-hogehogefugafuga",
  storageBucket: "myfirebasechatapp-hogehogefugafuga.appspot.com",
  messagingSenderId: "99999999999"
};

一方、GoogleのFirebaseで”Project Overview”を確認すると、導入用のスクリプトは変数宣言子として”var”が使われています。”var”はJavaScript学習者が必ず目にするおなじみの変数宣言子です。”const”と”var”はどのように違うのでしょうか？

“const”と”let”の特徴

“const“とはECMAScript6(新しいタブで開く)の規格で採用されている宣言子で、定数を宣言するための記法です。またECMAScript6の規格で新しく採用されている宣言子には”let“もあり、変数を宣言するための記法です。ECMAScript5の規格である”var”は、定数・変数の両方の宣言を兼ねた宣言子でした。

“const”宣言子の特徴

constはブロックスコープで再代入ができないローカル変数（定数）です。

const c = 1;
c = 2;

const宣言子で代入された定数について、再代入をしようとするとエラーとして”Uncaught TypeError: Assignment to constant variable.“が表示されます。

const MY_ARRAY = [];
MY_ARRAY.push("A");
console.log(MY_ARRAY); // ["A"]

ただし、定数の値がオブジェクト型のデータ型（配列やオブジェクト）の場合、その要素やプロパティの値を変更することは可能です。

“let”宣言子の特徴

letは波括弧内を変数の有効範囲とするブロックスコープで、使い方は基本的に”var”と同じです。

function letTest() {
  let l = 1;
  if (true) {
    let l = 2;  
    console.log(l);  // 2
  }
  console.log(l);  // 1
}
letTest();

ただしletはブロックスコープの変数であるため、”{}（波かっこ）”の中では変数の値が変わることはありません。

function varTest() {
  var l = 1;
  if (true) {
    var l = 2; 
    console.log(l);  // 2
  }
  console.log(l);  // 2
}
varTest();

一方varは波括弧内でブロックされませんので、波括弧の途中で変数の値が入れ替わることがあります