いきなり結論
変数の宣言はES2022現在で、3つあります。
var、let、constの3つです。
| 宣言 | 上書き | 再宣言 |
|---|---|---|
| var | 〇 | 〇 |
| let | 〇 | × |
| const | ×※一部可能 | × |
変数とは？
日本の中学校の学習指導要領の数学の中に、変数を扱うセクションがあります。
数学は数を足したり引いたり割ったりするものという概念を
これでもかっ！というくらいに壊し、
多くの数学嫌いを生むのがこの変数というセクションです。
たとえば、3x = 6 ならば、x=2です。
「x=2」は、xと２は同じものだよ、と示す式ですが
中学生の脳には倫理的にこれが理解できないのだと推測されます。
ｘと２が同じものなら、明日から２という数字はいらない！
と思うからだと思います。
小学校で習う算数では、
「２＋６＝８」と、左辺も右辺も同じであるという「＝イコール」がそのままの意味を示すので
なんの疑問も抵抗も沸かないのですが
「ｘ＝２」と言うのを見ると、
ｘは2じゃないし、2はｘでもない！という
この世界に全く同じものはない！という倫理観に引っかかり、
なかなか理解できない人も多いと思われます。
箱を用意する
プログラム言語で扱う、特に、JavaScriptで扱う変数はこう捉えてみてください。
箱を用意する
様々なプログラム言語の、変数を扱うセクションで記載されているのが、
この「箱を用意する」という文言です。
例えば前々章では、デモンストレーションでこんな構文を紹介しました。
Consoleに、
以下のコードを書いてEnterキーを押す。
let a = 10;次の行には「undefined」と表示されます。
さらに以下のコードを書いて、Enterキーを押す。
console.log(a);次の行に「10」と表示されます。
変数aには「１０」という数字が入っています。
という意味です。
上記デモンストレーションでは、
aという箱を用意して、10という数字を入れておいてください
という構文を書いてもらいました。
それが以下のコードです。
let a = 10;この章の目的は、aなどの変数の宣言方法を学ぶ事です。
上記コードで言えば、「let」がそれに当たります。
let のほか、varやconstなんてのもあります。
それぞれどういう意味か、見てみましょう。
ES2015で追加されたlet const、それ以前ではvarだった
誕生順に習っていくと理解が容易だと思われます。
ので、まず「var」から見ていきましょう。
varの特徴は、上書き可能、再宣言可能です。
Consoleで、
以下のコードを書きEnterキーを押す。
var a = "varで宣言";以下のコードでaの中身を確認すると、
次の行に「varで宣言」が出力される
console.log(a);
Consoleで、
以下のコードを書きEnterキーを押す。
var a = "上書きしてみる";以下のコードでaの中身を確認すると、
次の行に「上書きしてみる」が出力される
console.log(a);
続いて、再宣言を検証します。
Consoleで、
以下のコードを書きEnterキーを押す。
var a = "varで宣言";以下のコードで「a」を再宣言しようとすると、
Uncaught SyntaxError: Identifier ‘a’ has already been declared
というメッセージが出る。
内容は、すでにaは宣言されています。
let a = "letで宣言";
const a = "constで宣言";再び、以下のコードでaを宣言してみる。
var a = "varで再宣言";次の行には、「undefinded」と表示され、
問題なくvarでの再宣言が通る
ご覧いただいた通りvarは、上書き可能、再宣言可能です。
開発過程では、いくつもの変数を扱います。
今回の例では、aという変数を一つだけ扱いましたが、
チームで開発などしていくと、変数の命名で不具合が起きたりします。
たとえば同じプロジェクト内に、AさんとBさんがいたとします。
Aさんは「とある人の年齢を格納しておく変数をage」とし、
Bさんは「とある部門の設立期間を格納しておく変数をage」としました。
変数名が被っているので、
読み込みが遅い方のageが最新として取り扱われます
というようなトラブルが考えられます。
変数名が被るようなチームでのスクラム開発では、
命名規則をいかに強固にしてようとトラブル発生の可能性は高まります。
そこでES2015で登場した宣言 letは、再宣言不可
実際に見てみましょう。
Consleで、
以下のコードを書いてEnterキーを押す。
let a = "letで宣言";
Consleで、
以下のコードを書いてEnterキーを押す。
a = "上書き";
// 変数aに何が入っているか確認
console.log(a);
=> "上書き"
以下Consleで、
以下のコードを書いてEnterキーを押す。
let a = "letでaを宣言"; // shift + Enterで次行
let a = "letでaを再宣言";すると、
Uncaught SyntaxError: Identifier ‘a’ has already been declared
と言うエラーが出ます。
constで宣言された変数は、上書き不可、再宣言不可・・・だが・・・
constで宣言された変数は、上書きも再宣言もできない。
constはそもそも、constantの略であり、その意味するところは、
絶え間ない、ずっと同じ、定数などの意味を持ちます。
varやlet同様、実際に見てみましょう。
Consleで、
以下のコードを書いてEnterキーを押す。
const a = "constで宣言";
Consleで、
以下のコードを書いてEnterキーを押す。
const a = "constで宣言";
a = "constで宣言されたaを上書き";すると、
Uncaught TypeError: Assignment to constant variable
というエラーが出て弾かれます。
Consleで、
以下のコードを書いてEnterキーを押す。
const a = "constで宣言"; Shift+Enterで次行へ
const a = "constで宣言されたaを再宣言";すると、
Uncaught SyntaxError: Identifier ‘a’ has already been declared
というエラーが出て弾かれます。
constで宣言された値は上書きできません。
できませんが、実はできる場合があります。
が、この話はデータの型の話も大きくかかわってくるので、
その時にまた改めてご紹介します。
