More than 3 years have passed since last update.

Javascriptの変数宣言varとconstとletをわかりやすくサンプル付きで説明解説

Last updated at 2020-09-30Posted at 2020-09-28

Javascriptの変数宣言は、
下記のように複数あります。（var,const,let）

var HENSU = 'あいうえお';
const HENSU = 'あいうえお';
let HENSU = 'あいうえお';

JS覚えてたての場合、人が書いたコードで複数の種類が登場して
訳がわからなくなると思いますので、なるべくわかりやすく
まとめておきます。実際に動かした実験結果も動画で紹介します。

この変数宣言については、ECMAScript2015から
定義されている国際標準仕様です。
※昔は無かったものもあるのでより混乱しやすいですね

##まとめ：
先に簡素にまとめます。後ほど動画付きで説明します。

var →　再宣言、再代入が可能
const　→ 再宣言、再代入が禁止
let　→ 再宣言は禁止、再代入は可能

補足：
・再代入：変数の値を入れ直す事
・再宣言：再度明示的にvar/const/let〇〇と変数を宣言する事

★変数を後でどう使うか？を考えて宣言すればOKですね！
　正直すべてvarだけでも動作させられますが、明示的にする事で、
　人が書いたものでも意図が分かってきますし、
　エラーを起こしにくくなります。

##var：再宣言も再代入もOKな柔軟な宣言
例では、HOTKEYWORDという変数の中身を、
宣言を入れたり入れなかったりして
2度ほど変えていますが問題なく動作します。
　

##const：再宣言、再代入が禁止という厳格な宣言
例(NGケース）ではあえて再宣言や再代入を試みますが、
初回の宣言だけ成功し、その後の記述はエラーで動作しません。

##let:再代入は可能、再宣言は禁止という中間の存在
例では代入は成功しています。わざと3回宣言してみたところ
エラーで動作しなくなりました。

##最後に
こうして実験してみると思った以上に厳格な部分があると
わかりました。

例では下記のようにあえて数回宣言したり、
直接文字列を代入していますが、
実務上では「可変させたいものとそうでないもの」があると
思います。また、「同じ変数名使ってしまうミス」も減るはずです。

特徴を捉えてミスなく素早く第三者にもわかりやすい
コードにしていきたいですね。

var HOTKEYWORD = "倍返し";
alert(HOTKEYWORD);
HOTKEYWORD = "恩返し";
alert(HOTKEYWORD);
var HOTKEYWORD = "土下座";
alert(HOTKEYWORD);

実際に動作するサンプルも用意しましたので
手で動かしてみたいかたはどうぞ★
（もちろんコピペも自由です）