読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~eachメソッド~

Underscore.js コードリーディング

chuckです。

UnderScore.jsを読んでいきます。

 

chuckwebtips.hatenablog.com

 

今回からはいよいよメソッド部分について見ていきます。

 

 

今回読むのはeachメソッド

 

使い方

こんな風に使います。

f:id:chuck0523:20150922103217p:plain

第一引数にコレクションを取り、第二引数に関数を取ります。この例だと、[5, 3, 8 ]に対してconsole.logを適用して、ログ出力しています。

 

ライブラリでの定義

この通り。

f:id:chuck0523:20150922103502p:plain

1行ずつ見ていきます。

 

プロパティに代入

まず1行目。

f:id:chuck0523:20150922103554p:plain

アンダースコアオブジェクトのプロパティとして、eachを作成して関数を代入しています。forEachにも同様の関数を代入していますね。

関数の引数が3つあります。objはコレクションで、iterateeがコレクションに対する関数です。contextは必須ではないと思うので、飛ばします。

 

iterateeの最適化

2行目。

f:id:chuck0523:20150922103857p:plain

引数で与えられたiterateeとcontextを用いて、関数を最適化しています。

optimizeCbについては、以前見ましたね。contextがundefinedだった場合は、最適化は行われません。なので今回は、optimezeCb( iteratee, context )の結果は単なるiterateeとなります。

 

chuckwebtips.hatenablog.com

 

 

そして、iterateeという変数に代入しています。

iterateeについては、少し前で定義されています。

f:id:chuck0523:20150922104156p:plain

 

ループ用変数の定義

3行目。

f:id:chuck0523:20150922104555p:plain

ループ用の変数を定義しています。

 

配列かオブジェクトかで分岐

4行目。

f:id:chuck0523:20150922104628p:plain

if文です。isArrayLike(obj)はこちらです。

 

f:id:chuck0523:20150922104720p:plain

まあ、要は配列であるかどうかをチェックしています。

それにしても、MAX_ARRAY_INDEXで配列の限界を定めていますね。こんなの考えたことなかったです。2の53乗ですね。

こんなに要素が入った配列は現実的にはありえないかもしれませんが、頭の片隅に入れておきます。

 

走査処理

5〜13行目。

f:id:chuck0523:20150922105200p:plain

eachの本体とも言えるループ処理です。要素の数だけループさせて、iteratee関数を実行しています。

その際に、事前にlengthに要素数を格納していますね。処理の中で配列の要素数が変わるかもしれませんし、事前定義は良いことだと思います。

そしてiteratee関数には、要素とインデックス、配列そのものを渡していますね。

 

一方、こちらがオブジェクトへの処理。

f:id:chuck0523:20150922105445p:plain

やっている内容は一緒ですね。

ただ、新たにオブジェクトのキーを取得しています。keysもUnderScoreの関数の1つですね。

 

処理の終了

14行目。処理を終了する時に、コレクションを返しています。

f:id:chuck0523:20150922105835p:plain

 

以上でeachメソッドの解説は終了です。

関数の最適化など、難しいことをやっていますが、肝心なコアの部分はJavaScript初心者でも充分わかります。

次回からも引き続き、UnderScoreの関数を見ていきます。