It’s #FrontendFriday – JavaScript Abkürzungen

22.10.2021

Es ist so weit – kurz vor dem Wochenende heißt es wieder: It’s #FrontendFriday. Im heutigen Blogbeitrag geht es um die Abkürzungen in JavaScript.

Jeder möchte sich seine Arbeit erleichtern – Ist das auch mit JavaScript möglich? Ist es für einen anderen Entwickler ebenso leserlich?

In diesem Beitrag werde ich meine Top 5 JavaScript Abkürzungen vorstellen.

1. If…Else

Der Einsatz von If…Else haben wir, meiner Meinung nach, alle und daher gibt es im JavaScript ebenso eine Abkürzung.

Beispiel: Überprüfung einer Konstante

const x = 20;
let antwort;

if (x > 10) {
antwort = "Konstante > 10";
} else {
antwort = "Konstante < 10";
}

Abkürzung:

const antwort = x > 10 ? "Konstante > 10" : "Konstante < 10";

Hierzu kann man ebenso einen weiteren If-Zweig hinzufügen.

const antwort = x > 10 ? "Konstante > 10" : x < 5 ? "Konstante < 5" : "Zwischen 5 und 10";

Somit kann man in einer Zeile den If…Else Zweig schön darstellen.

Diese Abkürzung ist von Implementierung zu Implementierung unterschiedlich, da bei komplexen If…Else Zweigen es eventuell unleserlich sein kann.

2. Überprüfung und Setzen des Inhaltes

Öfters gibt es den Fall, dass man den Inhalt einer Variable überprüft, um diesen dann zu verwenden.

Beispiel: Übernehme den Inhalt der Variable auch nur, wenn sie nicht null, undefined oder leer ist.

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
} else {
let variable2 = 'neu';
}

Abkürzung:

const variable2 = variable1 || 'neu';

Mit dieser Abkürzung wird ebenso ein Fallback definiert.

let variable1;
let variable2 = variable1 || 'bar';
console.log(variable2 === 'bar'); // true wird ausgegeben

variable1 = 'foo';
variable2 = variable1 || 'bar';
console.log(variable2); // foo wird ausgegeben

PS.: Wenn die Variable „variable1“ mit „false“ oder „0“ initialisiert wird, dann wird „bar“ zugewiesen.

3. Deklaration von Variablen

Es ist praktisch am Anfang einer Funktion die Variablen zu initialisieren.

Beispiel: 3 Variablen erstellen und nur eine Variable initialisieren.

let a;
let b;
let c = 5;

Abkürzung:

let a, b, c=5;

4. If Verfügbarkeit

Man hat in der Praxis öfters den Fall, dass man einen Boolean-Wert auf „true“ oder „false“ überprüfen möchte.

Beispiel: Fahre erst fort, wenn auch der Boolean-Wert „true“ ist.

if (frontendBlogAvailable === true)

Abkürzung:

if (frontendBlogAvailable)

Dies kann ebenso mit „false“ Überprüfungen gemacht werden.

if (frontendBlogAvailable === false)

Abkürzung:

if (!frontendBlogAvailable)

5. Funktionen

Klassische Funktionen können in ihrer einfachen Form leicht zu lesen und schreiben sein. Sobald man damit anfängt sie in anderen Funktionsaufrufen zu verschachteln, kann es zu Verwirrung führen.

Beispiel: Definiere Funktionen um in die Konsole „Hallo“, „Geladen“ mit einem Timeout und ein Übergabeparameter auszugeben.

function sagHallo(name) {
  console.log('hallo', name);
}

setzeTimeout(function() {
  console.log('Geladen')
}, 2000);

list.forEach(function(item) {
  console.log(item);
});

Abkürzung:

sagHello = name => console.log('Hallo', name);

setzeTimeout(() => console.log('Geladen'), 2000);

list.forEach(item => console.log(item));

 

Fazit

Ich persönlich finde Abkürzungen eine Erleichterung beim Programmieren.

Für mich ist es wichtig, dass ich die Implementierung nach einem Jahr noch verstehe. Daher ist es von Person zu Person immer unterschiedlich, wann er Abkürzungen für sinnvoll hält und wann nicht.

 

Mehr zu Java Programmierung erfahren

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*