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

Arrow Function

関数式にはfunctionキーワードを使った方法以外に、Arrow Functionと呼ばれる書き方があります。名前のとおり矢印のような=>（イコールと大なり記号）を使い、匿名関数を定義する構文です。

Arrow関数では、受け取る値や利用する機能を制限している項目が多いため、厳密な値のみを取り扱うことが出来るようになっています。よって、Functionキーワードで記述する関数よりもArrow Functionを使うことが推奨されています。

匿名関数とは?

関数式では、名前を持たない関数を変数に代入できます。このような名前を持たない関数を匿名関数（または無名関数）と呼びます。

匿名関数として定義された関数は、関数名がないので関数名での呼び出しは出来なくなります。ただし、匿名関数を変数に代入することで、関数の外でも中でも利用することが出来るようになるのです。
Functionキーワードを使って定義される関数は関数名で呼び出すことが出来ますが、変数に代入して利用することで再利用する際に便利になります。

// Arrow Functionを使った関数定義
const 関数名 = () => {
    // 関数を呼び出したときの処理
    // ...
    return 関数の返す値;
};

Arrow Functionの省略記法

関数の仮引数が1つのときは()を省略できる

関数の処理が1つの式である場合に、ブロックとreturn文を省略できる

その式の評価結果をreturnの返り値とする

以下でfunctionキーワード関数をArrow Functionに書き直しながら、省略手順を紹介していきます。

// この関数式をArrow Functionに書き直して、省略手順を紹介していきます。
// 関数式
const 関数名 = function() {
    // 関数を呼び出したときの処理
    // ...
    return 関数の返り値;
};

まず、Arrow Functionに変換するためには、functionキーワードを削除し、=>記号を引数と関数の処理の間に挿入する必要があります。

// Arrow　Functionに変換
const 関数名　= (引数) => {
  return 関数の返り値;
};

Arrow Functionに変換できたので、省略記法を使っていきます。

//{}を外すと式になる。
const 関数名の変数名 = (引数)=> 関数の返り値;
//{}を（）に書き換えて、文を式にすると値を返すので、return文不要
const 関数名の変数名 = (引数)=> (関数の返り値);
//{}をつけると文になる。今回{}は関数を宣言するための{}です。文の評価結果を返す必要があるので、return文を省略できません。
const 関数名の変数名 = (引数)=> { 
  return 関数の返り値;
};

現在推奨されているのは、関数の引数を囲む()は省略せずにreturnを省略する書き方をするやり方です。 const doubleArray = array.map(value => value * 2); ではなく、このように書きます。 const doubleArray = array.map((value) => value * 2);

// 仮引数の数と定義
const fnA = () => { /* 仮引数がないとき */ };
const fnB = (x) => { /* 仮引数が1つのみのとき */ };
const fnC = x => { /* 仮引数が1つのみのときは()を省略可能 */ };
const fnD = (x, y) => { /* 仮引数が複数のとき */ };
// 値の返し方
// 次の２つの定義は同じ意味となる
const mulA = x => { return x * x; }; // ブロックの中でreturn
const mulB = x => x * x;            // 1行のみの場合はreturnとブロックを省略できる

Arrow Functionの特徴

名前をつけることができない（常に匿名関数）

thisが静的に決定できる（詳細は「関数とスコープ」の章で解説します）

functionキーワードに比べて短く書くことができる

newできない（コンストラクタ関数ではない）

arguments変数を参照できない

// mapメソッドで使う配列変数array1を定義
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
// 仮引数が1つなので`()`を省略できる
// 関数の処理が1つの式なので`return`文を省略できる
const doubleArray = array1.map(value => value * 2);
console.log(doubleArray); // => [2, 4, 6]

文とは？

if文などのように{}の中に処理を記述するものを文と呼びます。文では、明示的に値を返すためにreturnの記述が必須です。returnを記述しないと、呼び出し側で値を返せないのでエラーになってしまいます。 return文は関数の実行を終了して、関数の呼び出し元に返す値を指定します。

式とは？

return文を記述しないで、式で評価したい値を返すことが出来ます。　式を評価するとそのまま値を返すので文字列やオブジェクトリテラルを使うときはテンプレートリテラルなどを使う必要があります。

Arrow Functionの中で、if文を使う例

const fn = (x)=>{
  if ( x > 10 ){
    return `${ true? x : x}は10より大きい`
  }else{
    return '10より小さい'
  };
};

console.log(fn(11))

リファクタリング後

const fn = (x)=>(
  (x>10) ? `${ true? x : x}は10より大きい` : '10より小さい'
);

console.log(fn(11))

Arrow Functionでは、人による解釈や実装の違いが生まれにくくなります。

コラム

()で書くと式として評価される
{}で囲うと文として評価されるから、中での処理をreturnで返す必要があり、returnを書かないと値を何も返さないものvoid型となり、undefinedが返ります。
関数の中でしかreturnは使えない。受け手が必要だからです。returnはピッチャーみたいな存在でキャッチャー(引数)がいないとエラーになります。
{}で書く時は、オブジェクトリテラルを表す場合と関数を宣言する時に使われます。
オブジェクト(プロパティ)とは、キーとバリューを組み合わせた値のことです。ここで、プロパティを囲んでいる{}がオブジェクトリテラルです。
例: {key: value}
リテラルとは、あるものを囲うものです。 ``や""は文字列を囲うので文字列リテラル。オブジェクトを囲うのがオプジェクトリテラル{}。

まとめ

function()で記述すると、function関数
() =>で記述すると、Arrow Function

参照

JavaScript Primer 関数はオブジェクト