こんにちは、大学院でIT系の研究を専攻している、ひらりんです。
JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！
本記事では、JavaScriptの変数宣言で用いるvar・const・letのについて説明します。変数宣言は言語によって異なり、なんとなく使えるけど、違いについては詳しく理解できてなかったりしますよね。
JavaScriptの変数宣言で用いるvarとconst、letについて、基本から解説するので、JavaScriptの学習を始めた方や、変数のスコープ（公開範囲）を取り入れたプログラムを書きたい人はぜひ読んでみてください。
目次
変数宣言とは？
変数の宣言は、どの言語を用いたプログラミングにおいても欠かすことはできない基本概念です。プログラミングにおいて、何度も同じ数値を繰り返し記述したり、入力された値や文字によって、実行内容を変更したいことってありますよね。そんなとき、数学でも用いた変数が役立ちます。
文字列や数値などのデータに名前をつけることで、変数とすることができます。変数の宣言には、変数自体の名前や格納されるデータの型を指定し、繰り返し利用できます。
しかし、突然「xの値は～」と言われても困っちゃいますよね。それはプログラムも一緒で、変数を使う際には、「こんな変数を使いますよ」という変数宣言が必要となります。Pythonなど、一部のプログラム言語では宣言が不要な場面もありますが、JavaScriptは変数の宣言をする必要があります。
そこで、まずはJavaScriptにはどのような型や種類があるのか確認していきましょう！
JavaScriptのデータ型の種類
JavaScriptのデータ型は、基本型のプリミティブ（Primitive）と複合型のオブジェクト（Object）の2つに大別されます。それぞれの特徴と各データ型について簡単に解説します。
プリミティブ型（基本型）
プリミティブ型は、オブジェクトに関連する関数であるメソッドを持たないデータのことを表します。プリミティブ型の特徴として、値の変更ができない点が挙げられます。変数に対して、新しい値を再度割り当てることはできるものの、最初に指定した既存の値の変更ができないということです。例を用いて説明します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// プリミティブ型の値を定義 let num_p = 3; // 値を1加える関数 function add_one(num){ num += 1; } // add_one関数を呼び出し、num_pを代入し実行 add_one(num_p); // 実行後のnum_pの値を表示 console.log(num_p); |
後で説明しますが、プリミティブ型の値をletにより定義しました。値を1加える関数add_oneを通し、num_pを用いて関数を呼び出しますが、最後の行で表示されるnum_pの値は3のままとなります。
これは、プリミティブ型の値は変更不可であり、元の値はそのまま保存されていて、コピーされた値に変更を加えているに過ぎないためです。つまり、関数内で値の変更を実施しても、コピーに対して作業していたため、最初に定義されたnum_pには影響されないということになります。
オブジェクト型（複合型）
JavaScriptのオブジェクト型とは、プロパティ名と値をペアで複数持っている組となっているデータを表します。JavaScriptだと、JSON形式のデータはこれに当たります。しかし、いざ説明されても理解が難しいですよね。以下のプログラムを使って説明します。
|
1 2 3 4 5 |
const Ami = { address: Kanagawa, gender: woman, age: 25 }; |
こちらも、あとで解説しますが、オブジェクト型の値をconstによって定義しました。中括弧｛｝内の、コロンの左側にあるのがプロパティで、右が値となります。顧客データなどを管理する際に便利で、ここではAmiさんの住所（address）や年齢（age）のデータを保持しています。それぞれの値を呼び出す際には、以下のように記述します。
|
1 |
Ami.address |
このように、オブジェクト名.プロパティ名と記述することで、中括弧内に保持されているデータを取り出すことができます。ここでは、Kanagawaと表示されます。
JavaScriptの変数宣言
では、本記事の主題である、JavaScriptの変数宣言の違いを理解するために、varとconst、letについてそれぞれ解説します。変数宣言の違いは、その用途や公開範囲が影響するので、プログラム内容によって使い分ける必要があります。特に、「関数内かどうか」と「上書きできるか」が重要な視点です！
var
1つ目の変数宣言はvarです。変数の再宣言や再代入が可能で、上書き保存ができるのが特徴です。以下がその例です。
|
1 2 3 4 5 6 7 8 9 10 |
function() { var num = 1; console.log(num); // ① var num = 2; console.log(num); // ② num = 3; console.log(num); // ③ } |
同じ関数内なら、変数が有効です。上から順に実行されるため、①では1が表示されます。再定義や代入も可能なため、②では2が表示され、③では3が表示されます。
さらに、以下のようにif文内の定義でも、変数は引き継がれます。
|
1 2 3 4 5 6 |
function () { if (true) { var num = 10; } console.log(num); // ④ } |
上のように、if内の条件がtrueで実行された場合、numには10が格納され、if文の外の④では10が表示されます。
const
2つ目はconstです。変数の再宣言や再代入をすることができず、気付かずに同じ変数を定義してしまうとエラーになってしまいます。
|
1 2 3 4 5 6 7 |
function () { const num = 1; console.log(num); // ① const num = 2; // エラーがでる console.log(num); // ② } |
①では2行目で定義されたnumの1が表示されます。しかし、numはここで定義されたため、5行目のnumの再定義ではエラーが出てしまいます。そのため、numはここでは上書きされることはなく、②では1が表示されてしまいます。
ブロックスコープであることも特徴として挙げられます。中括弧｛｝ごと（ブロックごと）に定義されるスコープのことをブロックスコープと言い、この中で宣言された変数は、外へ引き継がれることなく、ブロック内でのみ扱える変数となります。
|
1 2 3 4 5 6 7 8 9 |
function () { const num = 1; if (true) { console.log(num); // ② const num_1 = 5; console.log(num_1); // ③ } console.log(num_1); // ④ } |
②では、if外ではあるものの、function内なのでnumの1が表示されます。if内で定義されたnum_1は、③では5が表示されますが、if外の④では表示されずにエラーとなります。num_1に関しては、if文のブロック内で定義されたため、ブロック外の④ではnum_1が引き継がれません。
let
最後はletです。再宣言はできませんが、再代入は可能です。letもconstと同様でブロックスコープであるため、ブロック外では値が引き継がれません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function () { let num = 1; console.log(num); // ① let num = 5; // エラーになる num = 10; console.log(num); // ② if (true) { let num_1 = 200; console.log(num_1); // ③ } console.log(num_1); // ④ エラーになる } |
①では、2行目で定義されたnumの1が表示されます。4行目ではnumの再定義になるため、エラーになってしまいます。しかし、5行目はnumの再代入なため可能で、②では上書きされたnumの10が表示されます。③では、if文内で定義されたnum_1の200が表示されますが、if外の④では、num_1の値が引き継がれずにエラーになってしまいます。
まとめ
いかがでしたでしょうか？今回は、JavaScriptの変数宣言として、varやconst、letについて説明しました。
変数宣言は、プログラミングにおいて基礎中の基礎な概念ですが、一度しっかり学習すれば十分でしょう。ぜひ、JavaScriptのvar・const・letについて理解し、Webサービス作成やシステム構築に活かしてください。
