# Javascript var let const 変数宣言の違い

今まで var と let は一緒、const は定数となんとなく使い分けていたが、これからなんとなくを卒業します。

const var let の違い

const let var
ES バージョン ES6 以降 ES6 以降 すべてバージョン
再宣言 × ×
再代入 ×
スコープ ブロック ブロック 関数
ホイスティング エラー エラー undefined
グローバル宣言 window 属性 × ×

var は ECMAScript のすべてのバージョンに対応していますが、const と let は ECMAScript 6 以降しか使えません。なので、IE など古いブラウザーで const let 使ってたらエラーで javascript が動きません。

# var 宣言

var message;
// undefined

var message = "hello";
// hello

message = 1;
// 問題なく動くが、非推薦

文字列から数字に代入してもエラーなくプログラム動きます。このような途中から変数タイプを変更することは ECMAScript 非推薦になります。動くけど

# var 宣言スコープ

var 宣言スコープによってエラーになる場合があります。

function helloworld() {
  var message = "hi"; // スコープ変数
}

helloworld();

console.log(message); // エラー

グローバル変数宣言

関数の中でグローバル変数を宣言することができますが、メンテナンスが難しくなり、エラー発生しやすくなります。

# var 宣言優先

var 宣言は自動的に関数の上に昇格されるが、let はされない

function foo() {
  console.log(age);
  var age = 26;
}
foo(); // undefined

ECMAScript 実装時は以下のソースと同等

function foo() {
  var age;
  console.log(age);
  age = 26;
}
foo(); // undefined

なので、上記のコードはエラーになりません。
let なら ReferenceError になります。

# let 宣言

let と var の使い方はほとんど一緒で、違いは let の宣言範囲はブロックスコープ内、var の宣言は関数スコープ内になります。

if (true) {
  var name = "Matt";
  console.log(name); // Matt
}
console.log(name); // Matt

if (true) {
  let age = 26;
  console.log(age); // 26
}
console.log(age); // ReferenceError: age 未定義エラー

宣言スコープ以外のところから変数使おうとしたら、ReferenceError になります。

重複宣言は SyntaxError になります。

var name;
var name; // SyntaxError

let age;
let age; // SyntaxError

var name;
let name; // SyntaxError

let age;
var age; // SyntaxError

同じスコープではなければ、SyntaxError エラーになりません。

var name = "Nicholas";
console.log(name); // 'Nicholas'
if (true) {
  var name = "Matt";
  console.log(name); // 'Matt'
}
console.log(name); // 'Matt'

let age = 30;
console.log(age); // 30
if (true) {
  let age = 26;
  console.log(age); // 26
}
console.log(age); // 30

# var let グローバル宣言時の違い

var name = "Matt";
console.log(window.name); // 'Matt'
let age = 26;
console.log(window.age); // undefined

# for 文の中の var と let の違い

let はブロックスコープ内のみのため for 文の外ではリファレンスエラーになります。

// var
for (var i = 0; i < 5; ++i) {
  // 処理
}
console.log(i); // 5

// let
for (let i = 0; i < 5; ++i) {
  // 処理
}
console.log(i); // ReferenceError:

// varの落とし穴
for (var i = 0; i < 5; ++i) {
  setTimeout(() => console.log(i), 0);
}
// 出力 5 5 5 5 5

# const 宣言

const は let の使い方は基本的に一緒ですが、違いは一度代入した値は変更できないこと、宣言最初から値に代入する必要であること。

const age = 26;
age = 36; // TypeError

代入しようとしたら TypeError
重複宣言は SyntaxError になります。

宣言範囲は let と一緒でブロックになります。

const name = "Matt";
if (true) {
  const name = "Nicholas";
}
console.log(name); // Matt

# まとめ

ES6 は 2015 年公開してから、今は各ブラウザが対応済みで兼用性の心配なく使えるようになりましたが、古いブラウザーに対応する必要があるプロジェクトは気をつけなければなりません。
var の定義が厳密でないため、大きいプロジェクトではバグの原因になります。ES6 で追加された const と let は明確に使えるスコープ規定しているため、var よりメンテナンスしやすくなります。変動ない値は const それ以外は let 使うこと!古いブラウザーのみ var 使う!

ES6 とは

2015 年に標準化された ECMASCript 6th Edition のこと、正式名称は ES2015 です。

2022-04-15
  • javascript

関連記事

Javascript 非同期処理 async と await のメモ
javascript  指定場所にスムーズにスクロールする方法
Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
react 強制的にレンダリングする方法
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Jsconfig と Tsconfig
Cookie localStorage sessionStorage の違い
Javascript 電話番号フォーマット
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
javascript 開発で出会った TypeError
開発時によく使うゼロ埋めパディング作業まとめ
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
javascript reduce 連想配列の合計計算覚えよう
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード
開発におけるコーディングルール・規約