varとletとconstの違い

はじめに

自分が忘れないために備忘録的な物として残します。
ES6から変数宣言に利用可能なletとconstが追加されました。
10年選手のWEBアプリの開発をやっていたりすると、世の中から取り残される。
varとletとconstの違いを理解した上で、今後はletやconstを使う。

先にまとめ

	初期化なしの宣言	再宣言	再代入	スコープ
var	可能	可能	可能	関数
let	可能	不可能	可能	ブロック
const	不可能	不可能	不可能	ブロック

var

初期化なしの宣言

可能

var x;

再宣言

可能

var x = 1;
var x = 2;

再代入

可能

var x = 1;
var x = 2;
console.log(var); // 2

スコープ

関数スコープ

var x = 0;
function fn(){
    var x = 1;
    console.log(x); //1
}
fn();
console.log(x); //0

var x = 0;
function fn(){
    console.log(x); //0
}
fn();
console.log(x); //0

function fn(){
    var x = 1;
    console.log(x); //0
}
fn();
console.log(x); //ReferenceError: x is not defined

let

初期化なしの宣言

可能

let x;

再宣言

不可能

let x = 1;
let x = 2; // SyntaxError: Identifier 'x' has already been declared

再代入

可能

let x = 1;
x = 2;
console.log(x); // 2

スコープ

ブロックスコープ

{
    let x = 1;
    if(1){
        x = 2;
        console.log(x); // 2
    }
    console.log(x); // 2
}

{
    if(1){
        let x = 1;
        console.log(x);
    }
    console.log(x);// ReferenceError: x is not defined
}

{
    let x = 1;
    {
        // この場合はスコープがブロックのため、同じ変数の宣言と判断されない
        let x = 2;
        console.log(x); // 2
    }
    console.log(x); // 1 
}

{
    for(let x=0; x<1; x++){
        console.log(x); //0
    }
    console.log(x);// ReferenceError: x is not defined
}

const

初期化なしの宣言

不可能

const x; // SyntaxError: Missing initializer in const declaration

再宣言

不可能

const x = 1;
const x = 2; // SyntaxError: Identifier 'x' has already been declared

再代入

不可能

const x = 1;
x = 2; // TypeError: Assignment to constant variable.
console.log(x); // 2

スコープ

ブロックスコープ

    const x = 1;
    {
        // この場合はスコープがブロックのため、同じ変数の宣言と判断されない
        const x = 2;
        console.log(x); // 2
    }
    console.log(x); // 1

変数の巻き上げ

JavaScriptでは、関数内で宣言されたローカル変数は、すべてその関数の先頭で宣言されたものとみなされる。

{
    let x = 1;
    {
        console.log(x); // ReferenceError: Cannot access 'x' before 
        // この場合はスコープがブロックのためか、同じ変数の宣言と判断されない
        let x = 2;
        console.log(x); // 2
    }
    console.log(x); // 1
}

参考： 知らないと怖い「変数の巻き上げ」とは？