6 JavaScript-Funktionen, die Sie kennen sollten

Vor etwas mehr als einem Jahr haben wir über die 5 „neuen“ JavaScript-Funktionen gesprochen, die Sie kennen sollten, um bequem in Gutenberg zu entwickeln. Dort haben wir gelernt, was Objekt- und Array-Destrukturierung sind, wie man Pfeilfunktionen erstellt, was die Spread- und Rest-Operatoren sind und so weiter. Glücklicherweise hat JavaScript immer noch viele Funktionen, die Ihnen helfen werden, verständlicheren und prägnanteren Code zu schreiben, sobald Sie sich mit ihnen vertraut gemacht haben.

Heute zeige ich Ihnen sechs wirklich coole JavaScript-Funktionen. Operatoren, variable Scoping, Promises, asynchrone Funktionen … sind Sie bereit, sie alle zu lernen?

#1 Optionale Verkettung in JavaScript mit dem Operator ?.

Der optionale Verkettungsoperator ermöglicht einen vereinfachten Zugriff auf die Attribute eines Objekts, wenn die Möglichkeit besteht, dass eines undefined oder null ist. Angenommen, Sie haben ein Objekt wie das folgende:

 const toni = { name: 'Antonio', details: { age: 35, }, };

Um auf das age von toni zuzugreifen, müssen Sie zuerst auf das Attribut details und dann auf age zugreifen:

 function getAge( person ) { return person.details.age; }

Das Problem, das wir in der vorherigen Funktion haben, und ich bin mir sicher, dass es für Sie nichts Neues ist, ist, dass die Eigenschaften, die wir von der person erwarten, nicht immer vorhanden sind. Das heißt, wenn entweder person oder person.details undefined , löst die obige Funktion einen Typfehler aus:

 getAge( toni ); // 35 getAge( {} ); // Uncaught TypeError: person.details is undefined

Normalerweise lösen wir dieses Problem, indem wir einige Sicherheitsmaßnahmen hinzufügen:

 function getAge( person ) { if ( ! person ) { return; } if ( ! person.details ) { return; } return person.details.age; } getAge( toni ); // 35 getAge( {} ); // undefined

die es eindeutig beheben. Leider ist die resultierende Funktion komplexer und enthält viel verrauschten Code, der unsere Aufmerksamkeit von den wirklich wichtigen Dingen ablenkt. Um wieder auf den richtigen Weg zu kommen und die Lösung auf einfachere Weise zu beheben, müssen wir nur den optionalen Verkettungsoperator ?. :

 function getAge( person ) { return person?.details?.age; } getAge( toni ); // 35 getAge( {} ); // undefined

Im Wesentlichen lässt uns dieser Operator auf jede Eigenschaft zugreifen, solange sie nicht undefined oder null ist. Sobald es erkennt, dass wir versuchen, auf eine Eigenschaft eines nicht existierenden Objekts zuzugreifen, gibt es undefined zurück.

# 2 Nullish Coalescing Operator ( ?? )

In JavaScript ist es sehr einfach, mit diesem Operator einen Standardwert für eine Variable festzulegen: || , rechts? Falsch! Wir haben das alle schon einmal gemacht, aber es kann zu unerwarteten Nebenwirkungen führen, wenn Sie nicht aufpassen …

Angenommen, wir haben in unserem Redux-Speicher einen Selektor, der es uns ermöglicht, einen vom Benutzer festgelegten Wert abzurufen. Wenn der Benutzer noch keinen Wert angegeben hat (d. h. der Wert ist undefined ), geben wir mit || einen Standardwert zurück :

 function getValue( state ) { return state.value || 5; }

Sehen wir uns nun einige Beispiele dafür an, was wir mit der vorherigen Funktion erhalten würden, nachdem der Benutzer den einen oder anderen Wert festgelegt hat:

 // No setValue( x )... getValue(); // 5 setValue( 2 ); getValue(); // 2 setValue( 1 ); getValue(); // 1 setValue( 0 ); getValue(); // 5

Hoppla! Es hat alles gut funktioniert, bis wir den letzten Fall erreicht haben! Wenn der Benutzer den Wert auf 0 setzt, wird das Ergebnis der Funktion anscheinend 5 . Warum? Nun, die Begründung ist ziemlich offensichtlich: x||y gibt y zurück, wenn und nur wenn x ein „falscher“ Wert ist. Dies funktioniert normalerweise gut, da undefined ein falscher Wert ist. Aber auch zum Beispiel false oder 0 .

In Wirklichkeit wollten wir nur einen default festlegen, wenn keiner vorhanden ist. Wir können also einen Sicherheitswächter hinzufügen, um zu prüfen, ob es einen Wert gibt oder nicht:

 function getValue( state ) { if ( undefined === state.value ) return 5; return state.value; }

und wir können es sogar mit dem ternären Operator schreiben, wenn wir Lust haben:

 function getValue( state ) { return undefined === state.value ? 5 : state.value; }

aber noch einmal, beide Lösungen komplizieren den Code unnötigerweise. Um einer Variablen einen Standardwert zuzuweisen, müssen wir den nullischen Koaleszenzoperator ?? , die den rechten Teil zurückgibt, wenn und nur wenn der linke Teil null oder undefined ist:

 function getValue( state ) { return state.value ?? 5; }

und, Überraschung, Überraschung!, das Ergebnis ist genau das, was wir wollten:

 // No setValue( x )... getValue(); // 5 setValue( 2 ); getValue(); // 2 setValue( 1 ); getValue(); // 1 setValue( 0 ); getValue(); // 0

Oh, und übrigens, Sie können diesen Operator in Kombination mit einer Zuweisung verwenden. Zum Beispiel das:

 value = value ?? 5;

ist äquivalent dazu:

 value ??= 5;

#3 Promises und asynchrone Funktionen

Promises sind ein in JavaScript implementierter Mechanismus, der es uns ermöglicht, unseren Quellcode zu vereinfachen, wenn wir mit asynchronen Operationen arbeiten, d. h. Operationen, deren Ergebnisse nicht sofort verfügbar sind. Wenn wir beispielsweise Daten von unserem Server abrufen möchten, ist klar, dass die Antwort nicht sofort erfolgt, da wir warten müssen, bis der Server die Anfrage erhält, verarbeitet und uns die Antwort zurücksendet.

In älteren JavaScript-Versionen und -Bibliotheken (z. B. jQuery) haben wir dies früher mit Callbacks implementiert. Die Idee war ganz einfach: Definieren Sie zusammen mit der Anfrage selbst die Funktion (den Callback), die aufgerufen werden soll, sobald die Antwort verfügbar ist. Wenn die asynchrone Operation (d. h. das Abrufen von Daten vom Server) abgeschlossen ist, ruft die Bibliothek auf diese Weise die Funktion auf und unsere Logik wird fortgesetzt:

 jQuery.ajax( { url: 'https://server.com/wp-json/wp/users/1', success: ( user ) => { console.log( user ); }, } );

Wenn wir nur eine einzelne, isolierte Anfrage auslösen, ist diese Lösung recht elegant und bequem. Aber sobald wir mehr Anfragen ausführen müssen, wird es schnell schmutzig. Wenn wir beispielsweise zwei verschiedene Benutzer anfordern möchten, müssen wir Rückrufe verschachteln:

 jQuery.ajax( { url: 'https://server.com/wp-json/wp/v2/users/1', success: ( user1 ) => { jQuery.ajax( { url: 'https://server.com/wp-json/wp/v2/users/2', success: ( user2 ) => { console.log( user1, user2 ); }, } ); }, } );

Promises sind die Lösung für dieses Problem: Wenn das Erhalten eines bestimmten Ergebnisses nicht sofort erfolgt (z. B. wenn wir etwas von einem Server abrufen), können wir sofort ein JavaScript-Promise zurückgeben. Dieses Objekt ist ein Wrapper des tatsächlichen Werts und bedeutet das „Versprechen“, dass dieser Wert irgendwann in der Zukunft verfügbar sein wird.

Wenn wir beispielsweise unser erstes Snippet mit Promises umschreiben würden, würde es so aussehen:

 const promise = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/1', } ); promise.then( ( user ) => console.log( user ) );

Wie Sie sehen können, muss wp.apiFetch Benutzer 1 vom Server abrufen, aber es gibt sofort ein Ergebnis. Das Ergebnis ist jedoch nicht der Benutzer selbst, sondern ein Versprechen, das für den Benutzer aufgelöst wird, sobald die Anfragen abgeschlossen sind. Daher müssen wir lediglich einen Rückruf schreiben, der die Antwort des Promise verarbeitet, wenn es aufgelöst wird.

Sie denken jetzt vielleicht, dass dies nicht so schwierig ist im Vergleich zu dem, was wir vorher hatten, oder? Schließlich verwenden wir immer noch Rückrufe … aber Sie können sehen, wie nützlich dies ist, wenn wir beginnen, mehrere Anfragen zu kombinieren:

 const promise1 = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/1', } ); const promise2 = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/2', } ); Promise.all( [ promise1, promise2 ] ).then( ( [ user1, user2 ] ) => console.log( user1, user2 ); );

Mithilfe von Promises konnten wir zwei parallele Anforderungen starten, um die Benutzer 1 und 2 abzurufen, und Promise.all verwenden, um auf die Auflösung beider Promises zu warten. Kein Spaghetti-Code mit verschachtelten Callbacks.

Nun, das Großartige an Versprechen steht noch bevor. Wir können etwas syntaktischen Zucker verwenden, um mit JavaScript-Versprechen zu arbeiten und asynchronen Code zu schreiben, der, nun ja, synchron aussieht. Alles, was Sie tun müssen, ist, eine asynchrone Funktion mit dem Schlüsselwort async zu definieren, und plötzlich werden die Dinge viel, viel einfacher:

 async function logTwoUsers( id1, id2 ) { const user1 = await wp.apiFetch( { url: '…' + id1 } ); const user2 = await wp.apiFetch( { url: '…' + id2 } ); console.log( user1, user2 ); }

Immer wenn Sie eine asynchrone Operation innerhalb einer asynchronen Funktion aufrufen, können Sie mit dem Schlüsselwort await auf das Ergebnis warten. Das einzige, was Sie beachten sollten, ist, dass das Ergebnis einer async Funktion immer ein Versprechen ist:

 async function getNumberFive() { return 5; } const p = getNumberFive(); // a promise p.then( console.log ); // prints "5"

#4 Variabler Geltungsbereich bei Verwendung let und const

Wie Sie wahrscheinlich bereits wissen, können Sie jetzt Variablen mit den Schlüsselwörtern let und const deklarieren. Ersteres definiert eine Variable und letzteres eine Konstante:

 let x = 1; console.log( x ); // 1 x = 2; console.log( x ); // 2 const y = 1; console.log( y ); // 1 y = 2; // Uncaught TypeError: invalid assignment to const 'y' console.log( y ); // 1

Sie könnten versucht sein zu glauben, dass let und var dasselbe sind, da wir mit beiden Schlüsselwörtern eine nicht konstante Variable deklarieren können. Aber es gibt einen wesentlichen Unterschied zwischen ihnen: ihren Umfang. Bei let und const ist der Gültigkeitsbereich der Variablen der Block, in dem sie definiert ist. In var ist es die ganze Funktion.

 function fn() { if ( true ) { var x = 1; let y = 2; const z = 3; }//end if console.log( x ); // 1 console.log( y ); // Uncaught ReferenceError: y is not defined console.log( z ); // Uncaught ReferenceError: z is not defined }

# 5 Datentransformation bei Verwendung JSON.parse

Die Funktion JSON.parse analysiert eine JSON-Zeichenfolge und erstellt ein JavaScript-Objekt. Zum Beispiel:

 const x = JSON.parse( '{"x":1,"a":[1,2,3]}' ); // Object { x: 1, a: [ 1, 2, 3 ] }

Was die meisten Leute nicht wissen, ist, dass es ein zweites Argument namens reviver unterstützt. Dieser Parameter ist eine Funktion, die für jedes analysierte Element ausgeführt wird, sodass Sie den Wert nach Belieben bearbeiten können. Stellen Sie sich beispielsweise einen JSON-String wie den folgenden vor:

 const json = '{"name":"David","birthday":"1985-12-01T10:00:00.000Z"}';

Wenn wir JSON.parse verwenden, wird ein Objekt mit zwei Zeichenfolgenattributen generiert: name und birthday . Aber wenn wir reviver eine Reviver-Funktion zur JSON.parse , können wir sicherstellen, dass der birthday als Date geparst wird:

 const user = JSON.parse( json, ( key, value ) => 'birthday' === key ? new Date( value ) : value )

# 6 Numerisches Trennzeichen im Quellcode mit dem Undesrcore-Zeichen ( _ )

Unser letzter Tipp heute ist das numerische Trennzeichen. Es gibt einen Vorschlag (derzeit in Stufe 4), der es ermöglicht, Zahlen so zu schreiben, dass sie für Menschen leichter verständlich sind. Können Sie zum Beispiel wirklich sagen, wie groß die folgenden Zahlen sind?

 10000000000 2189719.25

Wenn wir nur das Tausendertrennzeichen verwenden könnten, wäre es viel einfacher zu interpretieren! Und genau das können wir mit dem Unterstrich _ machen:

 10_000_000_000 2_189_719.25

Zusammenfassung

Es ist möglich, besseren JavaScript-Code zu schreiben, wenn Sie sich an all die neuen Tools und Funktionen gewöhnen, die in JavaScript enthalten sind. Heute haben wir mehrere Beispiele dafür gesehen, was mit dieser Programmiersprache möglich ist. Ich hoffe, Sie haben etwas Neues gelernt, und wenn es Ihnen gefallen hat, vergessen Sie nicht, es mit Ihren Kollegen zu teilen. Bis bald!

Beitragsbild von Sam Dan Truong auf Unsplash.