Arrow Funktion Ausdruck Verständnisproblem

#1
Javascript:
var elements = [
    "Hydrogen",
    "Helium",
    "Lithium",
    "Beryllium"
  ];

 elements.map((e) => e.length);         // ok, verstehe ich..... [8, 6, 7, 9]
 elements.map(({length}) => length);     // funktioniert auch, verstehe aber die Syntax nicht.
({length}) was macht das?
=> length warum nicht length.length?
 

alinnert

Well-Known Member
#2
Das hängt nicht Arrow Functions zusammen, sondern mit "object destructuring". Das erklär ich am besten anhand von Beispielen:

Javascript:
// Zuerst brauchen wir ein Objekt
const position = { x: 1, y: 2 }
Object destructuring erlaubt es, ein Objekt in seine Properties zu zerlegen. Gewissermaßen das Gegenteil von dem, was wir im Beispiel oben gemacht haben:

Javascript:
const { x, y } = position
Das erzeugt zwei Variablen x und y mit den Werten von position.x und position.y. Das ist also identisch zu folgendem Code:

Javascript:
const x = position.x
const y = position.y
Das gleiche kannst du auch mit Funktionsargumenten machen. Hier ein Beispiel ohne destructuring:

Javascript:
function logPosition (pos) {
  console.log(`${pos.x}, ${pos.y}`)
}

logPosition(position)
Mit destructuring kannst du die Properties gleich aus dem Parameter "herausziehen" und brauchst nicht mehr den Weg über pos gehen:

Code:
function logPosition ({ x, y }) {
    console.log(`${x}, ${y}`)
}

logPosition(position)
Genau das passiert hier in deinem Beispiel, nur in einer Arrow Function.

Mit ({length}) wird bereits die Property length aus dem Objekt herausgezogen und kann direkt angesprochen werden.
 
Oben