アロー関数における分割代入について

Question

javaScriptのアロー関数と分割代入について学んでおります。
MDN WebDocを参考にしていて、下記のようなコードに出会いました。

const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];
console.log(materials.map(({"length":lengthFooBArX})=>lengthFooBArX))

MDNアロー関数について

サイトには下記のような説明がありました。

この場合、必要なのは length property のみなので、分割パラメータを使用できます:文字列 "length" は取得したいプロパティに対応しますが明らかに特別でない lengthFooBArX は、任意の有効な変数名に変更可能な変数名です

分割代入を調べてみてもなぜ上述のようなコードの書き方ができるのか
さっぱり分からず、困り果てております。
どなたかご教示いただけませんでしょうか？

Answer 1

例えば、

let {"length":len} = 'abcd';

と書くと、「右辺('abcd')のlengthプロパティをlenへ代入しろ」という意味なので、変数lenに4が入ります。

これを応用して、getLength()という関数を以下のように定義すれば、

function getLength({"length":len}) {
  return len;
}

getLength('abcd')は4を返します。

この関数をアロー関数で書けば、({"length":len})=>lenですね。これをmap()の引数に渡せば、

let lens = materials.map(({"length":len})=>len);

materialsの各要素に対して、このアロー関数が適用され、lensには、[8, 6, 7, 9]が入ります。

どうでしょう?

Comments

[takochan1192]

コメントが遅くなり申し訳ございません。
そういうことだったのですね！！
length はオブジェクトのただのkey要素ではなく、lengthプロパティだったのですね！！
なぜkey要素にlengthと書いただけで、lenにしかも'abcd'がそのまま入るのではなく、その長さが出力されるのか全く理解できませんでしたが、
しっくりきました。
ありがとうございました。