Mathematische Operatoren und das „Math“-Objekt
Funktionen
Ausblick auf das DOM (Teil 1 von 2)

JavaScript: Implizite Typkonvertierung bei mathematischen Operatoren

Stell dir vor, du sprichst mit einem Freund, der eine andere Sprache spricht. Manchmal verstehst du ihn trotzdem, weil dein Gehirn die Worte automatisch „übersetzt“. Ähnlich funktioniert die implizite Typkonvertierung in JavaScript. Die Programmiersprache versucht, unterschiedliche Datentypen automatisch ineinander umzuwandeln, damit Operationen durchgeführt werden können.

Datentypen in JavaScript

Bevor wir eintauchen, solltest du die grundlegenden Datentypen kennen:

  • Number: Zahlen wie 5, 3.14, -10
  • String: Text in Anführungszeichen wie „Hallo“, ‚Welt‘
  • Boolean: Wahrheitswerte true oder false
  • Undefined: Ein Wert, der noch nicht definiert wurde
  • Null: Ein absichtlich leerer Wert
  • Object: Komplexe Datenstrukturen wie {name: "Max"}
  • Symbol: Einzigartige, unveränderliche Werte

Implizite Typkonvertierung bei mathematischen Operationen

Multiplikation (*), Subtraktion (-) und Division (/)

Bei diesen Operationen wandelt JavaScript die beteiligten Werte automatisch in Zahlen um.

Multiplikation (*)

// String zu Number
console.log("5" * 2); // 10
console.log("5" * "2"); // 10

// Boolean zu Number
console.log(true * 5); // 5 (true wird zu 1)
console.log(false * 5); // 0 (false wird zu 0)

// Leerer String wird zu 0
console.log("" * 5); // 0

// Nicht numerische Strings werden zu NaN
console.log("Hallo" * 5); // NaN (Not a Number)

// Null wird zu 0
console.log(null * 5); // 0

// Undefined wird zu NaN
console.log(undefined * 5); // NaN

Subtraktion (-)

Die Subtraktion verhält sich ähnlich wie die Multiplikation:

console.log("10" - 5);     // 5
console.log("10" - "5"); // 5
console.log(true - 1); // 0 (true wird zu 1, dann 1-1=0)
console.log(false - 1); // -1 (false wird zu a, dann 0-1=-1)
console.log("" - 1); // -1 (leerer String wird zu 0)
console.log("zehn" - 5); // NaN

Division (/)

Auch bei der Division werden die Werte zu Zahlen konvertiert:

console.log("10" / 2);     // 5
console.log("10" / "2"); // 5
console.log(true / 2); // 0.5 (true wird zu 1, dann 1/2=0.5)
console.log(10 / false); // Infinity (Division durch 0)
console.log("" / 2); // 0 (leerer String wird zu 0, dann 0/2=0)

Implizite Typkonvertierung bei der Addition (+)

Die Addition ist besonders interessant, da das Plus-Zeichen in JavaScript zwei Funktionen hat:

  1. Zahlen addieren
  2. Text verketten (konkatenieren)

Wenn ein Wert ein String ist

Wenn mindestens ein Operand ein String ist, werden alle anderen Operanden in Strings umgewandelt:

console.log("5" + 3);      // "53" (3 wird zum String)
console.log(5 + "3"); // "53" (5 wird zum String)
console.log("Hallo " + "Welt"); // "Hallo Welt"
console.log("Nummer " + 5); // "Nummer 5"
console.log("5" + true); // "5true" (true wird zum String)
console.log(null + "wert"); // "nullwert"

Wenn kein Wert ein String ist

Sind keine Strings beteiligt, verhält sich der Plus-Operator wie bei der normalen Addition:

console.log(5 + 3);        // 8
console.log(true + true); // 2 (true wird zu 1, dann 1+1=2)
console.log(true + 5); // 6 (true wird zu 1, dann 1+5=6)
console.log(false + 5); // 5 (false wird zu 0)
console.log(null + 5); // 5 (null wird zu 0)
console.log(undefined + 5); // NaN (undefined wird zu NaN)

Verkettung mehrerer Operationen

Die Regeln werden von links nach rechts angewendet:

console.log(1 + 2 + "3");   // "33" (1+2=3, dann 3+"3"="33")
console.log("1" + 2 + 3); // "123" ("1"+2="12", dann "12"+3="123")
console.log(1 + "2" + 3); // "123" (1+"2"="12", dann "12"+3="123")

Beste Praktiken

Konvertiere Typen explizit, um deine Absicht klarzumachen (Behandeln wir genauer im nächsten Abschnitt)

Prüfe Benutzereingaben mit Funktionen wie isNaN() oder regulären Ausdrücken. (Auch mit diesem Thema werden wir uns befassen)

Verwende Template-Strings für Text mit eingebetteten Werten.

// Statt:
console.log(„Der Wert ist: “ + x);

// Besser:
console.log(`Der Wert ist: ${x}`);

TL;DR

Die implizite Typkonvertierung in JavaScript ist wie ein hilfreicher, aber manchmal eigenwilliger Übersetzer. Sie kann dir Zeit sparen, aber auch zu unerwarteten Ergebnissen führen. Mit einem guten Verständnis der Regeln und dem Einsatz expliziter Konvertierung wirst du JavaScript besser beherrschen und weniger Überraschungen erleben.

Denke immer daran: Bei mathematischen Operationen (-,*,/) werden Werte zu Zahlen, bei der Addition (+) entscheidet das Vorhandensein von Strings über die Konvertierungsrichtung.