超絶お久しぶりです。
なんとブログを書くのが6ヶ月空いてました笑(笑い事じゃない…)
今日は、関数の巻き上げ(ホイスティング)について勉強したので備忘録として記事にします。
まず、ホイスティングとはなんなのか全くわからなかったので調べてみたところ
変数や関数の定義をコードが実行される前にメモリに配置すること
その動作から「宣言の巻き上げ」とも言われるようです！！
一体どういうことなのか…
簡単なコードを記述して調べてみました…
まずは、
・関数の定義での宣言の巻き上げ(ホイスティング)です。
hoge(); //関数が宣言される前に、関数が実行されている。
//hoge()は実行される。
function hoge() {
console.log("Hello World")
}実は、このコードが、関数の巻き上げを表していたようでした。
どういうことなのか調べてみたところ
コードが実行される前に関数定義がメモリに配置されているので実行することができるようです。
(リファレンス)
まず、関数を宣言(“function hoge( )” )する前に関数の実行(“hoge( )”)がされているのがわかりました。
動くのならいいのでは？と思ったのですが、ちゃんと理由をわかっていないと危険なようでした。
・理由
上記の例では、関数定義の例ですが、下記は、関数リテラルについての例です。
関数リテラル…変数に関数を代入する。
hoge(); //hoge is not function
const hoge = function () {
console.log("Hello World")
}この場合の結果は、
hoge is not function でhogeなんて関数ないよと言われています。
なぜ? _:(´ཀ`」 ∠):
const hoge で変数宣言をしているのですが、
変数を宣言する際には、パソコンのメモリに箱を作ってそこに、値を代入するということになります。
その後、その箱の中身が呼び出されたら、値を取り出すという形になります。
上記の例では、
変数の箱を作る前に、関数が実行されているので、結果としてエラーを吐かれています。
同じ宣言をする前に関数を実行しているのに、結果が違いました！！
これが、ホイスティング(関数の巻き上げ)の怖さでした。
自分はここに気づかずに”関数宣言しているのになんで！！”となっていました。
もりけん塾(https://terracetech.jp/ourvalue/morikenjuku/)
もりけん先生ブログ(https://kenjimorita.jp/)
