質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

Q&A

解決済

1回答

1319閲覧

javascriptで関数式でも完全な巻き上げが発生する?

defeatist

総合スコア35

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

0グッド

1クリップ

投稿2018/11/22 19:18

こちらでconst宣言初期化子アロー関数として挙げられている

js

1const f = () => { 2 console.log("call f"); 3 g(); // 後から定義する関数を書いても問題が無い。 4}; 5const g = () => { 6 console.log("call g"); 7}; 8// main 9f(); // 最後に実行する。 10```について、 11`let``const`などを使用した関数式では中途半端な巻き上げが発生し、`ReferenceError`が発生すると思っていたのですが、実行してみると 12```js 13call f 14call g 15```と出力され、エラーは発生しませんでした。 16この結果から考えると、関数式でも完全な巻き上げが発生しているとしか思えないのですが、実際そうなのでしょうか? 17それとも別の謎の力が働いているのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

g();が評価される前にconst g = 【アロー関数】;が評価されているのでエラーは起きません。重要なのはどの順番で評価されるかです。

関数宣言、関数式やアロー関数の定義自体が評価されるとき、関数オブジェクトは生成されますが、その関数の中身は全く評価されません。コード全体に対する文法チェックは行われますが、変数が存在するのか、メソッドが存在するのかと言ったことは一切チェックされません。ましてや、変数の初期化が終わっているのかなど全く見ることはありません。

それらの関数が呼び出されたとき、初めて関数の中身が評価されます。このときになって内部で宣言されていない変数をスコープチェーンを通じて探しに行き、どの変数であるかが決定されます。ちょうど、オブジェクトにおいてプロパティをプロトタイプチェーンで探しに行くことと同じです。

実際どうなるかを見ていきましょう。

  1. 始めに文法チェックが行われます。
  2. トップレベルで宣言の確認を行います。
  3. 変数fと変数gがトップレベルのレキシカル環境レコードに登録されます。このとき、変数は__未初期化__(undefinedのことではありません)という特別な状態になります。
  4. const f = 【アロー関数】;の評価を始めます。
  5. まず、アロー関数の定義自体を評価し、書かれた中身の関数オブジェクトを生成します。このとき、関数の中身自体が評価されないことに注意してください。
  6. レキシカル環境レコードに登録済みの変数fが未初期化であることを確認し、先程生成した関数オブジェクトにfに紐付けます。
  7. const g = 【アロー関数】;の評価を始めます。動作はfと一緒で、生成された関数オブジェクトがgに紐付くことになります。
  8. f();の評価を始めます。
  9. fを現在の環境(トップレベルのレキシカル環境)からスコープチェーン(トップレキシカル->グローバル)に従って検索します。トップレベルのレキシカル環境レコードにあるfであることがわかります。
  10. f自体を評価し、fに紐付けられた関数オブジェクトを得ます。
  11. fに紐付けられた関数オブジェクトに対して引数無しで呼び出し(call)を行います。
  12. fに紐付けられた関数オブジェクトの中身の評価を始めます。
  13. console.log("call f");を評価します。評価の結果、"call f"をコンソールに表示します。
  14. g();の評価を始めます。
  15. gを現在の環境(関数内部のレキシカル環境)からスコープチェーン(f内部レキシカル->f内部関数->トップレキシカル->グローバル)に従って検索します。トップレベルのレキシカル環境レコードにあるgであることがわかります。
  16. g自体を評価し、gに紐付けられた関数オブジェクトを得ます。
  17. gに紐付けられた関数オブジェクトに対して引数無しで呼び出し(call)を行います。
  18. gに紐付けられた関数オブジェクトの中身の評価を始めます。
  19. console.log("call g");を評価します。評価の結果、"call g"をコンソールに表示します。
  20. 関数の終端なので、戻り値undefinedで戻ります。
  21. 関数の終端なので、戻り値undefinedで戻ります。
  22. スクリプトの終端なので、処理が終了します。

変数が未初期化の状態で変数に対する評価を行うとReferenceErrorが発生します。実際はもっと細かいエラー処理などを行っています。詳しくはECMAScriptの仕様書を確認してください。

投稿2018/11/22 21:46

raccy

総合スコア21733

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defeatist

2018/11/27 01:07

ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問