JavaScriptの配列メソッドを復習する

JavaScriptの配列のメソッドを復習する

JavaScriptおよびTypeScriptをそれなりに触って1年以上になりますが、以下のようなコードを見て、一瞬「？？」となったので、備忘録兼ねて解説していきます。

まずは、おなじみの書き方↓

const people = [
  { name: 'Taro', age: 20 },
  { name: 'Jiro', age: 25 },
  { name: 'Ichiro', age: 30 },
];
const names = people.map(person => person.name);
console.log(names);
//  ["Taro", "Jiro", "Ichiro"]

一瞬理解できなかった書き方↓

const people = [
  { name: 'Taro', age: 20 },
  { name: 'Jiro', age: 25 },
  { name: 'Ichiro', age: 30 },
];
const names = people.map(({ name }) => name); // ここです
console.log(names);
//  ["Taro", "Jiro", "Ichiro"]

オブジェクトから成る配列より任意のプロパティだけを取り出す時によく使うmapですが、このコールバック関数の引数の部分で分割代入を使用しています。
mapの場合、内部で自動的にコールバック関数に引数が代入されてループするため、代入元が可視化されないため一瞬理解に苦しみました。そこで以下のようなコードを書いて整理します。

↓まずは、単にオブジェクトを引数で受けて、その中のnameプロパティを出力するだけ。

const printName = obj => {
  console.log(obj.name);
};
const person = { name: 'Taro', age: 20 };
printName(person); // Taro

↓次に、printName内で、分割代入をするパターン

const printName = obj => {
  const { name } = obj; // ここで分割代入をする
  console.log(name);
};
const person = { name: 'Taro', age: 20 };
printName(person); // Taro

↓最後に、引数を受ける段階で分割代入によりnameだけを抽出してしまうパターン

const printName = ({ name }) => { // ←いきなり分割代入してしまう
  console.log(name);
};
const person = { name: 'Taro', age: 20 };
printName(person); // Taro

つまり、
渡す側 → { name: 'Taro', age: 20 }というオブジェクトごと渡す
受け取る側 → オブジェクトをもらうが、もらった瞬間にnameだけを抜き取り、後は無視する
このようになっているわけですね。

で、先程のmapに話を戻すと、

const people = [
  { name: 'Taro', age: 20 },
  { name: 'Jiro', age: 25 },
  { name: 'Ichiro', age: 30 },
];
const names = people.map(({ name }) => name); // ここです
console.log(names);
//  ["Taro", "Jiro", "Ichiro"]

ループで、コールバック関数が、
{ name: 'Taro', age: 20 },
{ name: 'Jiro', age: 25 },
{ name: 'Ichiro', age: 30 },
と、オブジェクトを受け取るわけですが、

const names = people.map(({ name }) => name);

この部分でオブジェクトすべてをもらわずに、nameだけを抜き取ってもらっていたわけですね！
ここがmap内部に隠れてしまうので難しく感じた次第でした。