bootstrapのカスタムフォームについて

現在下記サイトの一番下にあるプレビュー付きのカスタム選択のコードを読んでいるのですが、
わからないところがある為質問させてください。
https://cccabinet.jpn.org/bootstrap4/javascript/forms/file-browser

javascriptのコードのところで、

$('.custom-file-input').on('change', handleFileSelect);
function handleFileSelect(evt) {
        $('#preview').remove();// 繰り返し実行時の処理
        $(this).parents('.input-group').after('<div id="preview"></div>');

    var files = evt.target.files;

    for (var i = 0, f; f = files[i]; i++) {

        var reader = new FileReader();

        reader.onload = (function(theFile) {
            return function(e) {
                if (theFile.type.match('image.*')) {
                    var $html = ['<div class="d-inline-block mr-1 mt-1"><img class="img-thumbnail" src="', e.target.result,'" title="', escape(theFile.name), '" style="height:100px;" /><div class="small text-muted text-center">', escape(theFile.name),'</div></div>'].join('');// 画像では画像のプレビューとファイル名の表示
                } else {
                    var $html = ['<div class="d-inline-block mr-1"><span class="small">', escape(theFile.name),'</span></div>'].join('');//画像以外はファイル名のみの表示
                }

                $('#preview').append($html);
            };
        })(f);

        reader.readAsDataURL(f);
    }
    $(this).next('.custom-file-label').html(+ files.length + '個のファイルを選択しました');
}

reader.readAsDataURL(f)；でreader.onloadが反応して関数がイベントを受け取っているのは理解できているのですが、
そのイベントを受け取る関数に引数を渡す関数の引数であるtheFileが何者かわかりません。

https://developer.mozilla.org/ja/docs/Web/API/FileReader

一応上記のサイトで調べているのですが、探し方が悪いのか見つかりません。

reader.readAsDataURL(f)；が成功し、onloadでハンドリングされると、
必ず読み込んだファイルが格納される？theFileが存在するのでしょうか？

日本語的におかしいところや、認識違いによる誤った説明になっている部分もあるかと思いますが、
参考になるサイトなどございましたら教えていただけると幸いです。

ご確認よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1//                     ↓ ここでファイルを「f」に代入
2    for (var i = 0, f; f = files[i]; i++) {
3        var reader = new FileReader();
4//                                   ↓ 即時関数の仮引数
5        reader.onload = (function(theFile) {
6//                 ↓ 関数（onloadに入る関数）を返している
7            return function(e) {
8                if (theFile.type.match('image.*')) { /* 略 */ }
9                $('#preview').append($html);
10            };
11//         ↓ 即時関数の引数にファイル渡す
12        })(f);
13//                           ↓ ここでファイルを読み込ませる
14        reader.readAsDataURL(f);
15    }