JavaScriptの分割代入について

Question

JavaScriptについての質問です。

1のコードはmapで各要素に対してlengthメソッドを使用して[8, 6, 7, 9]という返り値になるのは分かるのですが、
2のコードで行なっている処理内容が理解できません。
分割代入に関しても調べたのですが解決には繋がりませんでした。

予測としては
({ "length": lengthFooBArX })で行なっている処理はelementsという配列の各要素に対して({ "xxx": variables })のxxxというメソッドを使った返り値をvariablesに代入していると思っているのですが、どうなのでしょうか？

予測や質問内容に関して分かりづらい所がありますがご教授いただけると幸いです。

const elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

//　１
elements.map(element => element.length) // [8, 6, 7, 9]

// ２
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

Answer 1

短く書いているとややこしく見えますので、より分解してみましょう。

// 2のコールバック関数をより細かく分けて書いたもの
elements.map((arg) => {
  // 次の2行は同じ意味
  const { "length": lengthFooBArX } = arg;
  const lengthFooBArX = arg.length;
 
  return lengthFooBArX;
});

elementsという配列の各要素に対して({ "xxx": variables })のxxxというメソッドを使った返り値をvariablesに代入していると思っているのですが

全然違います。分割代入で、変数名を変えるための記法です。

Comments

[maskedrider5556]

大きな勘違いでした。
記法だったのですね、ありがとうございます！

const obj = {a: 10, b: 20, c: 30};
const {a: val1, c: val2} = obj;

console.log(val1); // 10
console.log(val2); // 30
これで検証出来ました。