JavaScript - Operatornreihenfolge

Hallo da draußen, angehende Programmierer! Heute tauchen wir in ein Thema ein, das zuerst vielleicht ein bisschen einschüchternd klingen mag, aber ich verspreche dir, es ist nicht so schrecklich, wie es scheint. Wir sprechen über die Operatornreihenfolge in JavaScript. Denke daran als die "Hackordnung" für Mathematik in der Programmierung. Lass uns gemeinsam alles auseinandernehmen!

Was ist Operatornreihenfolge?

Bevor wir ins tiefe Wasser springen,fangen wir mit den Grundlagen an. Die Operatornreihenfolge ist wie die Reihenfolge der Operationen, die du in Mathematikunterricht gelernt hast. Erinnern Sie dich an PEMDAS (Klammerausdrücke, Exponenten, Multiplikation, Division, Addition, Subtraktion)? JavaScript hat seine eigene Version davon!

Die Operatornreihenfolge legt fest, wie Operatoren zueinander interpretiert werden. Operatoren mit höherer Priorität werden zu Operanden von Operatoren mit niedrigerer Priorität.

Schauen wir uns ein einfaches Beispiel an:

let result = 5 + 3 * 2;
console.log(result); // Ausgabe: 11

Du könntest denken, die Antwort sollte 16 sein (5 + 3 = 8, dann 8 2 = 16), aber sie ist tatsächlich 11. Warum? Weil die Multiplikation eine höhere Priorität als die Addition hat. Also wird 3 2 zuerst berechnet (was 6 ergibt) und dann 5 dazu addiert.

Assoziativität

Nun, lassen Sie uns über ein schickes Wort sprechen: Assoziativität. Keine Sorge, es ist einfacher, als es klingt!

Die Assoziativität legt die Reihenfolge fest, in der Operatoren derselben Priorität verarbeitet werden. Sie kann links-nach-rechts oder rechts-nach-links sein.

Links-nach-rechts Assoziativität

Die meisten Operatoren folgen der links-nach-rechts Assoziativität. Das bedeutet, sie werden von links nach rechts bewertet. Sehen wir uns ein Beispiel an:

let a = 10 - 5 - 2;
console.log(a); // Ausgabe: 3

So verarbeitet JavaScript dies:

1. 10 - 5 = 5
2. 5 - 2 = 3

Rechts-nach-links Assoziativität

Einige Operatoren, wie der Zuweisungsoperator (=), haben die rechts-nach-links Assoziativität. Sehen wir uns an, wie das funktioniert:

let a, b, c;
a = b = c = 5;
console.log(a, b, c); // Ausgabe: 5 5 5

JavaScript verarbeitet dies von rechts nach links:

1. c = 5
2. b = c (was 5 ist)
3. a = b (was 5 ist)

Operatornreihenfolge Tabelle

Nun schauen wir uns die "Speisekarte" der Operatornreihenfolge in JavaScript an. Keine Sorge, wenn du diese noch nicht alle verstehst - wir werden einige Beispiele durchgehen!

Priorität	Operator-Typ	Assoziativität	Operatoren
19	Gruppen	n/a	( ... )
18	Member-Zugriff	links-nach-rechts	. []
17	Funktionsaufruf	links-nach-rechts	... ( )
16	Neuer (mit Argumentliste)	n/a	new ... ( )
15	Postfix Inkrement/Dezrement	n/a	... ++ ... --
14	Logisches NICHT, Bitwise NICHT, Unary Plus/Minus, Präfix Inkrement/Dezrement, typeof, void, delete, await	rechts-nach-links	! ~ + - ++ -- typeof void delete await
13	Exponentiation	rechts-nach-links	**
12	Multiplikation, Division, Rest	links-nach-rechts	* / %
11	Addition, Subtraktion	links-nach-rechts	+ -
10	Bitwise Shift	links-nach-rechts	<< >> >>>
9	Relational	links-nach-rechts	< <= > >= in instanceof
8	Gleichheit	links-nach-rechts	== != === !==
7	Bitwise AND	links-nach-rechts	&
6	Bitwise XOR	links-nach-rechts	^
5	Bitwise OR	links-nach-rechts	|
4	Logisches AND	links-nach-rechts	&&
3	Logisches OR	links-nach-rechts	||
2	Bedingung	rechts-nach-links	?:
1	Zuweisung	rechts-nach-links	= += -= *= /= %= <<= >>= >>>= &= ^= |= **=
0	Komma	links-nach-rechts	,

Beispiele

Nun setzen wir dieses Wissen in die Praxis um mit einigen Beispielen!

Beispiel 1: Arithmetische Operationen

let result = 2 + 3 * 4 - 1;
console.log(result); // Ausgabe: 13

So bewertet JavaScript dies:

1. 3 * 4 = 12 (Multiplikation hat höhere Priorität)
2. 2 + 12 = 14
3. 14 - 1 = 13

Beispiel 2: Logische Operationen

let x = 5;
let y = 10;
let z = 15;

let result = x < y && y < z || x > z;
console.log(result); // Ausgabe: true

Lassen wir dies auseinandernehmen:

1. x < y ist wahr
2. y < z ist wahr
3. true && true ist wahr
4. x > z ist falsch
5. true || false ist wahr

Denke daran, && (AND) hat eine höhere Priorität als || (OR).

Beispiel 3: Mischoperationen

let a = 3;
let b = 4;
let c = 5;

let result = a + b * c > c * (a + b) && a < b;
console.log(result); // Ausgabe: false

Dies sieht kompliziert aus, aber lassen Sie uns es Schritt für Schritt nehmen:

1. b * c = 20
2. a + 20 = 23
3. c (a + b) = 5 7 = 35
4. 23 > 35 ist falsch
5. a < b ist wahr
6. false && true ist falsch

Beispiel 4: Zuweisung und Vergleich

let x, y, z;
x = y = z = 5;
console.log(x, y, z); // Ausgabe: 5 5 5

let result = x == y === z;
console.log(result); // Ausgabe: true

Denke daran, dass die Zuweisung (=) rechts-nach-links assoziativ ist, während Gleichheitsvergleiche (==, ===) links-nach-rechts assoziativ sind.

1. z = 5
2. y = z (was 5 ist)
3. x = y (was 5 ist)
4. x == y ist wahr
5. true === z ist wahr (weil z 5 ist, was als wahr angesehen wird)

Fazit

Glückwunsch! Du hast die ersten Schritte in die Verständnis der Operatornreihenfolge in JavaScript unternommen. Denke daran, Übung macht den Meister. Habe keine Angst, verschiedene Operatorenkombinationen auszuprobieren - das ist, wie du diese Konzepte wirklich verinnerlichst.

Und hier ist ein Profi-Tipp: Wenn du dir unsicher bist, verwende Klammern! Sie haben die höchste Priorität und können deinen Code lesbarer machen. Zum Beispiel:

let result = (2 + 3) * 4 - 1;
console.log(result); // Ausgabe: 19

Auf diese Weise gibst du JavaScript explizit vor, wie du den Ausdruck bewerten möchtest.

Weiter codieren, weiter lernen und vor allem: Spaß haben! JavaScript ist eine mächtige Sprache, und das Verständnis dieser Grundlagen wird dir auf deinem Programmierweg zum Erfolg verhelfen.

Credits: Image by storyset