[TypeScript] 変数の宣言

はじめに

TypeScript は JavaScript と同様に変数の宣言をすることができます。

変数宣言で使用できるキーワードには、var, let, const がありますので、それぞれの違いについて説明します。

目次

var による変数の宣言

JavaScript と同様に var キーワードを使用して変数を宣言することができます。var を使用して宣言した変数はグローバルスコープもしくは関数スコープになります。

以下にグローバルの例を示します。この例では1行めで変数 x を宣言しています。この x は関数 doSomethingA の中でも doSomethingB の中でも使用することができます。

doSomethingA が実行された場合は、1行めで代入された 3 を表示した後に 5 を代入しています。

続いて、doSomethingB が実行されると、先ほど代入された5を表示します。

var x = 3;

function doSomethingA() {
    console.log(x);

    x = 5;
}

function doSomethingB() {
    console.log(x);
}

doSomethingA();  // 3 を表示
doSomethingB();  // 5 を表示

上記のコードの変数 x の宣言場所を doSomethingA に変更した場合もみてみましょう。こちらは関数スコープの例です。

function doSomethingA() {
    var x = 3;
    console.log(x);

    x = 5;
}

function doSomethingB() {
    console.log(x);
}

doSomethingA();
doSomethingB();

変数 x は関数 doSomethingA  の中でのみ宣言しています。よってコンパイルすると、以下のようにコンパイルエラー「Cannot find name ‘x’」が発生します。これは、doSomethingB では変数 x が宣言されていないにもかかわらず使用しようとしたことを意味します。

グローバルスコープを持つ変数はバグを産む可能性がありますので、使用する場合は注意しましょう。

let による変数の宣言

宣言前の読み書き

続いて let キーワードによる変数の宣言についてみていきましょう。

var で宣言した変数は使用後に宣言をすることが許されますが、let で宣言した変数は使用後の宣言は許されていません。以下に例を示します。

function doSomethingA() {
    console.log(x);  // 宣言前の使用が許される。値は Undefined になる
    var x = 3;
}

function doSomethingB() {
    console.log(x);  // エラーになる
    let x = 3;
}

同一名の変数宣言

TypeScript の変数名は大文字と小文字が区別されます。よって name, Name, NAME という変数名は区別して扱われます。

var による変数の宣言は、同一変数名であったとしても複数回宣言することができますが、let による変数は同一名の変数を複数回宣言しようとするとエラーになります。以下に例を示します。

function doSomethingA() {
    var name = "A";
    var Name = "B";
    var NAME = "C";

    var name = "D"; // 同一変数名でもエラーにならない
    var Name = "E"; // 同一変数名でもエラーにならない
    var NAME = "F"; // 同一変数名でもエラーにならない
}

function doSomethingB() {
    let name = "A";
    let Name = "B";
    let NAME = "C";

    let name = "D"; // 同一変数名なのでエラーになる
    let Name = "E"; // 同一変数名なのでエラーになる
    let NAME = "F"; // 同一変数名なのでエラーになる
}

ブロックスコープ

let で宣言された変数はブロクスコープを持ちます。基本的には{}内で宣言した変数は、その{}の内側で使用可能だと覚えておけば大丈夫です。

以下に例を示します。

2行目の変数 x は doSomethingA の先頭で宣言されています。よって一番外側の{}の中で使用可能な変数です。つまり doSomethingA の中であればどこでも使用可能です。

5行目の変数 y は if 文の{}内がスコープになります。よって if 文を抜けた後は使用できませんので 12行めはエラーになります。

function doSomethingA() {
    let x = 3;

    if (true) {
        let y = 5;

        console.log(x);
        console.log(y);
    }

    console.log(x);
    console.log(y);  // エラーになる
}

let による変数の宣言では同一名を使用できないと説明しましたが、ブロックスコープが異なる場合につき使用可能です。以下に例を示します。変数 x は2行目と 5行目で宣言していますが、ブロックスコープが異なります。7行目はif文の中の x の値が表示され、10行めは 2行めの x の値が表示されます。

function doSomethingA() {
    let x = 3;

    if (true) {
        let x = 5;

        console.log(x); // 5 
    }

    console.log(x); // 3
}

const による変数の宣言

定数を使用したい場合は const キーワードで変数を宣言します。

以下に例を示します。

function doSomethingA() {
    const tax = 1.08;

    // 定数なので以下のように再代入はできない
    // tax = 1.1; 

    console.log(tax);
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください