JavaScript備忘録（変数と宣言について）
はじめに
プログラミングのプの字も知らないところからプログラミングの勉強を始めて、JavaScriptの勉強もそこそこにReact+Typescriptでの開発をやり始めたので、本来のJavaScriptが疎かになっているところが多々ある。そこで一旦基本に立ち返ってJavaScriptの勉強をすることにした。ここでは勉強の中で特に解りにくかったところをまとめる。
変数の宣言
文字列や数値等に名前をつけて後から呼び出せるようにしたものが変数だ。その変数を宣言するキーワードとして、
- var
- let
- const
がある。varが最も古く、let、constはES2015で新しく追加されたらしい。
今までほぼ脳死でconstを使っていたが、この度改めて違いを学んだ。
それぞれの違い
var
varは、値の再代入が可能な変数を宣言するキーワードだ。再代入が可能ということは、同じ名前で再定義できるということ。例えば、
var hoge; hoge = "あああ"; hoge = "ううう"; console.log(hoge);
では、コンソールに
ううう
と表示され、再代入ができていることがわかる。また、同じ名前で変数を再定義することもできてしまう。こんな感じ。
var hoge; hoge = "あああ"; var hoge; hoge = "ううう"; console.log(hoge);
コンソールは、
ううう
となる。
let
letは、先述の通りES2015でconstと併せて新しく追加された宣言だ。これはvarと同じく再代入が可能となっている。varと異なる点は、同じ名前で変数の再定義はできないという点。例えば、
let hoge; hoge = "あああ"; let hoge; hoge = "ううう"; console.log(hoge);
SyntaxError: /src/App.js: Identifier 'hoge' has already been declared (X:X)
といった感じでシンタックス（構文）エラーが発生してしまう。
const
constは、varやletでは可能だった再代入ができない変数の宣言ワードだ。もっと正しく表現すると、値への読み取り専用の参照を作る宣言ワード、らしい。試しに再代入しようとしてみると、
const hoge = "あああ"; hoge = "ううう"; console.log(hoge);
TypeError Assignment to constant variable.
のように、エラーが発生するようになっている。
では、 「値への読み取り専用の参照」って何だと思い、色々調べた結果、解りやすいサイトを発見した。
要は、プリミティブ型の再代入は絶対無理で、オブジェクトの場合だけは、その中のキーのみの変更ならば許される、ということらしい。例えば、
const hoge = { name: "あああ" }; hoge.name = "ううう"; console.log(hoge);
のコンソールは、
{name: "ううう"}
のように、オブジェクトの中身の変更ならできることがわかる。
まとめ
現在JavaScriptで変数を宣言するワードは、 var、let、const があり、それぞれ
- var：再代入ができるし、同名で再定義できる
- let：再代入ができるが、同名で再定義できない
- const：再代入ができないが、オブジェクトなら変更可能
基本的に変数の再代入をすることはないので、どうしても必要な場合だけletを使用し、普段はconstで定義するのが良いと思った。
