GoogleのFirebaseで学習するJavaScriptの変数宣言子 ~ let, constの特徴とvarとの違い

javascript_var_let_const

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

目次

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

[php]
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"
};
[/php]

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

[php]
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"
};
[/php]

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

“const”と”let”の特徴

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

“const”宣言子の特徴

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

[php]
const c = 1;
c = 2;
[/php]

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

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

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

“let”宣言子の特徴

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

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

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

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

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

javascript_var_let_const

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次