[Easy] 📄 JavaScript Operators

1. What is the difference between == and === ?

Was ist der Unterschied zwischen == und ===?

Beide sind Vergleichsoperatoren. == vergleicht, ob zwei Werte gleich sind, während === vergleicht, ob zwei Werte gleich sind und denselben Typ haben. Letzterer kann daher als strikter Modus betrachtet werden.

Der erstere führt aufgrund des Designs von JavaScript automatisch eine Typkonvertierung durch, was zu vielen unintuitiven Ergebnissen führt. Zum Beispiel:

1 == '1'; // true
1 == [1]; // true
1 == true; // true
0 == ''; // true
0 == '0'; // true
0 == false; // true

Dies stellt eine erhebliche kognitive Belastung für Entwickler dar, weshalb allgemein empfohlen wird, === anstelle von == zu verwenden, um unerwartete Fehler zu vermeiden.

Best Practices: Verwende immer === und !==, es sei denn, du weißt genau, warum du == verwenden musst.

Interviewfragen

Frage 1: Vergleich grundlegender Typen

Bestimme das Ergebnis der folgenden Ausdrücke:

1 == '1'; // ?
1 === '1'; // ?

Antwort:

1 == '1'; // true
1 === '1'; // false

Erklärung:

• == (Gleichheitsoperator): Führt Typkonvertierung durch
  • Der String '1' wird in die Zahl 1 konvertiert
  • Dann wird 1 == 1 verglichen, das Ergebnis ist true
• === (strikter Gleichheitsoperator): Keine Typkonvertierung
  • number und string sind verschiedene Typen, gibt direkt false zurück

Regeln der Typkonvertierung:

// Prioritätsreihenfolge der Typkonvertierung bei ==
// 1. Wenn ein number vorhanden ist, die andere Seite in number konvertieren
'1' == 1; // '1' → 1, Ergebnis true
'2' == 2; // '2' → 2, Ergebnis true
'0' == 0; // '0' → 0, Ergebnis true

// 2. Wenn ein boolean vorhanden ist, boolean in number konvertieren
true == 1; // true → 1, Ergebnis true
false == 0; // false → 0, Ergebnis true
'1' == true; // '1' → 1, true → 1, Ergebnis true

// 3. Falle bei der String-zu-Zahl-Konvertierung
'' == 0; // '' → 0, Ergebnis true
' ' == 0; // ' ' → 0, Ergebnis true (Leerzeichenstring wird zu 0 konvertiert)

Frage 2: Vergleich von null und undefined

Bestimme das Ergebnis der folgenden Ausdrücke:

undefined == null; // ?
undefined === null; // ?

Antwort:

undefined == null; // true
undefined === null; // false

Erklärung:

Dies ist eine Sonderregel von JavaScript:

• undefined == null: true
  • Die ES-Spezifikation legt fest: null und undefined sind beim Vergleich mit == gleich
  • Dies ist das einzige Szenario, in dem == nützlich ist: Prüfen, ob eine Variable null oder undefined ist
• undefined === null: false
  • Sie sind verschiedene Typen (undefined ist Typ undefined, null ist Typ object)
  • Beim strikten Vergleich sind sie nicht gleich

Praktische Anwendung:

// Prüfen, ob eine Variable null oder undefined ist
function isNullOrUndefined(value) {
  return value == null; // Prüft null und undefined gleichzeitig
}

isNullOrUndefined(null); // true
isNullOrUndefined(undefined); // true
isNullOrUndefined(0); // false
isNullOrUndefined(''); // false

// Äquivalent (aber kürzer)
function isNullOrUndefined(value) {
  return value === null || value === undefined;
}

Fallstricke beachten:

// null und undefined sind nur zueinander gleich
null == undefined; // true
null == 0; // false
null == false; // false
null == ''; // false

undefined == 0; // false
undefined == false; // false
undefined == ''; // false

// Aber mit === sind sie nur sich selbst gleich
null === null; // true
undefined === undefined; // true
null === undefined; // false

Frage 3: Umfassender Vergleich

Bestimme das Ergebnis der folgenden Ausdrücke:

0 == false; // ?
0 === false; // ?
'' == false; // ?
'' === false; // ?
null == false; // ?
undefined == false; // ?

Antwort:

0 == false; // true (false → 0)
0 === false; // false (verschiedene Typen: number vs boolean)
'' == false; // true ('' → 0, false → 0)
'' === false; // false (verschiedene Typen: string vs boolean)
null == false; // false (null ist nur gleich null und undefined)
undefined == false; // false (undefined ist nur gleich null und undefined)

Konvertierungsflussdiagramm:

// Konvertierungsprozess von 0 == false
0 == false;
0 == 0; // false wird in die Zahl 0 konvertiert
true; // Ergebnis

// Konvertierungsprozess von '' == false
'' == false;
'' == 0; // false wird in die Zahl 0 konvertiert
0 == 0; // '' wird in die Zahl 0 konvertiert
true; // Ergebnis

// Sonderfall von null == false
null == false;
// null wird nicht konvertiert! Laut Spezifikation ist null nur gleich null und undefined
false; // Ergebnis

Frage 4: Objektvergleich

Bestimme das Ergebnis der folgenden Ausdrücke:

[] == []; // ?
[] === []; // ?
{} == {}; // ?
{} === {}; // ?

Antwort:

[] == []; // false
[] === []; // false
{} == {}; // false
{} === {}; // false

Erklärung:

• Der Vergleich von Objekten (einschließlich Arrays und Objekten) ist ein Referenzvergleich
• Selbst wenn der Inhalt gleich ist, sind sie nicht gleich, wenn es verschiedene Objektinstanzen sind
• == und === verhalten sich bei Objekten gleich (beide vergleichen Referenzen)

// Nur gleiche Referenzen sind gleich
const arr1 = [];
const arr2 = arr1; // Referenz auf dasselbe Array
arr1 == arr2; // true
arr1 === arr2; // true

// Gleicher Inhalt, aber verschiedene Instanzen
const arr3 = [1, 2, 3];
const arr4 = [1, 2, 3];
arr3 == arr4; // false (verschiedene Referenzen)
arr3 === arr4; // false (verschiedene Referenzen)

// Gleiches gilt für Objekte
const obj1 = { name: 'Alice' };
const obj2 = { name: 'Alice' };
obj1 == obj2; // false
obj1 === obj2; // false

Schnelle Interview-Merkhilfe

Typkonvertierungsregeln von == (Priorität von oben nach unten):

1. null == undefined → true (Sonderregel)
2. number == string → string in number konvertieren
3. number == boolean → boolean in number konvertieren
4. string == boolean → beide in number konvertieren
5. Objekte vergleichen Referenzen, keine Konvertierung

Regeln von === (einfach):

1. Verschiedene Typen → false
2. Gleicher Typ → Wert (Grundtypen) oder Referenz (Objekttypen) vergleichen

Best Practices:

// ✅ Immer === verwenden
if (value === 0) {
}
if (name === 'Alice') {
}

// ✅ Einzige Ausnahme: null/undefined prüfen
if (value == null) {
  // value ist null oder undefined
}

// ❌ Verwendung von == vermeiden (außer obige Ausnahme)
if (value == 0) {
} // nicht empfohlen
if (name == 'Alice') {
} // nicht empfohlen

Beispielantwort im Interview:

"== führt Typkonvertierung durch, was zu unintuitiven Ergebnissen führen kann, z.B. ist 0 == '0' true. === ist ein strikter Vergleich, der keine Typkonvertierung durchführt; wenn die Typen unterschiedlich sind, wird direkt false zurückgegeben.

Die beste Praxis ist, immer === zu verwenden. Die einzige Ausnahme ist value == null, um null und undefined gleichzeitig zu prüfen.

Besonders zu beachten ist, dass null == undefined true ist, aber null === undefined false ist – das ist eine Sonderregel von JavaScript."

---

2. What is the difference between && and || ? Please explain short-circuit evaluation

Was ist der Unterschied zwischen && und ||? Erkläre die Kurzschlussauswertung

Grundkonzept

• && (AND): Wenn die linke Seite falsy ist, wird direkt der Wert der linken Seite zurückgegeben, ohne die rechte Seite auszuführen
• || (OR): Wenn die linke Seite truthy ist, wird direkt der Wert der linken Seite zurückgegeben, ohne die rechte Seite auszuführen

Beispiel zur Kurzschlussauswertung

// && Kurzschlussauswertung
const user = null;
const name = user && user.name; // user ist falsy, gibt null direkt zurück, greift nicht auf user.name zu
console.log(name); // null (kein Fehler)

// || Kurzschlussauswertung
const defaultName = 'Guest';
const userName = user || defaultName; // user ist falsy, gibt den defaultName von rechts zurück
console.log(userName); // 'Guest'

// Praktische Anwendung
function greet(name) {
  const displayName = name || 'Anonymous'; // Wenn kein name übergeben wird, Standardwert verwenden
  console.log(`Hello, ${displayName}!`);
}

greet('Alice'); // Hello, Alice!
greet(); // Hello, Anonymous!

Häufige Fallstricke ⚠️

// Problem: 0 und '' sind auch falsy
const count = 0;
const result = count || 10; // 0 ist falsy, gibt 10 zurück
console.log(result); // 10 (möglicherweise nicht das gewünschte Ergebnis)

// Lösung: ?? (Nullish Coalescing) verwenden
const betterResult = count ?? 10; // Gibt nur für null/undefined den Wert 10 zurück
console.log(betterResult); // 0

---

3. What is the ?. (Optional Chaining) operator ?

Was ist der Optional Chaining Operator ?.?

Problemszenario

Die traditionelle Schreibweise ist fehleranfällig:

const user = {
  name: 'Alice',
  address: {
    city: 'Taipei',
  },
};

// ❌ Gefährlich: Wenn address nicht existiert, tritt ein Fehler auf
console.log(user.address.city); // Normal
console.log(otherUser.address.city); // TypeError: Cannot read property 'city' of undefined

// ✅ Sicher aber umständlich
const city = user && user.address && user.address.city;

Verwendung von Optional Chaining

// ✅ Prägnant und sicher
const city = user?.address?.city; // 'Taipei'
const missingCity = otherUser?.address?.city; // undefined (kein Fehler)

// Kann auch für Methodenaufrufe verwendet werden
user?.getName?.(); // Wird nur ausgeführt, wenn getName existiert

// Kann auch für Arrays verwendet werden
const firstItem = users?.[0]?.name; // Sicherer Zugriff auf den Namen des ersten Benutzers

Praktische Anwendung

// API-Antwort-Verarbeitung
function displayUserInfo(response) {
  const userName = response?.data?.user?.name ?? 'Unknown User';
  const email = response?.data?.user?.email ?? 'No email';

  console.log(`User: ${userName}`);
  console.log(`Email: ${email}`);
}

// DOM-Operationen
const buttonText = document.querySelector('.submit-btn')?.textContent;

---

4. What is the ?? (Nullish Coalescing) operator ?

Was ist der Nullish Coalescing Operator ???

Unterschied zu ||

// || behandelt alle falsy-Werte als falsch
const value1 = 0 || 'default'; // 'default'
const value2 = '' || 'default'; // 'default'
const value3 = false || 'default'; // 'default'

// ?? behandelt nur null und undefined als Leerwerte
const value4 = 0 ?? 'default'; // 0
const value5 = '' ?? 'default'; // ''
const value6 = false ?? 'default'; // false
const value7 = null ?? 'default'; // 'default'
const value8 = undefined ?? 'default'; // 'default'

Praktische Anwendung

// Verarbeitung von Werten, die 0 sein können
function updateScore(newScore) {
  // ✅ Korrekt: 0 ist ein gültiger Punktestand
  const score = newScore ?? 100; // Wenn es 0 ist, behalte 0; verwende 100 nur für null/undefined
  return score;
}

updateScore(0); // 0
updateScore(null); // 100
updateScore(undefined); // 100

// Verarbeitung von Konfigurationswerten
const config = {
  timeout: 0, // 0 Millisekunden ist eine gültige Einstellung
  maxRetries: null,
};

const timeout = config.timeout ?? 3000; // 0 (behält die Einstellung 0)
const retries = config.maxRetries ?? 3; // 3 (null verwendet den Standardwert)

Kombinierte Verwendung

// ?? und ?. werden häufig zusammen verwendet
const userAge = user?.profile?.age ?? 18; // Wenn keine Altersdaten vorhanden, Standard 18

// Praxisfall: Formular-Standardwerte
function initForm(data) {
  return {
    name: data?.name ?? '',
    age: data?.age ?? 0, // 0 ist ein gültiges Alter
    isActive: data?.isActive ?? true,
  };
}

---

5. What is the difference between i++ and ++i ?

Was ist der Unterschied zwischen i++ und ++i?

Grundlegender Unterschied

• i++ (Postfix): Gibt zuerst den aktuellen Wert zurück, addiert dann 1
• ++i (Präfix): Addiert zuerst 1, gibt dann den neuen Wert zurück

Beispiel

let a = 5;
let b = a++; // b = 5, a = 6 (erst an b zuweisen, dann inkrementieren)
console.log(a, b); // 6, 5

let c = 5;
let d = ++c; // d = 6, c = 6 (erst inkrementieren, dann an d zuweisen)
console.log(c, d); // 6, 6

Praktische Auswirkungen

// In Schleifen gibt es normalerweise keinen Unterschied (da der Rückgabewert nicht verwendet wird)
for (let i = 0; i < 5; i++) {} // ✅ Üblich
for (let i = 0; i < 5; ++i) {} // ✅ Auch möglich, manche halten es für etwas schneller (tatsächlich kein Unterschied in modernen JS-Engines)

// Aber in Ausdrücken gibt es einen Unterschied
let arr = [1, 2, 3];
let i = 0;
console.log(arr[i++]); // 1 (erst Wert mit i=0 abrufen, dann wird i zu 1)
console.log(arr[++i]); // 3 (i wird erst zu 2, dann Wert abrufen)

Best Practices

// ✅ Klar: getrennt schreiben
let count = 0;
const value = arr[count];
count++;

// ⚠️ Nicht empfohlen: leicht verwechselbar
const value = arr[count++];

---

6. What is the Ternary Operator ? When should you use it ?

Was ist der ternäre Operator? Wann sollte man ihn verwenden?

Grundlegende Syntax

condition ? valueIfTrue : valueIfFalse;

Einfaches Beispiel

// Traditionelles if-else
let message;
if (age >= 18) {
  message = 'Adult';
} else {
  message = 'Minor';
}

// ✅ Ternärer Operator: prägnanter
const message = age >= 18 ? 'Adult' : 'Minor';

Geeignete Anwendungsszenarien

// 1. Einfache bedingte Zuweisung
const status = isLoggedIn ? 'Online' : 'Offline';

// 2. Bedingtes Rendering in JSX/Templates
return <div>{isLoading ? <Spinner /> : <Content />}</div>;

// 3. Standardwerte setzen (kombiniert mit anderen Operatoren)
const displayName = user?.name ?? 'Guest';
const greeting = isVIP ? `Welcome, ${displayName}!` : `Hello, ${displayName}`;

// 4. Funktionsrückgabewert
function getDiscount(isMember) {
  return isMember ? 0.2 : 0;
}

Szenarien, die vermieden werden sollten

// ❌ Zu tiefe Verschachtelung, schwer zu lesen
const result = condition1
  ? value1
  : condition2
  ? value2
  : condition3
  ? value3
  : value4;

// ✅ if-else oder switch ist klarer
let result;
if (condition1) result = value1;
else if (condition2) result = value2;
else if (condition3) result = value3;
else result = value4;

// ❌ Komplexe Logik
const canAccess =
  user?.role === 'admin'
    ? true
    : user?.permissions?.includes('read')
    ? true
    : false;

// ✅ In mehrere Zeilen aufteilen
const isAdmin = user?.role === 'admin';
const hasReadPermission = user?.permissions?.includes('read');
const canAccess = isAdmin || hasReadPermission;

---

Schnelle Merkkarte

Operator	Verwendung	Merkpunkt
===	Strikte Gleichheit	Immer diesen verwenden, == vergessen
&&	Kurzschluss AND	Links falsch: Stopp, gibt falschen Wert zurück
||	Kurzschluss OR	Links wahr: Stopp, gibt wahren Wert zurück
?.	Optional Chaining	Sicherer Zugriff, kein Fehler
??	Nullish Coalescing	Behandelt nur null/undefined
++i / i++	Auto-Inkrement	Präfix: erst addieren; Postfix: danach addieren
? :	Ternärer Operator	Für einfache Bedingungen, Verschachtelung vermeiden

Reference

• MDN - Expressions and operators
• JavaScript Equality Operators
• Optional Chaining
• Nullish Coalescing