2022/10/15 (更新日: 2022/10/24)

var,let,constについて

JavaScript

一覧

	var	let	const	関数宣言文
再宣言	できる	できない	できない	できる
スコープ	持たない（関数スコープのみ）	持つ	持つ	持たない（関数スコープのみ）
ホイスティング	される(初期値はされない)	されない	されない	される(初期値もされる)
グローバルオブジェクトへの追加	される	されない	されない	される
再代入	できる	できる	できない	される

一覧の解説

再宣言

var hoge = 'hoge';
var hoge = 'foo';

スコープ

{
	var hoge = 'hoge';
	let foo = 'foo';
}
function fuga () {
	var fugafuga = 'fugafuga';
}
console.log(hoge); // hoge
console.log(foo); // エラー
console.log(fugafuga); // エラー

ホイスティング

console.log(hoge); // エラー
console.log(fuga); // undefined
let hoge = 'hoge';
var fuga = 'fuga';

• varで何が起きているか

var fuga;
fuga = 'fuga';

グローバルオブジェクトへの追加

var apple = 'apple';
let banana = 'banana';
console.log(globalThis); // appleプロパティが登録
												// bananaはない

再代入

let hoge = 'hoge';
hoge = 'fuga'; // できる

const fuga = 'fuga';
fuga = 'hoge'; // エラー

varと関数宣言文は似ている

• 違いはホイスティングの初期値の挙動のみ

console.log(hoge); // undefined
fuga(); // fuga

var hoge = 'hoge';
function fuga () {
	console.log('fuga');
}

なぜ関数宣言文の挙動は古いvarに似ているのか

• 後方互換性を保つため
  • 古いコードが動くように配慮されている

保守性の高いコードを書くために

• scriptタグの先頭に以下の様に記述する

<script>
'use strict'

</script>

use strictで変わる事

• 関数宣言文がブロックスコープを持つ

{
	function hoge() {
		console.log('hoge');
	}
}
hoge(); // use strictだとエラーになる

• 同じパラメータを与えられない

function hoge (a,a,a){}; // ダメ

• 宣言文を使用しない宣言ができなくなる

hoge = 'hoge'; // use strictじゃないとできてしまう

• Tweet