JavaScript 変数の宣言のvar/let/constの違い

JavaScriptの変数の宣言のvar/let/constの違いについてです。

確認環境
・Windows10
・Google Chrome

目次

変数の宣言(var/let/const)

変数の宣言は、変数の前にvarまたはletまたはconstを付けます。
letとconstはECMAScript 2015で使用できるようになりました。

コード

varとletとconstの宣言と初期化のサンプルです。

<script>
	// 変数の宣言
	var i;

	let j;

//	const k; //Missing initializer in const declaration

	// 変数の初期化
	var l = 2;

	let m = 2;

	const n = 2;

</script>

3行目は、varで変数の宣言をしています。
5行目は、letで変数の宣言をしています。
7行目のconstは、変数の宣言だけの場合エラーになります。
10,12,14行目は、変数の宣言と同時に値を代入しています。変数の初期化ともいいます。

 

varとletとconstの違い

違いとして、スコープと値の再代入の可不可があります。

  スコープ 再代入
var 関数スコープ 再代入できる
let ブロックスコープ 再代入できる
const ブロックスコープ 再代入できない

varは、関数スコープです。
letとconstは、ブロックスコープです。ブロックとは、波括弧{ }で囲んだ箇所です。
また、letは再代入可で、constは再代入不可です。

constは、定数での使用というより、スコープもvarより狭いので再代入不可の変数であれば使用します。
letも、varよりスコープが狭いので再代入可の変数であれば使用します。

var

varのサンプルコードです。

<script>
{
	var i;  //varの宣言
	i = 1 + 2;
	console.log(i); //3
}
console.log(i); // 3
</script>

3行目は、ブロック内でvarを宣言しています。
5,7行目とも値は表示されます。

let

letのサンプルコードです。

<script>
{
	let j;  //letの宣言
	j = 2 + 3;
	console.log(j); //5
}
//console.log(j); // Uncaught ReferenceError:j is not defined
</script>

3行目は、ブロック内でletを宣言しています。
5行目は値が表示されます。
7行目はブロックの外なのでエラーになります。

const

constのサンプルコードです。

<script>
{
	const k = 9;  //constの宣言
//	k = k + 3;	//Uncaught TypeError: Assignment to constant variable.
	console.log(k); //9
}
//console.log(k); // Uncaught ReferenceError: k is not defined
</script>

3行目は、ブロック内でconstを宣言しています。
4行目は、constの値に再代入しようとしていますがエラーになります。
5行目は値が表示されます。
7行目はブロックの外なのでエラーになります。

 

constantの値を変更する

constは、再代入はできませんが、オブジェクト(参照系のもの)に格納された値の変更はできます。

<input type="text" id="input1" value="赤" maxlength="6">

<script>
	const qs1 = document.querySelector("#input1");
	qs1.value = "青"; //値の変更は可能

//	qs1 = "a"; //Uncaught TypeError: Assignment to constant variable.
</script>

4行目は、querySelectorメソッドで1行目を取得しています。戻り値はElement オブジェクトです。
5行目は、オブジェクトにあるvalueの値を変更しています。可能です。
7行目は、値の再代入をしようとしていますがconstの制約でエラーになります。

 

strictモード

"use strict";
  • 変数の前にvar/let/constをつけずに、その変数に値を代入すると、グローバル変数になってしまうので注意が必要です。
  • グローバル変数はどこからでもアクセスできる変数です。
    →strictモードであればエラーにしてくれるので、なるべくstrictモードを使用した方がよいです。
  • strictモードを使用する時は"use strict";と記述します。
  • 以下は、MDNのStrictモードのページです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Strict_mode

コード

サンプルのコードです。

<script>
	"use strict";
	i = 2; //Uncaught ReferenceError: i is not defined
</script>

2行目は、strictモードにしています。
3行目は、変数の宣言をせずに値を代入しようとしているのでエラーになります。

関連:strictモードの時の即時関数の注意点

関連の記事

JavaScript データ型

△上に戻る