JavaScriptのホイスティングを説明してみる2022/01/21に公開・約2,600字・3件のコメントツイートJavaScriptTypeScripttechVue.jsのソースコードを読んでいた際、関数宣言エクスポートされているisReactive内で、isReactive以降で関数宣言エクスポートされているisReadonlyが実行されていることに違和感を持ちました(例1参照)。Target)[ReactiveFlags.IS_READONLY])}恥ずかしながら、関数宣言は関数の実行前に記載されなければならないと思っていました。調べてみるとホイスティング(巻き上げ)という現象が関係しているようで、今回はホイスティングについて整理してみます!※👇読んでいたVue.jsのソースコードhttps://github.com/vuejs/coreホイスティング(巻き上げ)とはコンテキスト内で宣言した変数や関数の定義をコード実行前にメモリに配置すること。イメージ的には、変数や関数の宣言はスコープの最初に行われ、その他の処理は基本的に記載順に実行されると理解しています。具体例ホイスティングによって以下のような挙動が発生します。使用した場合varを利用して変数宣言をする場合、まずはじめに変数testのメモリを確保し、undefinedで初期化されます。その為、変数宣言より前に変数を呼び出すと、undefinedが出力されます(例2参照)。使用した場合しかし、letやconstを利用して変数宣言をした場合、変数testのメモリは確保されるものの、undefinedでの初期化が行われません。その為、変数宣言より前に変数を呼び出すとエラーとなります(例3参照)。関数の定義方法は、大きく分けると1関数宣言、2関数式の2パターンが存在します(例4参照)。関数宣言を使用する場合、関数exampleは、その実行前にメモリ上に配置されます。その為、下記のようにexampleを、実行より下で関数宣言しても、exampleは実行されます(例5)。関数式の場合は、例2〜例3で記載した変数と同じような挙動が発生します。varを使用した関数式の場合、exampleを実行しようとしても、undefinedで初期化されているため、関数ではないと怒られます(例2、例6.1参照)。letを使用した関数式では、example2が初期化されていない為、定義される前に呼び出すとエラーとなります(例3、例6.2参照)。無名関数の省略記法であるアロー関数で関数式を利用した場合も、これらのようなエラーが発生します。}最後に今回の整理で、Vue.jsのソースコードで抱いた疑問は解消されました!雰囲気でJavaScript(とTypeScriopt)を書いてしまっているので、今年は疑問に思ったことは放置せず、理解度をあげて、自分の言葉で語れるようになりたいと思います。※もし、間違い等があればご指摘頂けますと、非常に嬉しいです。最後に参考Zennエンジニアのための情報共有コミュニティAboutZennについて運営会社お知らせ・リリースGuides使い方Publicationよくある質問LinksTwitterGitHubメディアキットLegal利用規約プライバシーポリシ。