はじめに:
こんにちは。Satoです。
本稿では、Progate学習を修了した段階のプログラミング学習者が、JavaScriptPrimer(以下、Primerとします)を学習するとどうなるのかを記録したものです。基本的には自身のアウトプットを主眼に置いていますが、初学者が躓いた点とその解決方法も記載するつもりです。良かったら参考にしてみてください。
学習事項:
変数と宣言に関する概要
- 変数:文字列・数値等のデータに名前をつけることで、繰り返し利用可能にする機能
- 変数の宣言:JavaScriptの場合、const, let, varで宣言する
→varはバグを発生させやすいので、constやletを使った方が良い。
[ES2015]const
constとは、再代入できない変数を宣言するキーワードのこと。
Cf:再代入の一例として、下記constの変数を”Kyoto”から"Tokyo"にすることが挙げられる。なお、constでこれをやるとエラーが発生してしまう。
// const 変数名 = 初期値;
const japanCapital = "Kyoto";
japanCapital = "Tokyo"; // => TypeError: invalid assignment to const 'japanCapital'
一般的に変数への再代入は、「変数の値は最初に定義した値と常に同じであるべき(参照透過性, referential transparency)」というルールに反する。従って、変数の値を再代入する必要が無い場合は、constを積極的に利用しよう。
[ES2015]let
letは値の再代入が可能な変数を宣言したい場合に用いる。
使用例として、以下のようなfor文が挙げられるだろう。
let x = 0;
for (let i = 0; i < 9; i++) {
x = x + i;
}
console.log(x);
// Expected output: "012345678"
varとその問題点
結論から言うと、varはletの古いバージョンだから現在は使わない方が良い。
varの問題点は、同じ名前の変数を再定義できてしまうことだ。letやconstで同じ名前を再定義しようとすると、下記のような構文エラー(SyntaxError)が発生する。
// "y"という変数名で変数を定義
let y = 1;
// 同じ名前の変数"y"を定義するとSyntaxErrorとなる
let y = 2; // => SyntaxError: redeclaration of let y
他にもvarには「変数の巻き上げ」と呼ばれる意図しない挙動がある。letやconstは、そういった問題を改善させたものだと認識しておけば良い。詳しくは、「関数とスコープ」で取り扱うとのこと。
変数名に使える名前のルール
変数名の名前(識別子)には、以下のルールがある。
- 半角アルファベット、_(アンダーバー)、$(ダラー)、数字が利用可能
- 変数名は数字から開始できない
- 予約語と被る名前(例:constやletなど)は利用できない
上記のルールに加えて、ひらがなや一部の漢字も変数名として利用可能ではある。しかし、全角の文字列が混在すると扱いにくいケースもあるので、利用するべきではない。
// 利用OKな変数名
let $; // OK: $も利用可能
let _title; // OK: _も利用可能
let jquery; // OK: 小文字アルファベットも利用可能
let NTT; // OK: 大文字アルファベットも利用可能
let es2015; // OK: 数字は先頭以外なら利用可能
let 日本語の変数名; // OK: ひらがなや一部の漢字も利用可能だが、推奨できない
// 利用NGな変数名
let 1st; // NG: 数字から始まっている
let 123; // NG: 数字のみで構成されている
let let; // NG: 'let'は変数宣言のために予約されているので利用不可
let if; // NG: 'if'はif文のために予約されているので利用不可
躓いた点:
特になし。
参考文献
azu・Suguru Inatomi「第一部: 基本文法 変数と宣言」『JavaScript Primer』
https://jsprimer.net/basic/variables/