ラムダ式を理解する

2021-01-20

概要

ラムダ式は難しい印象を受けますが、実際は難しいわけではなく段階を踏めば理解できます。

ラムダ式とは

無名関数を簡潔に書く方法がラムダ式です。

サンプルコード

ではどういったコードになるのでしょうか。

今回は、Todoリストで対象を削除するといった想定をします。
idが2のものを削除します。

const todos = [
  {
    id: 1,
    title: 'shopping',
  },
  {
    id: 2,
    title: 'study',
  },
  {
    id: 3,
    title: 'running',
  }
]

const targetId = 2
// 以下の処理に注目
const idx = todos.findIndex(function(todo) {
  return todo.id = targetId
})
todos.splice(idx, 1)

findIndexメソッドの部分を省略し、以下のように書けます。

const idx = todos.findIndex(todo => todo.id === targetId)

これがラムダ式です。

仕組みをみる

では仕組みをみてみます。

// ①これが原型
todos.findIndex(function(todo) {
  return todo.id = targetId
})
// ②アロー関数に変換
todos.findIndex((todo) => {
  return todo.id === targetId
})
// ③引数1つだと()は省略できる
todos.findIndex(todo => {
  return todo.id === targetId
})
// ④処理が1つ、かつreturnのみなので{}が省略できる
todos.findIndex(todo => todo.id === targetId)

といった流れです。
条件さえ揃えば、簡単に、かつ簡潔に記述することができます。

感想

ちなみになんでもアロー関数にすると、thisの挙動に悩まされたりします。
条件がそろった時にのみ簡略しましょう。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店