JavaScriptの変数の巻き上げ【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptの変数の巻き上げについて、変数の巻き上げの問題と対策に分け、簡単に解説していきます。

変数の巻き上げの問題

JavaScriptには変数が巻き上げを起こす問題があります。

変数の巻き上げとは、ローカル変数の宣言が暗黙的にローカルの一番上でされることです。

var hoge = "ほげ";
function fn() {
    console.log(hoge); // undefined
    var hoge = "hoge";
    console.log(hoge); // hoge
}
fn();

上記のコードでは、fn関数内でhoge変数が巻き上げを起こし、一番最初のhoge変数の値がundefinedになります。

ローカル変数として使う場合

ローカル変数として使用する場合には、変数宣言はローカルの一番上で行います。

関数内で変数宣言を行う場合には、関数の一番最初に行うことで巻き上げを避けることができます。

var hoge = "ほげ";
function fn() {
    var hoge = "hoge";
    console.log(hoge); // hoge
}
fn();

上記のコードのように、グローバル変数と同名のローカル変数を宣言する場合は明示的に一番上で行うと良いでしょう。

グローバル変数として使う場合

グローバル変数として使用する場合には、ローカルでは変数宣言は行う必要はありません。

関数の外側のグローバルで宣言された変数は、関数内では変数宣言をせずとも参照することが可能です。

var hoge = "ほげ";
function fn() {
    console.log(hoge); // ほげ
}
fn();

上記のコードのように、グローバル変数を関数内で使う場合には、関数内でもそのまま参照しても何も問題はありません。