<JS>var let const の違いまとめ
公開日：2020/04/06
更新日：2020/05/18
var
変数の「再宣言」ができる。
code:再宣言できる.js
var greeting = "おはよー";
var greeting = "こんにちは";
greeting // => "こんにちは"
ブロックスコープを認識しない（ブロックを抜けても変数が有効）
code:ブロックスコープ.js
var wao = 100;
console.log(wao); // => 100
{
var wao = 200;
var bao = 1000;
console.log(wao); // => 200
}
console.log(wao); // => 200
console.log(bao); // => 1000
宣言無し
関数の内外どこで宣言してもグローバル変数になる。
StrictモードではRefarenceErrorになる。
let
varとの違いはブロックスコープ（局所変数）
ブロックとはコレ → {} if文とか、関数とかね
ブロックの中で宣言した変数はブロックの外からは呼び出せない。
ブロック外で宣言したwaoと内のwaoは別の変数として扱う。
code:ブロックスコープ.js
let wao = 100; // => グローバル変数
{
let wao = 200; // => ローカル変数
let bao = 1000;
console.log(wao); // => 200
}
console.log(wao); // => 100
console.log(bao); // => Uncaught ReferenceError: bao is not defined
「再宣言」できない
code:再宣言できない.js
let greeting = "おはよー";
let greeting = "こんにちは"; // 以下全て => Uncaught SyntaxError: Identifier 'greeting' has already been declared
const greeting = "こんにちは";
var greeting = "こんにちは";
「再代入」はできる
code:再代入出来る.js
let greeting = "おはよー";
greeting = "こんにちは"; // => "こんにちは"
変数の巻き上げ（ホイスティング）が起こらない（起こってはいるらしいが、参照できない）
code:変数の巻き上げ.js
console.log(greeting);
let greeting = "おはよー"; // => Uncaught ReferenceError: Cannot access 'greeting' before initialization
//こっちも同様
oyasumi = "おやすみ";
let oyasumi;
console.log(oyasumi);
const
「再代入」できない変数の宣言。（定数のような）
code:再代入出来ない.js
const greeting = "おはよー";
greeting = "こんにちは"; // => TypeError: invalid assignment to const 'greeting'
もちろん「再宣言」もできない。
code:再宣言できない.js
const greeting = "おはよー";
const greeting = "こんにちは"; // 以下全て => Uncaught SyntaxError: Identifier 'greeting' has already been declared
let greeting = "こんにちは";
var greeting = "こんにちは";
「初期値」が必要
code:初期値が必要.js
const oha4; // => Uncaught SyntaxError: Missing initializer in const declaration
オブジェクトの再代入はできない。
code:オブジェクトの再代入.js
const a = { 'price': 100 };
a = { 'hello': 100 }; // => Uncaught TypeError: Assignment to constant variable.
配列の再代入はできない。
code:配列の再代入.js
a = 'cat'; // => Uncaught TypeError: Assignment to constant variable. letと同様のブロックスコープ
code:ブロックスコープ.js
const wao = 100;
{
const wao = 200; // OK
console.log(wao); // => 200
}
console.log(wao); // => 100
プロパティ値は変更可能
code:オブジェクト内のプロパティの値を変更.js
const a = { 'price': 100 };
a.price = 200;
console.log(a); // => {price: 200}
配列の要素は追加出来る
code:配列要素の追加と削除.js
a.push(100);
a.pop();
まとめ
できるだけconstを使う。
varはレガシーブラウザに対応しないといけないとき以外は使う必要無し。
Strictモードを使おう。（まずは関数の初めにつけて使う）
参考にさせてもらった素晴らしい記事
【JS入門】ブロックスコープについて（let, const） - 吉本集の個人ブログ 様