【JavaScript】変数宣言基礎 ~var巻き上げ~

プログラミング

公開:2020年7月20日

どうも、えんつかです！

JavaScriptの基礎である変数宣言について書いていきまーす！
JavaScriptって色々な変数宣言の種類あるけど、どれ使えばええの？varなんて使わなくて良くない？と思ったらちゃんと用途あったのでメモがてら書いていきます！

【JavaScript】変数宣言基礎 ~var巻き上げ~

JavaScriptの変数宣言はご存知の通り以下の通りですね。

var
let
const

元々は「var」が利用されていたのですが、ECMAScript2015から「let」と「const」が利用できるようになったようです。

なぜ利用できるようになったかというと、「var」はグローバルに利用できて上書き可能な変数宣言だったので思わぬバグを招く恐れがあったからのようです。なので、そういったことを招かないように「let」や「const」が誕生した経緯があります。

なるほどなるほど。じゃー「let」や「const」使っとけばええな！？と私は思っていましたが、違いました！

巻き上げ(hosting)について

例えば、以下のコードの場合、変数の宣言部分が最も近い関数またはグローバルスコープの先頭に移動しているように見える動作のことを、変数の「巻き上げ」と呼びます。


function fn() {
// 内側のスコープにある変数が参照されている(undefined)
    console.log(x); // undefined(まじか!?)
    {
        var x = "test";
    }
    console.log(x); // "test"
}
fn();

実際の実行時には次のように解釈されています。


function fn() {
// 内側のスコープにある変数が参照されている(undefined)
    var x;
    console.log(x); // undefined
    {
        x = "test";
    }
    console.log(x); // "test"
}
fn();

「let」では変数を宣言する前にその変数を参照するとReferenceErrorの例外が発生するのに対して、「var」はそうならず、どこで宣言しても参照されるのです！これが「巻き上げ」…

基本的な利用としては、外部から参照できないようにスコープ範囲を考えて宣言して、変数を利用することが好ましいですが、そのような利用とならない場合は「var」を用いて「巻き上げ」をすることで利用が可能となります！！

あまり積極的に利用するものではないですが、困った時にはお試しあれ！！！

以上！

ほんじゃ〜ね〜

タグ