👀

setInterval() の引数にアロー関数を使う【個人学習まとめ】

に公開
JavaScript
tech

setInterval()って？

構文

setInterval(関数,待ち時間);

第一引数に待ち時間(ミリ秒)が経過するたびに実行する関数本体を指定する。
第二引数に待ち時間を指定する(省略可。省略した場合は0になる)。

間違い例

実際に自分がやらかしたコード。

setInterval(fn(...args),t);

このように書くと、fnが即座に実行されてしまいfnの戻り値がsetIntervalに渡される。
fnが(x) => x * 2、argsが[4]の場合、fnの戻り値は8となる。
setIntervalは関数ではなく、値の8を受け取りエラーとなる。

正しい例

最初にも書いたが、setIntervalの第一引数には関数本体を渡す必要がある。

setInterval(() => fn(...args), t);

このように書くことによって、setIntervalにfn(..args)そのものを渡すことができる。

動作

間違い例(fn(...args)を直接渡す)

const fn = (x) => console.log(x * 2);
const args = [4];
setInterval(fn(...args), 1000);

即座にfn(4)が実行されるためエラーとなる。
エラー内容
Uncaught TypeError TypeError [ERR_INVALID_ARG_TYPE]: The "callback" argument must be of type function. Received undefined

正しい例(アロー関数を使って「関数本体」を渡す)

const fn = (x) => console.log(x * 2);
const args = [4];
setInterval(() => fn(...args), 1000);

1秒ごとにfn(4)が呼び出されて、結果8が出力される。

個人的なまとめ

setInterval関数の中でfn(...args)を実行するためにアロー関数を引数として渡すというイメージを持つと分かりやすい。

Discussion