JavaScript 知っていると少し得した気分になる 関数の引数のオブジェクトをわかりやすくする

2022年4月6日

以下のコードがあります。

const myFunc = (obj) => {
  return `こんにちは ${obj.name} さん. あなたは ${obj.age} 歳で、 ${obj.favorite} が好きです。`
}

このコードを見た時に、引数の obj はどういうプロパティを持つことを想定されているでしょうか。

それを知るには、関数の中身をみて obj.name や obj.age があるな、ということを確認しなければいけません。

関数の中身が長くなるほど、それらを読み取るのに時間がかかります。

これを解消する方法として以下のようにすることができます。

const myFunc = ({name, age, favorite}) => {
  return `こんにちは ${name} さん. あなたは ${age} 歳で、 ${favorite} が好きです。`
}

引数をみるだけで、name, age, favorite というプロパティが関数ないで使用されることが分かります。

また、関数ないのobj.xxxという部分もすっきりしました。

関数にオブジェクトを渡す時には、一度上記のようにできるか検討すると良いです。