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

nas

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

確認環境
・Windows10
・Google Chrome

目次

varとletとconstの違い

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

  スコープ 変数に値を再代入
const ブロックスコープ 再代入できない
let ブロックスコープ 再代入できる
var 関数スコープ 再代入できる
  • constとletは、ブロックスコープです。ブロックとは、波括弧{ }で囲んだ箇所です。
  • varは、関数スコープです。
  • constは変数に値を再代入できません。
  • letとvarは変数に値を再代入できます。
  • constは、定数のときに使用します。また、varよりスコープが狭いので、再代入不可の変数で使用します。
  • letもvarよりスコープが狭いので、再代入可の変数で使用します。
  • letとconstはECMAScript 2015(ES6)で使用できるようになりました。

const

constのサンプルです。

<script>
{
//	const k; //Uncaught SyntaxError: Missing initializer in const declaration
	const k = 0;

//	k = k + 3;	//Uncaught TypeError: Assignment to constant variable.

	console.log(k); //0
}

//console.log(k); // Uncaught ReferenceError: k is not defined
</script>

constは、変数の宣言のみの場合エラーになります。(3行目)
4行目は、constで変数を宣言し初期化しています。
6行目は、変数に値を再代入しようとしていますがエラーになります。
8行目は、ブロック内のため値は表示されます。
11行目は、ブロックの外のためエラーになります。

let

letのサンプルです。

<script>
{
	let j = 0;

	j = j + 3;

	console.log(j); //3
}

//console.log(j); // Uncaught ReferenceError:j is not defined
</script>

3行目は、letで変数を宣言し初期化しています。変数の宣言だけでなく初期化までした方が良いです。
5行目は、変数に値を再代入しています。
7行目は、ブロック内のため値は表示されます。
10行目は、ブロックの外のためエラーになります。

var

varのサンプルです。

<script>
{
	var i = 0;

	i = i + 3;

	console.log(i); //3
}

console.log(i); // 3
</script>

3行目は、varで変数を宣言し初期化しています。変数の宣言だけでなく初期化までした方が良いです。
5行目は、変数に値を再代入しています。
7行目は、ブロック内のため値は表示されます。
10行目は、ブロックの外ですが値は表示されます。

 

constの値を変更する

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 オブジェクトです。
(変数qs1の値は、<input type="text" id="input1" value="赤" maxlength="6">です。)

6行目は、オブジェクトにあるvalueの値を赤から青に変更しています。
8行目は、値を再代入をしようとしていますがconstの制約でエラーになります。

 

strictモード

'use strict';
"use strict";
  • strictモードを使用する時は'use strict';または"use strict";と記述します。
  • 変数の前にvar/let/constをつけずに、変数に値を代入すると、どこからでもアクセスできるグローバル変数になってしまうので注意が必要です。
    strictモードであれば、変数の前にvar/let/constがない場合エラーにります。
  • スクリプト全体を指定する場合は一番上に配置します。ただし非strictモードのスクリプトが存在しないことが前提です。
  • 関数(function)内であれば一番上に配置します。
  • 以下は、MDNのStrictモードのページです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Strict_mode

コード

strictモードのサンプルです。

<script>
function test1(){
	'use strict';
	i = 2; //Uncaught ReferenceError: i is not defined
}
test1();
</script>

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

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

関連の記事

JavaScript データ型

△上に戻る