はじめに：

こんにちは。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/

＜3：変数と宣言＞Progate学習修了者がJavaScriptPrimerを読んだら