Meine liebe Not mit destructuring

[HEKTOR!]

Hallo,

Habe so meine liebe Not mit destructuring...

Wollte die Übergabe von Argumenten als Objekt reproduzieren analog zu

// ORIGINALVERSION:
let data = (args) => {
	let { a1, a2, a3} = args;
	if (a1) /*...*/
	// etc.
};
data({a1: "Ein Wert"});

Diese Version führte aber zu der Herausforderung, oft nicht zu wissen, welche Argumente in die Funktion eigentlich übergebbar sind, worauf ich selbige bei Funktionsdeklaration sozusagen bereits aufführe:

// ERSTE ÜBERARBEITUNG:
let data = ({ArgName1, ArgName2, ArgName3}) => {
	let a1 = ArgName1;
	let a2 = ArgName2;
	let a3 = ArgName3;
	if (a1) /* ... */
	// etc.
};

Die liebe Not:

Lassen sich a1, a2, a3 in der Überarbeitung ebenso elegant als Einzeiler formulieren wie in der Originalversion?

let a1, a2, a3 = {ArgName1, ArgName2, ArgName3};

führt leider dazu, dass a1 und a2 undefined sind und sämtliche Argumente an a3 übergeben werden....

Danke für euren Input!

Hektor.

[Christian Kruse]

Hallo HEKTOR!,

destructuring heisst einfach nur, dass du die Eigenschaften eines Objekts den Variablen zuweist. Z.B.

function foo({a, b, c}) {}

weist die Eigenschaften a, b und c des Objektes, dass du als Parameter übergibst, den Variablen a, b und c zu. Das wiederum ist die Kurzform von dieser Form:

function foo({a: a, b: b, c: c}) {}

Du kannst also deine Variante von weiter oben umformulieren zu dieser Variante:

const data = ({ArgName1: a1, ArgName2: a2, ArgName3: a3}) => {
  if(a1) {
    // …
  }
}

Hier erwartest du ein Objekt mit den Eigenschaften ArgName1, ArgName2 und ArgName3 und weist den Wert den Variablen a1, a2 und a3 zu.

Hoffe, das hilft beim Verständnis.

Freundliche Grüße,
Christian Kruse

[Rolf B]

Hallo Christian,

ich glaube, JavaScript ist für mich soeben eine Fremdsprache geworden. Destructuring beim Parameterempfang - argh!

Rolf

[Christian Kruse]

Hallo Rolf,

ich glaube, JavaScript ist für mich soeben eine Fremdsprache geworden. Destructuring beim Parameterempfang - argh!

😀

Ich mag es. Es erlaubt deklarativeren und damit besser lesbaren Code und erlaubt es IDEs bessere auto completion zu machen. Wenn ich z.B. diese Funktion definiere:

function foo({start, stop}) {}

dann kann z.B. VS Code beim Aufruf die Eigenschaften start und stop automatisch anbieten.

Natürlich könnte man fragen „aber warum nimmst du nicht einfach zwei Argumente?“ – nun, das ist nur ein stark vereinfachtes Beispiel. Die Argumente könnten mehr werden so dass ein Objekt lesbarer ist, oder ich verwende ein Framework wie React, bei dem die Parameter aus einer technischen Notwendigkeit heraus immer als Objekt übergeben werden müssen. Es gibt viele Gründe, warum ein Objekt als Parameter Sinn machen kann.

Edit: sehr praktisch auch zusammen mit dem spread operator:

const {start, stop, ...rest} = props;

Ergibt eine Variable start mit dem Wert von props.start, eine Variable stop mit dem Wert von props.stop und eine Variable rest mit einem neuen Objekt, dass alle restlichen Eigenschaften von props enthält.

Edit 2: das geht übrigens auch mit Arrays, so kann man Tupel nachbilden:

const [elem1, elem2, ...rest] = funReturningATuple();

Und jetzt… jetzt gehe ich erstmal eine Runde Fahrrad fahren 😀

Freundliche Grüße,
Christian Kruse

[HEKTOR!]

Feinifeinifeini!

Heißt das im Klartext, die Variablen werden durch Destructuring "automatisch" deklariert sodass ich das nicht "manuell" (mit let, const, var) tun muss?

let ausfahrt = ({kette, sitz, pedale}) => {
	kette ? console.log(kette) : console.log("Ohne Kette lässt Christian sein Fahrrad stehen.");
	sitz ? console.log(sitz) : console.log("Ohne Sitz lässt Christian sein Fahrrad stehen.");
	pedale ? console.log(pedale) : console.log("Ohne Pedale lässt Christian sein Fahrrad stehen.");
};
ausfahrt({kette: "Die Kette ist geölt!", sitz: "Der Sitz wurde angepasst!", pedale: "Auf geht's -über Stock und Stein!"});

Nur zur Aufklärung, dieses Codestück funktioniert. ...aber ist es auch wohlgeformt / good practice?

Dank euch, Burschen!

[Christian Kruse]

Hallo HEKTOR!,

Heißt das im Klartext, die Variablen werden durch Destructuring "automatisch" deklariert sodass ich das nicht "manuell" (mit let, const, var) tun muss?

Kommt drauf an[tm]. In diesem Fall: ja. Weil es ein Parameter ist.

let ausfahrt = ({kette, sitz, pedale}) => {
	kette ? console.log(kette) : console.log("Ohne Kette lässt Christian sein Fahrrad stehen.");
	sitz ? console.log(sitz) : console.log("Ohne Sitz lässt Christian sein Fahrrad stehen.");
	pedale ? console.log(pedale) : console.log("Ohne Pedale lässt Christian sein Fahrrad stehen.");
};
ausfahrt({kette: "Die Kette ist geölt!", sitz: "Der Sitz wurde angepasst!", pedale: "Auf geht's -über Stock und Stein!"});

Nur zur Aufklärung, dieses Codestück funktioniert. ...aber ist es auch wohlgeformt / good practice?

Man würde eher console.log(pedale || "Ohne Pedale lässt Christian sein Fahrrad stehen.") schreiben (lustiges Beispiel 😜), aber im Prinzip: ja.

Freundliche Grüße,
Christian Kruse

[HEKTOR!]

In diesem Fall: ja. Weil es ein Parameter ist.

Arg! Macht natürlich Sinn, überlege gerade ob ich schon jemals einen Parameter einem Variablenwert und nicht dem Variablennamen zugewiesen habe. (Sicher an der ein oder anderen Stelle unbewusst).

Schönes Wochenende!

[HEKTOR!]

...umgekehrt: [...]ob ich schon jemals einen Parameter einem Variablennamen und nicht dem Variablenwert zugewiesen habe.