Search by

    関数の定義? or 実行?

    jsで関数の定義、実行が分かりにくいのでメモ

    jsを書いていると、関数定義をしているのか、呼び出しをしているのか、がわからなくなる。 書き方の種類が沢山あることも混乱に拍車をかける。

    setIntervalで、引数付きのコールバックを無名関数で書くのにハマったので、メモ残しておく。

    間違った書き方


    最初はこう書けばいいと思っていた。

    ※1秒ごとに、hogeというログを残すプログラムです

    var hoge = "hoge" 
    setInterval(
        //即時関数に引数を渡して実行。
        ((x) => { console.log(x); })(hoge),
        1000,
    );

    しかしこれは、1回で実行されるだけで、繰り返されない。 しばらく理由がわからなかったが、この書き方は関数を渡しているのではなく、実行しているからだと気がついた。

    setIntervalには渡らないが、一回だけ実行される状態だと思われる。 (恐らく、setInterval内部ではエラーが出ると思うけど、その情報はどうやって取得すればいいのだろう)

    別の視点として、そもそも時間がかかるから、コールバックにしたいのに、即時実行したら意味がない…。ということも後から気が付きました…。

    正しい書き方


    var hoge = "hoge" 
    setInterval(
        (x) => { console.log(x); },
        1000,
        hoge,
    );

    第三引数にコールバックに渡したい引数をとることが出来る。 「ちょっと分かりにくい…」と感じるのは自分だけかしら。

    因みにこれもダメ


    var hoge = "hoge" 
    setInterval(
        (hoge) => { console.log(hoge); },
        1000,
    );

    定義しているだけで、引数を渡している場所がないので、ログにはundefinedが出力される。

    参考


    reactのチュートリアルに下記の記載があった。

    onClick={() => alert('click')} と記載したときに onClick プロパティに渡しているのは関数であることに注意してください。React はクリックされるまでこの関数を実行しません。() => を書くのを忘れて onClick={alert('click')} と書くのはよくある間違いであり、こうするとコンポーネントが再レンダーされるたびにアラートが表示されてしまいます。

    これも同じ様な問題で、関数を実行しているか、引数として渡しているのかを理解していないと分かりにくいと思う。

    というわで、便利な無名関数をおしゃれ便利にに使っていけるように。がんばります。