2021年10月19日 JavaScript (JS Primer) - ６時だョ!!全員集合!!

関数をオブジェクトとして扱う

JavaScriptの関数は、オブジェクトの一種です。オブジェクトとして扱えるので、変数に代入できます。

function fn() {
    console.log("さむい");
}
// 関数`fn`を`myFunc`変数に代入している。
const myFunc = fn;
myFunc; 
// => function fn() { console.log("さむい"); }

関数内の処理を実行したい場合、関数名の後ろに()をつけます。関数を実行することを、"関数を呼び出す"と言います。

myFunc(); // => さむい

関数式とは

関数式とは、関数を値として変数へ代入している式のことを言います。関数宣言は文でしたが、関数式では関数を値として扱っています。これは、文字列や数値などの変数宣言と同じ定義方法です。

以下の例では、無名関数が関数式です。

// 関数式
const 関数名 = function() {
    // 関数を呼び出したときの処理
    // ...
    return 関数の返り値;
};

関数式は、functionキーワードを使って宣言した関数と、アロー関数 の2種類があります。

関数名()で変数に代入した関数(関数式)が呼び出せます。

const apple = function() {
    // 関数を呼び出したときの処理
    // ...
    return "Ringo";
};

apple(); // => Ringo

2種類の関数

JavaScriptには、functionキーワードを使って定義される一般的な関数と、矢印記号=>を使って定義されるArrow Functionという関数があります。

// functionキーワードを使って、定義される関数
function () {}

// =>を使って定義されるArrow Function関数
() => {}

function fn() {
    console.log("fnが呼び出されました");
}
const myFunc = fn;
myFunc();  // 関数が入った変数も呼び出し時に()が必要

// 上記は関数`fn`をオブジェクトとして参照することで`myFunc`変数に代入しています。
// 関数をオブジェクトとして参照出来ることをファーストクラスファンクションと呼びます。(ファッションではありません)

コールバック関数

関数(メソッド)の引数として指定できる別の関数です。
一方、コールバック関数を引数として使う関数やメソッドのことを高階関数と呼びます。
上記の例では、withPersonというコールバック関数として使うために定義しています。mapメソッドの引数としてwithPersonをコールバック関数に指定しており、配列オブジェクトpeopleの要素を操作しています。今回の場合、mapメソッドが高階関数になります。

上記の例では、mapメソッドの引数として、無名関数をコールバック関数として指定しています。無名関数は、名前の通り関数名を指定しない関数のことです。無名関数の引数valueにmapメソッドで操作するarrayオブジェクトの配列の要素が1つずつ入ります。無名関数内で、valueを２倍にする処理を行います。実際にmapメソッドが返す値は、array配列内の要素を2倍にした結果を新たな配列として作成したものになります。

mapメソッド

mapメソッドとは、変換したい処理を行うときなどに使われるメソッド（関数）です。配列内の値にある処理を順に行わせてその結果を配列として返すメソッドです。

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

// mapメソッドの使い方
array = [1, 2, 3]
const doubleArray = mapメソッドで処理を行う配列.map(配列の要素に対して、行いたい処理(コールバック関数等)){
    // 配列の要素を一つずつ取り出し、コールバック関数で定義された処理を行う
    // 処理を行なった後の値を新しい配列を生成して返す
}; 

---------------------------------
// mapメソッドの例
const array1 = [1, 4, 9, 16];

// 配列の要素を一つずつ取り出して、引数に渡した処理の戻り値を新しい配列として返します。
// 今回は、配列array1の各要素をxに代入して=>以降の処理（今回は要素を２倍にする処理）を行います。
// 処理後の結果を新しい配列の戻り値としてmap1に代入されます。
const map1 = array1.map(x => x * 2);

console.log(map1);
// 出力される値: Array [2, 8, 18, 32]

今回のようにmapメソッドにコールバック関数を使用した場合の処理の流れとしては以下のようになります。
1. 要素を取り出す。
2. それぞれの要素に対してコールバック関数を実行する。
3. それぞれの実行結果をまとめた新しい配列を作る。

ひとことで言うと、mapメソッドで抜き取った要素を用いて、新しい配列を作る前にどういったルールで作るかをコールバック関数で定義していると考えられます。

参考

JavaScript Primer 関数はオブジェクト