ブログ:プログラミング学習にて

巻き上げはこうして起こる

下の見本は、2階層でも、1階層と同じ変数名で定義しようとしています。

let test = true;
if(test){
    let fruits = "みかん";
    console.log("階層1:", fruits);

    if(test){
        console.log("階層2:", fruits);
        let fruits = "りんご";
    }
}

この場合consoleには、「階層1:みかん」という出力と、エラー文が表示されます。

階層が違うので再宣言にもなりませんし、しようとしていること自体は問題ありません。ただ、定義し直そうとしているlet fruits = "りんご";の記述が、console.log("階層2:", fruits);の後ろにきていることが原因のエラーです。

let fruits = "りんご";は2階層全体に影響を与えています。ただ後ろに書いているので、2階層で出力されるはずの変数がまだ初期化されていない、ということになっています。

このような挙動を巻き上げと呼びます。

巻き上げが起きないように変数宣言する

エラーが起きないように2階層で定義し直す方法、つまり巻き上げを防ぐ方法として、関数で使用するローカル変数は、関数の先頭で宣言するようにすることです。

下の見本は正常に、「階層1:みかん」「階層2:りんご」と出力されます。

let test = true;
if(test){
    let fruits = "みかん";
    console.log("階層1:", fruits);

    if(test){
        let fruits = "りんご";
        console.log("階層2:", fruits);
    }
}

「変数宣言は関数の先頭でする」ということを常に守るべきです。