JavaScriptのvar・let・constを区別できるようになろう！【初心者向け】

こんにちは、いつも中々布団から出られずにギリギリ出社になる、みもざです。

さて、本題に入りたいと思います。

JavaScriptには変数宣言というものがあり、そこにはいくつかのパターンがあります。

JavaScriptを学び始めたときは、変数宣言のパターンがごっちゃになって理解しにくいですよね、、。

そこで今回は、JavaScriptの変数宣言、constとvarとletについてお話していきます。

記事の主な内容は、

です。

JavaScriptを学んでいるプログラミング初心者の方や、JavaScriptのconstとvarとletについて知りたい方は、ぜひ参考にしてくださいね。

JavaScriptの変数について

【復習】JavaScriptの変数とは？

まずは復習としてJavaScriptの変数について説明します。

変数とは、様々な文字列や数値を入れておく箱のようなものです。箱の中に、文字列や数値などのデータを入れて置いて箱に名前（変数名）を付けることによって使い回すことが出来ます。

これから長いコードを書いていくことになると、長い文字列や同じ数値などを繰り返し使う機会が増えていきます。その時に、変数を使うと、見やすい綺麗なコードを書けたり、手間が省けるメリットがあります。

varについて知ろう

varとは

varとは、variableの略で「変数」という意味です。varは変数宣言をする時に使う命令の一つで、変数宣言の命令の中でも基本的なものとなっています。

後で詳しく説明していきますが、再宣言、再代入ができ関数スコープが適用される特徴を持っています。

varの基本構文

varの基本構文としては、以下のようになります。

ちなみに「,（カンマ）」を使ってまとめて宣言をすることも出来ます。

varの使い方

実際にvarを使ったデモを用意したので、参考にしてくださいね。

See the Pen
var01 by mimosa (@im_mimosa)
on CodePen.

数値には、quotation（クォーテーション）は要りませんが、文字列にはquotationが必要なので文字列を扱うときは忘れないでつけておきましょう。

また、変数名「sample3」を見てもらえばわかりますが、値が入ってなければ「undefined」と表示されます。

letについて知ろう

letとは

letとは、varと同じく変数宣言の一つです。

letでは、再宣言は禁止されていますが、再代入ができ関数スコープ・ブロックスコープともに適用される特徴を持っています。

letの基本構文

letの構文も、varの基本構文と同じで以下のように記述します。

letの使い方

実際にletを使ったデモを用意したので、参考にしてくださいね。

See the Pen
let01 by mimosa (@im_mimosa)
on CodePen.

constについて知ろう

constとは

constとは、変数宣言の一つです。

constでは、再宣言・再代入ともに禁止されていますが、関数スコープ・ブロックスコープともに適用される特徴を持っています。

constの基本構文

constの構文も、varの基本構文とだいたい同じで以下のように記述します。

気をつけたいところは、constは初期値を省略することができないことです。

constの使い方

実際にconstを使ったデモを用意したので、参考にしてくださいね。

See the Pen
const01 by mimosa (@im_mimosa)
on CodePen.

変数名「sample3」を見てもらえれば分かりますが、先述したように、constは初期値を省略できないので、初期値を省略した場合は、エラー（Uncaught SyntaxError: Missing initializer in const declaration）が起こります。

varとletとconst、それぞれどう違う？

再宣言

再宣言とは、一回宣言した変数を、同じ変数名で再度宣言することです。

varは再宣言が可能で、varを用いて再宣言した場合、最後に宣言された変数が適用されます。

一方、letとconstでは再宣言が出来ないため、letやconstを用いて再宣言した場合、エラーになります。

イメージを掴みやすいように、デモを用意したので参考にしてくださいね。

See the Pen
re01 by mimosa (@im_mimosa)
on CodePen.

再代入

再代入とは、宣言した変数に、違う値を設定することです。

varとletは再代入が可能で、varやletを用いて再代入した場合、値が上書きされます。

一方、constでは再代入が出来ないため、constを用いて再代入した場合、エラーになります。

イメージを掴みやすいように、デモを用意したので参考にしてくださいね。

See the Pen
re02 by mimosa (@im_mimosa)
on CodePen.

スコープ

スコープとは、変数がどこから参照できるのかを定義する、変数の有効範囲のことです。

スコープには、グローバルスコープとローカルスコープの主に２種類があります。さらに、ローカルスコープでは、関数スコープとブロックスコープに分けることができます。

それぞれのスコープをざっくり説明する以下のようになります。

つまり、varは関数スコープしか適用されず、letとconstは関数スコープとブロックスコープが適用されることになります。

イメージを掴みやすいように、デモを用意したので参考にしてくださいね。

See the Pen
scope by mimosa (@im_mimosa)
on CodePen.

変数宣言の巻き上げ（ホイスティング）

変数宣言の巻き上げやホイスティングとは、変数宣言が関数の先頭に引き上げられることをいいます。

varで変数宣言し、変数宣言の巻き上げが行われた場合、undefinedと表示されますが、letやconstで変数宣言をし、変数宣言の巻き上げが行われた場合、エラーになります。

See the Pen
hoisting by mimosa (@im_mimosa)
on CodePen.

var・let・constの違い【表】

まとめ

いかがでしたか？今回は、JavaScript初学者にとっては少しややこしい、

を説明させていただきました。

最初の頃は、JavaScriptのvar・let・constはごっちゃになりそうですが、ぜひこの記事を参考にして使い分けができるようになったら幸いです。