備忘録: TypeScriptでアロー関数の使い方を間違えた話

概要

アロー関数の書き方を間違えて、find()のコールバック関数の返り値がvoidになっていたために、後続の処理が想定通りに動作しなくなっていた話の備忘録です。

ミスの概要

本来書くべき内容

const numberList = [1,2,3,4,5]
const func = (num: number) => num === 5

const targetNumber = numberList.find(func)
// 5が出力される
console.log(targetNumber) 

アロー関数でnum === 5の場合にtrueを返す関数を定義し、find()のコールバック関数として渡しています。この場合、num === 5は{ return num === 5 }の省略形であり返り値(式)です。

実際に書いた内容

const numberList = [1,2,3,4,5]
const func = (num: number) => { num === 5 }

const targetNumber = numberList.find(func)
// undefinedが出力される
console.log(targetNumber) 

本来書くべき内容と異なっているのは{ num === 5 }の箇所のみです。
先ほどのnum === 5は{ return num === 5 }の省略形であり返り値でしたが、{ num === 5 }は通常のアロー関数の書き方で処理としてnum === 5という式文を書き、値をreturnしない(返り値がvoidの)形になっています。

MDN Web Docsによると、find()はコールバック関数が真値を返さない場合にundefinedを返します。そのため、func: (num:number) => voidをコールバック関数として渡した場合targetNumberは必ずundefinedになり、targetNumberに数値が返ってくる想定で処理を書いた場合、当然その後の処理は想定通りに動作しません。

まとめ

アロー関数やその他の記法を書く際は、通常の記法と省略記法を把握した上で、どちらを書いているのかを意識しながら書くように心がけようと思いました。