TypeScriptでループの中であれば宣言前の関数を記載した場合でもコンパイルエラーにならないのは何故か

Question

知りたいこと

タイトルの通りなのですが、ループの中であれば宣言前の関数を記載した場合でもコンパイルエラーにならない理由を知りたいです。

export const test = () => {
  func()
  //error: ブロック スコープの変数 'func' が、宣言の前に使用されています。ts(2448)
  //       変数 'func' は割り当てられる前に使用されています。ts(2454)


  void [...new Array(100)].forEach(() => {
    func()  // OK
  })

  const func = () => {
    console.log('func')
  }
}

尚、この関数「test」を実行してもループの中では何も行われません。
何故ループの中だとコンパイルエラーが発生しないのでしょうか。

ご教示いただけると幸いです。
よろしくお願いいたします。

Answer 1

  void [...new Array(100)].forEach(() => {
    func()  // OK
  })

今回のコードは拾えなかったですが、
こっちならワンチャン拾えるんじゃないですか？試してみてください。
void [...new Array(100)].forEach(func)

ご教示いただけると幸いです。

これはループではありません。
コールバック関数(作ったばかりのアロー関数)を伴ったメソッド実行です。
(このコードの目的はまさに実行して結果を捨てるタイプの「ループ処理」なんですけどね)

このアロー関数で括っているというのがコンパイルエラーが出ない原因と考えられます。

JSの根幹部分として関数実行した時は関数スコープが生成され、
変数が存在しなければ上の変数まで探しに行くという仕様です。

仮にTypeScriptだからといって、この仕様を禁止すれば
require等のビルトインの機能に頼る事が出来なくなるので根本から破綻します。
なのでforEach等のメソッド実行時にコールバック関数を渡すやり方では拾えなくなるのでしょう。

まぁ、バリバリの関数型のやり方をしないのであれば、
forEachを禁止するみたいなコーディング規約を作るのが良いんじゃないですかね？
質問文の例だと普通にfor文で良くね？感ありますし。

Comments

[tanana_m]

ご回答いただきありがとうございます。

void [...new Array(100)].forEach(func)

上記を試してみましたが拾えませんでした。

> アロー関数で括っているというのがコンパイルエラーが出ない原因と考えられます。
確かに、foreachをやめて単純にアロー関数を定義してその中でfunc()でも同様の現象となりました。
原因を捉え違えていたようです。ありがとうございます。

> JSの根幹部分として関数実行した時は関数スコープが生成され、
> 変数が存在しなければ上の変数まで探しに行くという仕様です。
こちらに関して詳しく知りたいのですが、説明されているドキュメントもしくは技術記事があれば教えていただきたいです。
上の変数まで探しには行くけど、結局自分より前に定義されていないと実行されない、ということで良いでしょうか？

[miyabi-sun]

> 上記を試してみましたが拾えませんでした。
あぁ、参照じゃダメなんですね……
あくまで関数実行しないと怒ってくれないんですね。
勉強になりました。

> 説明されているドキュメントもしくは技術記事があれば教えていただきたいです。
そういえば、先輩からそう習って動作検証して覚えたっきりだったなと調べてみました
「スコープチェイン」「レキシカルスコープ」の2つで先に進めるかと思います。

https://jsprimer.net/basic/function-scope/#scope-chain

> 変数を参照する際には、現在のスコープ（変数を参照する式が書かれているスコープ）から外側のスコープへと順番に変数が定義されているかを確認します。

他の参考記事
http://dmitrysoshnikov.com/ecmascript/chapter-4-scope-chain/
https://mixiengineer.hatenablog.com/entry/2011/10777/

レキシカルスコープはこちら
https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures#lexical_scoping
https://meetup-jp.toast.com/923

下の記事の下部にあるホイスティングは巻き上げで、
同一スコープのvarとfunctionキーワードを使って宣言されたものは上で呼び出せてしまうという厄介な挙動に関してのお話ですね。
今回のケースとはちょっと違います。

[tanana_m]

ご丁寧にありがとうございました！