組み込みクラス
Arrayクラス
今まで何気なく扱ってきたJavaScriptの配列ですが、実はArrayクラスのインスタンスです。具体的に言えば、配列リテラルが生成するオブジェクトは、Arrayクラスのインスタンスです。
Arrayクラスには、開発効率を劇的に変える便利なメソッドが大量に定義されています。
mapメソッド
Array#mapメソッドは、関数の引数をひとつとり、配列の各要素に対して関数を実行し、それらの戻り値からなる新たな配列を返します。
2行目のmapメソッドの引数として渡しているアロー関数式value => value * 2は、引数をひとつとり、その値を2倍にして返す関数です。この関数が配列の各要素に対して実行されて、その戻り値の集合がdoubledNumberとなっています。
filterメソッド
Array#filterメソッドは、関数の引数をひとつとり、配列の各要素に対して関数を実行し、それらの戻り値がtruthyだったもののみからなる新しい配列を返します。
アロー関数式value => value % 2 === 0は、引数が偶数の場合falseを、奇数の場合trueを返す関数です。numbersのうち6と8の場合のみ戻り値がtrueとなるので、その2つのみからなる新しい配列がevenNumbersに入ります。
DOMオブジェクトと継承
DOMオブジェクトも、何らかのクラスのインスタンスだとみなせます。例えば、
のようにして取得されたdiv要素は、HTMLDivElementクラスのインスタンスだと考えられます。
HTMLDivElementについて記述している文書を読んでみましょう。おなじみtextContentプロパティやstyleプロパティが存在していませんね。
これには、継承と呼ばれる仕組みが関係しています。継承とは、その名の通り機能を受け継ぐための仕組みです。ここでいう機能とは、例えばプロパティやメソッドです。継承先のオブジェクトでは、継承元のプロパティやメソッドを使用することができます。
DOMは非常に高度な枠組みです。今回の例でいえば、HTMLDivElementはHTMLElementを継承しており、HTMLElementはElementを、そしてElementはNodeを継承しています。そしてHTMLDivElementは、そのすべてを利用できるのです。
実は、textContentはNodeオブジェクトのプロパティで、styleはHTMLElementオブジェクトのプロパティです。どのプロパティがどのオブジェクトに所属するのかを具体的に記憶する必要性はあまりありませんが、リファレンスを調べる場合にこの知識は大変有用です。
課題
Array#reduceメソッドは、配列のすべての要素から、単一の値を導き出す(次元を下げる)メソッドです。
reduceメソッドの第一引数は、引数を2つとる関数です。配列の各要素をこの関数の第二引数に渡し、戻り値を次の実行時に第一引数として渡します。この第一引数は、初回実行時にはreduceメソッド自体の第二引数が用いられます(ただしこの引数が省略された場合は配列の最初の要素が用いられ、実行回数が1回分減ります)。
reduceメソッドを使用して、配列の最小値を求めてみてください。