— javascript, tutorials — 1 min read
今日は関数の続きです。前回は 関数はオブジェクトである と言う話をしました。
第一級オブジェクトという言い方に引っかかるかもしれませんが、要するに 「普通のオブジェクトと同じ」 という意味です!
1// こんな風に`宣言`と`格納`を一行で書くこともできます、「関数式」と言います2var fuga = function (){3 return 1 + 14}5 6var a = fuga() // 実行7console.log(a)
1var fuga = function hoge(){2 return 1 + 13}4 5console.log(fuga) // console.log は `関数` でしたね? 覚えてますか
さあ、この関数がオブジェクトであるという性質は「どういう時に役に立つ」でしょうか?
setInterval()
は、一定の遅延間隔を置いて関数を繰り返し実行する関数です。関数オブジェクトを引数にとる代表的な関数と言えます。
最初の引数に関数オブジェクトを指定し、二つ目の引数に間隔をms単位で指定します(1.0秒=1000㍉秒)。戻り値はinterval ID
と呼ばれるものです。
setInterval()
で繰り返し実行している処理を止めたい場合は clearInterval()
という関数を使って停止することができます。
MDNには下記のように書いてありますが、こちらの読み方はまた後日・・・
1var intervalID = scope.setInterval(func, delay[, param1, param2, ...]);2var intervalID = scope.setInterval(code, delay);
1// Consoleで試してみよう2var n = 03function func (){4 n += 1 // この関数が呼び出されるたびに 変数:n が1ずつ増えていく5 console.log("hello: " + n)6}7 8var intervalId = setInterval(func, 200) // 200ms毎に `hello` と出力される
止めたい時は・・・
1clearInterval(intervalId) // intervalIdを指定して繰り返しを止める
次回以降に詳しく解説します。アロー関数といいます。 「( ) の中に引数を、 { } の中に処理を書く」というのは通常の関数と同じです。
() => {} // 何もしないアロー関数
1var n = 02var intervalId = setInterval(() => {3 n += 14 console.log("hello: " + n)5}, 200)6 7// 下記で`関数そのもの`を setInterval の引数にしています8// () => {9// n += 110// console.log("hello: " + n)11// }
関数に関数を渡せるので、ある関数の中で実行したい関数(callback関数)を定義することができる。関数の実行を遅延させたい場合等に便利です。
「パンが焼けたら、食べる」みたいな感じです。パンが焼ける前にパンを食べることはできないので、パンが焼きあがったら食べてくださいという命令です。パンが焼き上がるまでの時間が不明な場合に使えます。
コンピュータプログラムは命令に忠実に実行されるので、「電話をかけて、要件を話す」という命令の時に「相手が電話に出る前に要件を話し始めてしまう」といった状況が発生してしまうことがあります。電話をかけて相手が受話器をとるまでに通常では数秒から数十秒程度のタイムラグがありますが、callbackの仕組みを使うことで、相手が電話口に出た時にはすでに要件を話おえていて、相手に何も伝わらなかったというような事態の発生を防げます。
実際のプログラムでは通信などネットワークの状況によって処理にかかる時間にばらつきがあるような処理で使われます。 「ネットワークに接続して必要なデータを取得したら、そのデータを使った何かをする」 といった時によく使います。
1// loopFunctionは、関数(func)と関数の実行回数を引数に取る2// この関数は、引数で指定した関数を指定回数だけ実行する3function loopFunction (func, count) {4 for(let i=0; i < count; i++){5 func() // `func`は関数オブジェクト ()をつけて関数を`実行`する6 }7}8 9// 書き方1 アロー関数を引数に指定10loopFunction(() => {11 console.log("hello")12}, 3)13 14// 書き方2 関数式を引数に指定15loopFunction(function() {16 console.log("Good mooning")17}, 3)18 19// 書き方3 関数オブジェクトを引数に指定20function goodbye(){21 console.log("goodbye!!")22}23loopFunction(goodbye, 7) // goodbye() としないこと!!
setTimeout という関数もあるので、使い方を調べて使ってみよう!使い方分からなければ質問して下さい。
次回は、制御構文です
次回はこちら JavaScript道場:8日目 / 制御構文 if