関数とオブジェクト

JavaScript においては、関数も一種のオブジェクトです。関数自体を数値や文字列と同じく通常の値として扱うことができます。

ヒント

関数のこのような性質を第一級関数と呼びます。

関数を変数に代入する

function doSomething() {
  document.write("Hello World!");
}

const someVariable = doSomething;
someVariable();

上の例では、関数doSomethingをsomeVariableに代入しています。関数が入った変数は、そのまま通常の関数と同様に使用できます。

関数を関数の引数として使用する

function callTwice(callback) {
  callback();
  callback();
}

function sayHello() {
  document.write("Hello");
}

callTwice(sayHello);

callTwiceの内部のcallbackには関数が格納されているので、そのまま実行することができます。

無名関数

無名関数とは、名前を持たない関数のことです。アロー関数式は、JavaScript において無名関数を生成する式の一種です。

先ほどの例を、無名関数を用いて書き換えてみましょう。

callTwice(() => {
  document.write("Hello");
});

アロー関数式は、(引数) => { 処理 }の形をとります。上記の例では、() => { document.write('Hello'); }の部分が、引数を取らず、Helloと表示する無名関数を生成する式となっています。

アロー関数式の省略形

アロー関数式には、2 つの省略記法が存在しています。両方を組み合わせることも可能です。

引数の括弧の省略

アロー関数の引数が 1 個だけのとき、引数の括弧は省略できます。

(x) => {
  return x * 2;
};

は、

x => {
  return x * 2;
};

のように省略できます。

return文とブロックの括弧の省略

アロー関数式内がreturn文ただ 1 つのとき、return文と波括弧が省略できます。

(x) => {
  return x * 2;
};

は、

(x) => x * 2;

のように省略できます。

課題

function map1To10(callback) {
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  for (let i = 0; i < numbers.length; i++) {
    numbers[i] = callback(numbers[i]);
  }
  return numbers;
}

map1To10を適切に呼び出して、以下の戻り値を得てください。

[3, 6, 9, 12, 15, 18, 21, 24, 27, 30];