🕌

アロー関数を使ってみよう【JavaScript】

2022/02/06に公開約2,700字1件のコメント

アロー関数とは?

まずは次のコードを見てください。

JavaScript
function add(x, y) {
  return x + y
}

add(3, 5)

いたって普通のコードですね。では、アロー関数を使って書き直してみましょう!
すると...

JavaScript
const add = (x, y) => x + y

add(3, 5)

こうなります!
function{}returnが消えて、代わりに矢印みたいな=>が増えてますね。

基本的な構文

JavaScript
// 引数は矢印の左側に!
(引数1, 引数2, ...) => {
  // 何らかの処理

  return result // 戻り値を返す場合はreturnで返しましょう
}

いろいろと省略する

最初の例でも見たように、アロー関数を使う場合に限って省略できるものがあります。
まず引数が1つだけの場合、丸括弧()を省略できます。

JavaScript
引数 => {
  // 何らかの処理
}

// ダメな例
// 引数が2つ以上の時は、()で囲みましょう
引数1, 引数2 => {
  // 処理
}

次に処理が1行で済む場合は、中括弧{}を省略できます。
ただし、if文やfor文、変数宣言などの制御構文を用いるときは省略できません。

JavaScript
arg => console.log(arg)

// ダメな例
arg => if (arg === 1) return true
//     ↑ if文は{}で囲みましょう

そして、1行で戻り値を返す場合はreturnも省略できます!
ただし、連想配列を返す場合は丸括弧()が必要です

JavaScript
// 元のコード
(x, y) => {
  return x + y
}

// 省略したもの
(x, y) => x + y

// ダメな例
(x, y) => {
  x + y
}
// 中括弧があるときは、returnをつけましょう

// 連想配列を返すとき
(name, age) => ({
  name: name,
  age: age
})
// ()で囲みましょう

アロー関数に名前をつける

functionを使って関数を定義する時とは違い、アロー関数自体には名前がありません。
そこで、アロー関数を変数に代入して名前をつけてみましょう!

JavaScript
// 変数名が関数の名前になります
const add = (x, y) => x + y;

// 呼び出すときは普通の関数と同じ
console.log(add(3, 5)); // 8

いつ使うの?

ここまでの話だと「短くかけるのはわかったけど...普通にfunctionでもよくない?」と思うかもしれません。確かに普通の関数を定義するときはfunctionで十分でしょう。

そこで特に覚えておいてほしい使い方をピックアップしました!

mapメソッド

配列のmapメソッドは引数に関数を必要とします。こんな時は短く書けるアロー関数のほうが便利です!

mapメソッドってなに?

mapメソッドは、配列の各要素に同じ関数を実行して、その結果が格納された新しい配列を作る関数です。

JavaScript
// 引数は省略できます
配列.map((要素, インデックス, 元の配列) => {})

具体例で覚えていきましょう!
まず、次のようなプレイヤーのデータが入った配列があります。

JavaScript
const players = [
  {
    name: 'たかし',
    point: 8
  },
  {
    name: 'まりこ',
    point: 0
  },
  {
    name: 'こうた',
    point: 20
  }
];

このplayersから得点pointだけを抽出した配列を作りたいと思います。
そんなときは...

JavaScript
const points = players.map(player => player.point);

これでOKです!

高階関数

引数に関数を受け取ったり、戻り値として関数を返したりする関数を高階関数といいます。

JavaScript
// functionで書く
function returnFunc(someFunc) {
  return function () {
    // 何らかの処理

    someFunc();
  };
}

// アロー関数で書く
const returnFunc = (someFunc) => () => {
  // 処理

  someFunc();
};

先ほど紹介したmapメソッドも引数に関数を必要とする高階関数です!

さいごに

今回はアロー関数を解説しました。
ほかに解説してほしいJavaScriptのことがあれば、ぜひコメントしてください!

Discussion

ログインするとコメントできます