TypeScriptをはじめよう 2

#前回のはなし
TypeScriptをはじめよう 1でHello,world!の出力まで行いました。そこで、

 const greet : String = "Hello, world!"

と書きましたが、JavaScriptやTypeScriptの変数宣言にはECMAScript6からlet/constが追加され、var/let/constの3つが存在します。それでは、これら3つはどのように使い分ければいいのでしょうか。はじめは変数宣言の使い分けについて説明します。

#var/let/consの使いわけ
これら変数宣言の大きな違いはローカル変数の参照できる範囲（スコープ）と再宣言可能性と再代入可能性です。それでは例を見てみましょう。

function test(){
    {
        var x = 1
        let y = 1
        const z = 1
    }
    console.log(x) // 1
    console.log(y) // error
    console.log(z) // error
}

上記のコードではブロック内でそれぞれの変数を宣言されています。しかし、y,zは変数が見つからないとエラーを起こしてしまいます。これは、varが関数スコープであり、let/constがブロックスコープであることに起因します。では、これを書き換えます。

function test(){
    var x = 2
    let y = 2
    const z = 2
    {
        var x = 1
        let y = 1
        const z = 1
    }
    console.log(x) // 1
    console.log(y) // 2
    console.log(z) // 2
}

上記のコードではエラー無く実行することができました。しかし、ここで注意が必要となります。このコードでは問題がありませんが、

function test(){
    var x = 2
    let y = 2
    const z = 2
    {
        var x = 1
        let y = 1
        const z = 1
    }
    var x = 3
    let y = 3 // error 
    const z = 3 // error
    
    console.log(x)
    console.log(y)
    console.log(z)
}

上記のコードのように同一ブロック内で宣言するとlet/constではエラーを起こします。これはlet/constが再宣言を許していないからです。
また、

function test(){
    var x = 2
    let y = 2
    const z = 2
    {
        var x = 1
        let y = 1
        const z = 1
    }
    x = 3
    y = 3 
    z = 3 // error
    
    console.log(x)
    console.log(y)
    console.log(z)
}

このように、変数に再代入をする場合、letは許していますがconstではエラーを起こします。

まとめると、以下のようになります。

	ローカルスコープ	再宣言	再代入
var	関数	○	○
let	ブロック	☓	○
const	ブロック	☓	☓

TypeScriptをはじめよう 3