《JavaScript》ホイスティング(変数の巻き上げ)とは何か

JavaScript

ホイスティングについて

関数宣言と関数リテラルの違い

関数宣言をして関数を定義した場合を考えます。

関数宣言をした場合は関数の前で呼び出しても、関数を呼び出すことができます。

一方関数リテラルの場合は、関数リテラルの前で呼び出しを行うとTypeErrorになります。

これはJavaScriptがソースコードを処理をする時に「宣言>代入」の順番で処理が行われることが原因です。そして宣言の読み込みはその宣言が記述されているスコープの中で初めに処理されることを「ホイスティンング(巻き上げ)」と言います。上のコードは関数リテラルの代入が行われていない時点で関数を呼び出してしまっているため関数ではありませんといったTypeErrorが発生しているのです。

ホイスティングを発生させてみた

次のコードをみてください。ホイスティングを意図的に発生させたコードです。

hogeFuncの中のhogeを呼び出したタイミングではグローバル変数もローカル変数もまだ代入されていないため未定義値として出力されていることが確認できると思います。

番外:その他おすすめの記事

開発がもっと快適に、楽しくなるアイテムを紹介します。アイテム1つで開発の楽しさが全然変わるので、良いアイテムにはじゃんじゃんお金を投資すると良いですよ。

おすすめアイテム①

自分はオフィス次の2点の座布団と背もたれクッションを利用してます。姿勢が安定し、お尻への負担が激減します。オフィスにいるのに自宅で作業しているような感覚になるので気に入ってます。また疲労感もかなり減るので費用対効果が非常に高いアイテムです。

おすすめアイテム②

ブックスタンドみなさん使ってますか?PCを打ちながら参考書見る時に手で抑える必要がなくなるので非常に便利です。自分も購入した時なんでいままで使ってなかたんだろうと後悔したのでまだ持ってない方は買っておくと作業効率があがります。

おすすめアイテム③

PCスタンド、magic keyboard、magic mouseを購入してから、開発効率があがり、身体的負担が減って快適に開発ができるようになりました。

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。初心者には最低限読んでおいて欲しい技術本をまとめました。例えば「リーダブルコード」などは技術力の高いエンジニアなら必ず過去に読んでいる本だと思います。

時短アイテム!日々の生活の質を上げる

日常生活における無駄を省く表品をまとめました。1日無駄な作業時間が10分発生するとしたら1年間で3600時間もその無駄な作業に時間を費やすことになります。このような魔の作業を消し去ってくれる商品をまとめました。。

気軽にお声かけください

このような形でほぼ毎日、情報発信を行ってます。技術的な部分で誤っている点などもあるかもしれません。その様な部分を発見した方はTwitterのDMなどで知らせていただければ凄い嬉しいです。また自身自身のエンジニアのネットワークを広げたいと思ってます。日頃六本木や渋谷にいることが多いですので気軽にお誘いください。情報交換しましょう。

筆者
筆者

今回の記事の内容は以上で終了です。最後まで読んでくれてありがとうございました。Twitterもやってるのでフォローしてくれたら嬉しいです!

タイトルとURLをコピーしました