Arbeiten mit Operatoren

• Arithmetische Operatoren
• Operatoren mit Zuweisung
• Operatoren für Zeichenketten
• Logische Operatoren boolsche
• Vergleichsoperatoren
• Ternärer Auswahloperator
• Bitweise Verschiebungsoperatoren
• Spread-Operator
• Rest-Operator

Man will mit Javascript nicht nur verschiedene Daten darstellen, sondern auch mit Ihnen arbeiten, beispielsweise um einen Spielstand zu errechnen, den Gesamtwert eines Warenkorbs errechnen oder nach dem Einloggen den Namen des Users anzuzeigen. Dazu verwendet man Operatoren.

Ausdruck, Operand, Operator

Eine mathematische Formel nennt man Ausdruck. Ein Ausdruck liefert immer ein Ergebnis. In einem Ausdruck kommen Operanden und Operatoren vor. siehe auch

Literale

Die Operanden können Variablen oder einfache Werte sein. Einfache Werte nennt man Literale. Literal bedeutet nichts weiter, als dass der gesamte Wert in einem Schritt aufgeschrieben
wird, statt ihn erst in mehreren Schritten aufzubauen.

x = 3;
x = "Hallo";
x = ["Haus","Baum","Straßenlampe"];

Anweisung / Befehl / statement

Desweiteren gibt es in Programmiersprachen Anweisungen, die man nicht mit Ausdrücken verwechseln sollte. Eine Anweisung ist ein Befehl, der mit Semikolon abgeschlossen wird.

Codeblock

Mehrere Anweisungen können als Codeblöcke in geschweiften Klammern eingefasst werden.

{
Anweisung;
Anweisung;
Anweisung;
}

Operatoren

Ein Operator, der sich nur auf einen Wert bezieht nennt man unären Operator (++), einen Operator der sich auf 2 Werte bezieht nennt man binären Operator (+). Es gibt in Javascript auch Operatoren, die sich auf 3 Wert beziehen, den ternären Operator.

Arithmetische Operatoren

Rechenoperatoren oder arithmetische Operatoren arbeiten mit Zahlen dem Datentyp Number.

Punktrechnung geht vor Strichrechnung. In Klammern gefasste Rechenoperationen werden zusammengefasst ausgerechnet.

Inkrementoren & Dekrementoren

Oft will man den Wert einer Variablen um 1 erhöhen oder verringern.

Mit Inkrementoren kann man einen vorhandenen Wert um eins erhöhen mit Dekrementoren kann man einen vorhandenen Wert um eins verringern.

let x = 5;
x = x + 1;

Stattdessen kann man schreiben.

let x = 5;
x++;

Präinkrement & Postinkrement

Wenn man Inkrement oder Dekrement innerhalb eines Ausdrucks nutzt und möchte, dass der Wert vor dem Auswerten des Ausdrucks verringert oder erhöht wird, schreibt man den Inkrementor oder Dekrementor vor die Varibale. Das nennt man Präinkrement oder Prädekrement. Wir sehen im folgendem Beispiel, dass erst beim zweiten console.log der Wert von x um 1 erhöht wurde (Postinkrement). Im dritten console.log sieht man, dass es schon im console.log Aufruf erhöht wurde (Präinkrement). Beispiel

let x = 5;
console.log(x++); //5
console.log(x); //6
console.log(++x); //7

Operatoren mit Zuweisung

Will man den Wert einer Variablen um einen bestimmten Betrag erhöhen oder verringern, so könnte man beispielsweise schreiben:

let x = 5;
x = x + 3;

Stattdessen kann man Rechenoperatoren mit Zuweisung nutzen.

let x = 5;
x += 3;

Operatoren für Zeichenketten

Zeichenketten kann man aneinanderreihen mit dem + Operator. Man nennt das Konkatenation.

    let gruss= "Hallo ";
    let name = "Willi";
    let ausgabe = gruss + name;
    ausgabe = gruss + name + " Hubert";

Beachten Sie, dass ein Leerzeichen auch ein Zeichen ist.

Auch Ausdrücke und Literale lassen sich mit Strings verknüpfen Mehr dazu hier.
Beispiel

console.log("Das Ergebnis ist: " + (2*3));//Das Ergebnis ist 6

Desweiteren kann man den Zuweisungsoperator verwenden += um einen String um einen weiteren String oder Literal zu erweitern.

let name = 'Willi ';
    name += 'Huber'; // 'Willi Huber' 

Logische Operatoren

Man kann mehrere boolsche Werte verknüpfen, um zu überprüfen, ob beide Werte true sind, oder nur einer von beiden. Außerdem kann man einen Wert in das Gegenteil umwandeln.

   let a = true;
   let b = false;
   let c = a && b; // Ergebnis false
   

Das Ausrufezeichen ist ein unärer Operator er benötigt nur einen Wert.

let d = !true // Ergebnis false

Vergleichsoperatoren

Vergleichsoperatoren liefern true oder false und können in if-Strukturen eingesetzt werden.
Weitere Vergleichsoperatoren(weitere Infos bei Selfhtml Vergleichsoperatoren)

Ternärer Auswahloperator

In einer bedingten Anweisung kann man je nach Abfrageergebnis Anweisungen ausführen. Das macht man mit einer if-else-Struktur. Eine kürzere Schreibweise erreicht man mit dem ternären Auswahloperator. Er heißt ternärer Auwahloperator weil er sich auf 3 Operanden bezieht.

   let alter = 14;
   if(alter >= 18){
       console.log("Herzlich willkommen.")
   }else{
       console.log("Eintritt erst ab 18.")
   }

Es folgt die Alternative mit dem ternären Auswahloperator. Man beachte die Schreibweise mit Fragezeichen ? und Doppelpunkt :

let alter = 30;
(alter >= 18) ? console.log("Herzliche Willkommen") : console.log("Eintritt erst ab 18");

Bedingung ? True-Anweisung : Else-Anweisung;

Bitweise Verschiebungsoperatoren

Spread Operator (Der "Auspacker")

Stell dir den Spread-Operator wie einen "Auspacker" vor. Er nimmt eine Sammlung (ein Array oder ein Objekt oder ein Set) und breitet deren Inhalte einzeln aus. Der Spread Operator und Rest-Operator besteht aus 3 Punkten ...

1. Arrays zusammenfügen (statt concat)

Früher musstest du mühsam verketten. Mit dem Spread-Operator "schüttest" du die Inhalte einfach in ein neues Array:

let land = ["Deutschland", "Italien"];
let stadt = ["Berlin", "Rom"];
let kombiniert = [...land, ...stadt];
// Ergebnis: ["Deutschland", "Italien", "Berlin", "Rom"]  

2. Das "Set"-auspacken

Ein Set ist toll, um Duplikate zu löschen, aber es ist kein echtes Array (man kann z. B. nicht darauf sortieren).

• let ar = [1,2, 2, 3];
• new Set(ar) -> Erstellt ein Set {1, 2, 3}.
• [...new Set(ar)] -> Packt die Zahlen aus dem Set aus und legt sie in ein frisches Array [1, 2, 3].

3. Kopieren von Objekten

Das ist extrem wichtig in der modernen Webentwicklung (z. B. React), um Daten nicht versehentlich zu überschreiben:

let user = { name: "Max", alter: 25 };
let userMitJob = { ...user, job: "Entwickler" };
// Erstellt ein NEUES Objekt, kopiert alle Eigenschaften von 'user' hinein und fügt 'job' hinzu.  

Der Rest-Operator (Der "Einsammler")

Der Rest-Operator wird meistens dort benutzt, wo man Dinge entgegennimmt, zum Beispiel in Funktionsparametern oder beim Destructuring.Er besteht wie der Spread-Operator aus drei Punkten ...

In Funktionen:

siehe Funktionsparametern
Wenn du nicht weißt, wie viele Argumente ein User an deine Funktion übergibt, sammelst du den "Rest" einfach ein:

function teamBildung(...restPara){
 return "Team: "+ restPara.join(", ");
}
teamBildung("Peter", "Yvette", "Jan");
console.log(teamBildung("Peter", "Yvette", "Jan")); 
// Team: Peter, Yvette, Jan  

Beim Destructuring:

siehe Destructuring
Du möchtest einen Teil auspacken und den verbleibenden Rest in einer eigenen Variable behalten:

let [direktor, chef, ...malocher] = ["Lars", "Nina", "Marc", "Julia", "Tom"];
console.log(direktor);// "Lars"
console.log(chef);// "Nina"
console.log(malocher);// ["Marc", "Julia", "Tom"]

Spread-Operator & Rest-Operator

Kurz gesagt: Der Spread-Operator nimmt die "Klammern" um die Daten weg und verteilt den Inhalt einzeln dort, wo du ihn gerade brauchst.

Der Spread- und der Rest-Operator sind zwei Seiten derselben Medaille. Sie benutzen beide die gleiche Syntax (...), machen aber genau das Gegenteil voneinander.

Um sie zu unterscheiden, hilft ein einfacher Merksatz:

• Spread (Verteilen): Macht aus einem Paket viele Einzelteile.

• Rest (Sammeln): Macht aus vielen Einzelteilen ein Paket.

1. Der Spread-Operator (Das "Auspacken")

Stell dir vor, du hast eine Schachtel und möchtest den Inhalt flach auf dem Tisch verteilen. Man verwendet es in:

• Arrays
• Objekte
• Sets

2. Der Rest-Operator (Das "Einsammeln")

Der Rest-Operator wird meistens dort benutzt, wo man Dinge entgegennimmt, zum Beispiel in Funktionen oder beim Des

• Funktionen
• Destructuring

Der direkte Vergleich

Was erzeugt der Operator?

Der Operator ... passt sich seiner Umgebung an:

• Steht er in einer eckigen Klammer [], arbeitet er mit Arrays.
• Steht er in einer geschweiften Klammer {}, arbeitet er mit Objekten.
• Steht er in einer Funktionsklammer (), dient er als Brücke zwischen Einzelwerten und einem Array, je nachdem, ob man die Funktion aufruft(Destruction) oder ob man ihn im Funktionskopf einsetzt.

Javascript Tipps