MENU

【Javascript】ホイスティングってなに?

2021 2/19
【Javascript】ホイスティングってなに?

こんにちは、りっくんです。

今回はJavascriptの概念である「ホイスティング」というものについて触れていこうと思います。

目次

ホイスティングとは?

結論から言いますとこちらは、
変数や関数の定義内容がコードの実行前のメモリに格納される挙動のことを指します。
(別名:宣言の巻き上げ)

実際のコードを見ていきましょう。

b(); //関数bを実行

//関数bを定義
function b(){
  console.log('foo');
}

こちらは実行が可能です。

ここで確認したいのが、Javascript関係なく、基本的にプログラミングというものは記述した内容が上から読み取られ、
実行されるという原則が一般的だと思います。

しかし、こちらは実行より後に関数を定義しているにも関わらず、問題なく関数bを実行することができます。

これが“ホイスティング”と呼ばれる事象です。

ホイスティングというのは一般的に、
・変数、関数の定義

で発生する事象になります。

先の例では関数で述べましたが、変数の場合だと、

console.log(b);変数を参照。

var b  = 10; //変数宣言

こちらの実行結果は、「undefined」となり、
変数bはconsole.logによって参照することができます。

これは変数bがコードの実行前にメモリに確保されることによりこのような結果となります。

ちなみに、コードの実行前はメモリの確保だけが行われ初期値の「undefined」がbに入るので、
のちに代入される値「10」はこの時点では入っておりません。

let,const による変数宣言の注意

ちなみに、変数の宣言の方法として他にletやconstがあると思いますが、
これらはホイスティングの挙動がvarとは異なります。

こちらもコードを確認していきます。

console.log(b); //変数を参照。

const b  = 10; //変数宣言

こちらは実行結果が以下のようになります。

Uncaught ReferenceError: Cannot access 'b' before initialization

これは変数bに値が入っていない(初期化されていない)という内容です。
let や const の場合は、メモリの確保はされますが varの時と違ってundefined値が格納されないので、
変数の値を参照することができないという仕組みになります。

関数式の注意

また、関数の定義方法として「関数式」があると思いますが、
こちらの挙動も上で述べたlet,const と同じ挙動になります。

log(); // 関数を実行

//関数を定義
const log = () => {
    console.log('foo');
}

こちらの結果も以下のようになります。

Uncaught ReferenceError: Cannot access 'log' before initialization


先の例と同じですね。

関数式にすると通常の関数宣言とは異なり、
let,const と同様のホイスティングの挙動になるので、
うまく関数を実行することができなくなります。

関数実行は宣言よりも先に書いても大丈夫だから〜といった感じで
脳死でコードを書いているとこういったエラーがに出くわしてしまいますので
是非このような挙動の違いも理解しておきましょう。

まとめ

ホイスティングとは

変数や関数の定義がコードの実行前のあらかじめメモリに格納される挙動

を指します。

同じ定義宣言でも方法によっては挙動が異なることがありますので注意ですね。

まだまだ勉強中の身になりますので、
何か至らない点等がございましたら、遠慮なくお申し付けいただけると幸いです。


もりけん塾に入っております!

もりた先生のブログ: kenjimorita.jp (武骨日記)
もりた先生のアカウント: twitter.com/terrace_tech

参考

https://www.udemy.com/course/javascript-essence/learn/lecture/19797180#overview

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる