動くコード図鑑技術記事現場の渡り方キャリア論すべての記事About
技術記事

JavaScriptでConstとletとvarの違いをミニマムで説明してみる

バイブス父さん
現役の業務SE
2019年11月11日2 min read
JavaScriptでConstとletとvarの違いをミニマムで説明してみる

みなさんこんにちは!

ひろぽんです!

最近JavaScript楽しいなーと思っていろいろ勉強しているのですが、変数の宣言時にConstとletとvarがあってややこしいなーと思ったので、今回はそのあたりの解説をミニマムでしていきます。

ミニマムなので、説明が足らない部分があるかと思いますが、何卒宜しくお願い致します。。。。。

Constは定数

ではまず初めはConstから行きます。

Constは正確には変数ではなく、定数です。

定数とは何かというと、一度宣言したらそのあと再宣言はもちろんの事、値を入れ替えることもできません。

具体的なソースコードを見てみると、以下の場合エラーになります。

Constは定数 (javascript)#88dfd898a79f
const num = 3;
console.log(num);
 
num = 4;
console.log(num);
▸ 実行ボタンで結果を表示

これを実行するとエラーが発生します。

では一度だけ値を入れれるのなら、下記のようなパターンは大丈夫なのでしょうか?

Constは定数 (javascript)#0857c5ddd8e8
const num;
num = 4;
console.log(num);
▸ 実行ボタンで結果を表示

これで実行してみると、、、、

エラーになります。

const num = 4;
console.log(num);

このようにConstは定数宣言時に初期化する場合にのみ、値を入れることができます。

letは再宣言不可能な変数

ではletはどのようなものなのか?

letは再宣言はできないが、再代入はできる変数といった感じです。

先ほどできなかったこのコード

letは再宣言不可能な変数 (javascript)#83f22948715a
const num = 4;
console.log(num);
 
num = 5;
console.log(num);
▸ 実行ボタンで結果を表示

letならエラーが出ずにしっかりと出力できます。

letは再宣言不可能な変数 (javascript)#816127acd7c9
let num = 4;
console.log(num);
 
num = 5;
console.log(num);
▸ 実行ボタンで結果を表示

ですが、再宣言はできません。

下記のような場合エラーになります。

letは再宣言不可能な変数 (javascript)#18d699cdb144
let num = 4;
console.log(num);
 
let num = 5;
console.log(num);
▸ 実行ボタンで結果を表示

letは再代入はできるが、再宣言はできない変数と覚えておきましょう。

varは再宣言可能な変数

では最後に、varはどのような変数なのかという点ですが、constでもletでもできなかったことができます。

それゆえに扱いが難しい変数です。

varは再宣言も再代入もできます。

letではエラーを吐いていた下記コードもvarならエラーはでません。

varは再宣言可能な変数 (javascript)#26703e102675
var num = 4;
console.log(num);
 
var num = 5;
console.log(num);
▸ 実行ボタンで結果を表示

まとめ

constとletとvarをまとめると以下のようになります。

Constletvar
再代入不可可能可能
再宣言不可不可可能

結論JavaScriptの場合は基本的にconstを多用していき、constではうまくいかない場合に、letを使うという考え方で大丈夫かと思います。

ですが、cosntとletとvarをより深く理解しようとすると、変数のスコープという考え方等が出てきます。

初学者の場合なんとなく上記のようなことを覚えておき、余裕が出てきたら再度深く学ぶという形の方がいいのではないでしょうか!

この記事のコードと手順は ぜんぶ動作検証済み。 安心して現場で試してくれ。
バイブス父さん

現役の業務SE。C# / SQL Server 保守の現場から、コードも人もキャリアも全部書く。 実体験ベース。

運営者について