JavaScript Was ist das für eine Syntax?

[Hendoul]

Hi

Kann mir jemand sagen, was das für eine Syntax ist?

const {a, b} = doFoo();

Ist das eine Konstante ohne Namen?

 

[Skaro]

Hi,

das ist in etwas das gleiche wie:

const result = doFoo();

const a = result.a;
const b = result.b;

Der Selektiert gleich den Key "a" und setzt es auf die Variable "a".

Gleiches gibts auch für Arrays:

const [a, b] = doFoo();
// gleiche wie:
const result = doFoo();
const a = result[0];
const b = result[1];

 

[Faust2011]

Der Selektiert gleich den Key "a" und setzt es auf die Variable "a".

Das erklärt was es macht, aber nennt sich dieses JS-Konstrukt? Und mit welcher ECMA-Version kam das rein?

 

[abcddcba]

Das hier, oder nicht? "Property Shorthand"
http://es6-features.org/#PropertyShorthand

 

[hroessler]

const {a, b}

sieht wie ein Tuple für mich aus!

greetz
hroessler

 

[Faust2011]

Das hier, oder nicht?

Hmmm... eher nicht, denn in den Beispielen von Dir verlinkt wird ja x und y zuvor deklariert.

 

[NullPointer]

Das ist ein Destructuring Assignment: http://es6-features.org/#ObjectMatchingShorthandNotation.

 

[Faust2011]

Das ist ein Destructuring Assignment

Wieder was gelernt, danke. Und typisch JavaScript

 

[Hendoul]

Ok, vielen Dank

Und nachher hat man eigentlich kein einzelnes Object sondern einzelne Variablen? In meinem Beispiel dann a und b. Wobei sich in a und b wieder irgendwas befinden kann...

 

[NullPointer]

Ja, genau. Zum Beispiel:

const foo = { a: 1, b: 2 };
const { a, b } = foo;
console.log(`a = ${a}, b = ${b}`);
// Ausgabe: a = 1, b = 2

Und "typisch JavaScript" ist das nur begrenzt: Funktionale Programmiersprachen wie Lisp, Haskell oder OCaml/F# können das (und noch mehr) schon seit Jahrzehnten. JavaScript bringt das jetzt nur in den Mainstream

 

[Korialstrasz]

Heyho,

dieses Konstrukt nennt sich "Destructing" und ist für Objekte und Arrays möglich.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

 

[mastaqz]

In der freien Wildbahn findet man es vor allem in React:

const { a, b, c} = this.state;
const { x, y, z } = this.props;

Daten leben dort in State oder Props und für die Verwendung möchte man nicht immer "this.state" oder "this.props" verwenden, durch das Destructuring kann man die Properties dann wie oben mit a, b, c, x, y, z nutzen.

Ebenso findet man es in API-Calls, die bspw. JSON returnieren.

const { messages } = await fetchFromApi();

Hier holt man sich die Property "messages" aus dem Promise, anstatt direkt in der Function mit ".messages".

Darüber hinaus kann man Objekte damit aufteilen:

const { password, ...userWithoutPassword} = user;

Das ist ein Destructuring mit Rest Parameter.
Wir haben nun "userWithoutPassword" ohne die Property "password".
Hilfreich, wenn man eine Property entfernen möchte.

 

[new Account()]

Wieder was gelernt, danke. Und typisch JavaScript

Sogar C++ kann das (etwas weniger versatil): https://en.cppreference.com/w/cpp/language/structured_binding