JavaScriptで学ぶラムダ式入門【初心者向けにわかりやすく解説】

4 min
JavaScriptで学ぶラムダ式入門 アイキャッチ

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

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

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

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

また、ラムダ式は配列操作をするときによく用いられるので、今よりも短い記述で直感的に配列の操作ができるようになります。

具体的な方法は以下の記事に書いています。

ラムダ式(Lambda式)とは

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 (引数) { /* 処理内容 */ }のように名前のない関数を作って、変数に入れたり引数として渡したりしています。このような名前のない関数を無名関数(匿名関数)と言います。

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

ラムダ式(Lambda式)の基本

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

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

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

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

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

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

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

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

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

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

(1) 引数が1つの場合

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

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

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

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

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

// 引数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倍する」という実現したいことを無駄なく直感的に書けています。

おわりに

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

ただ、この記事を読んだだけではまだその便利さについて実感が湧かない方が多いかもしれません。

そんな方には以下の記事がオススメです。

これらはラムダ式を使って配列の要素を簡単に操作することができるようになるチュートリアルです。

チュートリアルが終わる頃には、今までfor文で書いていた配列の操作をラムダ式を使って1行でカッコよく書けるようになりますよ!

みどー

みどー

ITコンサル会社→フリーランスエンジニアの経歴を経て、現在はスタートアップ企業でエンジニアをしています。30代前半ながら本業では年収1000万円&フルリモートで仕事できる環境を手に入れたので、今後は自分自身のプロダクトを作って会社に依存せず生きていくことを目標に副業開発やブログ発信をしています。副業開発・ブログ運営・IT技術情報について発信していきます。

FOLLOW

カテゴリー:
タグ:
関連記事