FileReaderオブジェクトのonloadプロパティの代入値について

Question

JavaScript、jQuery初学者です。
わかりにくい部分があれば申し訳ありません。

前提・実現したいこと

参考元
参考元の記事を元に、画像投稿時にプレビューが表示される機能を実装しております。
その際、FileReaderオブジェクトのonloadプロパティに代入されている値について理解出来ない点が二つあり、質問させていただきました。

application.js

$(function(){
   const $fileField = $('#file');

  $($fileField).on('change', $fileField, function(e) {

    let file = e.target.files[0];
    let reader = new FileReader();
    const $preview = $("#img_field");

    reader.onload = (function(file) {
      return function(e) {
        $preview.empty();
        $preview.append($('<img>').attr({
          src: e.target.result,
          width: "100%",
          class: "preview",
          title: file.name
        }));
      };
    })(file);
    reader.readAsDataURL(file);
  });

});

上記のコードを元にプレビュー機能は実装出来ています。
しかし下記の二つのことが理解出来ません。

reader.onload = (function(file) {
      return function(e) {
        $preview.empty();
        $preview.append($('<img>').attr({
          src: e.target.result,
          width: "100%",
          class: "preview",
          title: file.name
        }));
      };
    })(file);

の中で、
1、return function(e)で返ってくるeは

$($fileField).on('change', $fileField, function(e) {
.
.
.

で書かれているchangeに対してのイベントという解釈であっているでしょうか？
私のイメージとして、function(e)はイベントハンドラの引数として渡されて、eが使えるというイメージがあったため、return function(e)が何を表しているのか理解できていない状態です。

２、上記コードの最後で書かれている(file);は何を表しているのでしょうか？
関数の定義の最後に(引数)を書くことで何が起きるのでしょうか？

非常に単純な問題なのかもしれませんが、何卒ご教授のほどよろしくお願いいたします。

Answer 1

changeに対してのイベントという解釈であっているでしょうか？

はい、結果的にはそれがセットされます。

上記コードの最後で書かれている(file);は何を表しているのでしょうか？

それは、外側のfunction(file)を即時実行するための引数です。fileとして与えた引数が、function(file)のfileに代入されます。

---

もっとも、この状況ではわざわざ即時関数を挟む必要がなく、単にreader.onload = function(e) {で書いて問題なさそうです。

Comments

[tokushun109]

返信ありがとうございます。
即時関数というものがあるんですね！勉強になりました。

知りたかった質問にお答えいただきありがとうございました。