JavaScriptで学ぶラムダ式入門

f:id:mido_app:20181007035411j:plain

目次

対象読者

ここ1年、仕事で何人かの新人さんのメンターを担当する機会がありました。皆さん研修で基本的なJavaScriptの文法は学んでいたようなのですが、現場でラムダ式に遭遇して「えっ、なんだこの書き方」と困惑する姿をよく見ます。

この記事ではそんな新人さんたちと同じく、() => console.logのような記法と初めて出会って困惑している方のために書いています。今回はJavaScriptを使ってラムダ式について解説しますが、同じ考え方が他の言語でも応用できます。

この記事を読むことでできるようになること

ラムダ式の読み書きができるようになります。

また、ラムダ式は配列操作をするときによく用いられるので、今よりも短い記述で直感的に配列の操作ができるようになります。 ラムダ式を用いた配列操作は以下の記事にまとめてあります。 www.midolog.net

ラムダ式とは

JavaScriptでは関数を変数に入れたり、引数に渡したりすることができます。

例えばこんなふうに。

// 関数を変数に入れて実行
// コンソールに「'Hello world!'」と表示される
let showMessage = function (msg) {
  console.log(msg)
}
showMessage('Hello world!')

// 引数に関数を渡す
// 1秒後にコンソールに「1秒経ったよ!」と表示される
setTimeout(function () {
    console.log('1秒経ったよ!')
}, 1000)

setTimeoutは、第1引数で受け取った関数をXミリ秒後(Xは第2引数で受け取った数)に実行する関数です。処理を遅らせて実行したい時に使います。

上の例では、function (引数) { /* 処理内容 */ }のように名前のない関数を作って、変数に入れたり引数として渡したりしています。このような名前のない関数を無名関数(匿名関数)と言います。

この無名関数を簡潔に書く方法がラムダ式と呼ばれる書き方です。

ラムダ式の基本

それでは、ラムダ式の書き方を無名関数の時の書き方と比べながら見て見ましょう!

数値を1つ受け取ってそれを2倍にして返却する関数を2つの方法で書いてみます。

// 無名関数ver
function (num) {
  return num * 2
}

// ラムダ式ver
(num) => {
  return num * 2
}

並べて見るとそれぞれがどんな対応関係にあるかわかりやすいですね!

無名関数はfunction (引数) { /* 処理内容 */ }と書くのに対して、ラムダ式は(引数) => { /* 処理内容 */ }と書きます。

矢印を使った記法なのでラムダ式のことをアロー関数と呼ぶこともあります

ラムダ式を使った結果、functionという8文字が=>と2文字になりました。エンジニアという人種はめんどくさいことが嫌いです。「毎回毎回『function』なんて書いているのは無駄だ!長い!手が疲れる!」そんな思いがきっとラムダ式を産み出したんですね。

さて、6文字削減しただけじゃんか...とお思ったそこのあなたに朗報です。ラムダ式の本気はここからです。条件によってはより短く、簡潔に書き換えることができます。

ラムダ式をより短く書くことができる条件

(1) 引数が1つの場合

引数が1つの場合のみ、引数の()を省略することができます

// before
(num) => {
  return num * 2
}

// after
num => {
  return num * 2
}

おお、また2文字減りました。

注意としては引数が1つもない場合は括弧を省略できません。

// 引数0
() => {
  console.log('括弧は省略できないよ!')
}

// 引数2以上
(a, b, c) => {
  return a + b + c
}
(2) 処理が1つの場合

処理が1つしかない場合、{}を省略することができます。

// before
() => {
  console.log('Hello world!')
}

// after
() => console.log('Hello world!')

おお、短くなりましたね!

ちなみに処理内容が2行以上の時の例も参考までに出しておきます。

// 2行以上では中括弧は省略不可!
(a, b) => {
  let result = a + b
  console.log(result)
}
(3) 処理がreturn文のみの場合

処理がreturn文しかない場合、中括弧に加えてreturnという文字を省略できます。

// before
(a, b) => {
  return a + b
}

// after
(a, b) => a + b

めちゃくちゃスッキリした記述になりましたね。

おさらい

では今までのおさらいとして、数値を1つ受け取ってそれを2倍にして返す関数を順をおってラムダ式に変換してみます。

// 無名関数
function (num) {
  return num * 2
}

// ラムダ式
(num) => {
  return num * 2
}

// 引数が1つなので()を省略
num => {
  return num * 2
}

// 処理が1つなので{}を省略
num => return num * 2

// returnのみなのでreturnを省略
num => num * 2

どうですか?ものすごく短く記述できましたね。

最終形のnum => num * 2は「引数で受け取った値を2倍する」という実現したいことを無駄なく直感的に書けています。

おわりに

ラムダ式の書き方について一通り説明してみました。読んでくださった方が自分でもラムダ式が読めそう、書けそうと思ってくれていれば嬉しいです。

ただ、この記事を読んだだけではまだその便利さについて実感が湧かないかもしれません。冒頭で書きましたが、ラムダ式は配列操作をする際にとても便利です。

次の記事としてラムダ式を使った配列操作の解説を書きました。興味がある方はこちらもご覧いただけると「あ、便利かも」って思ってもらえるかもしれません。 www.midolog.net