Skip to content

Kapitel 5: Datentypen

JavaScript hat verschiedene Datentypen, um unterschiedliche Arten von Informationen zu speichern. In diesem Kapitel lernen Sie alle wichtigen Datentypen kennen.

5.1 Grundlegende Datentypen (5 Kern-Datentypen)

JavaScript unterscheidet zwischen primiven und komplexen Datentypen.

1. Number (Zahlen)

javascript
let alter = 25;          // Ganze Zahl
let preis = 19.99;      // Dezimalzahl
let temperatur = -5;     // Negative Zahl

console.log(typeof alter);      // "number"
console.log(typeof preis);     // "number"

Besonderheiten:

  • ✅ Kein Unterschied zwischen Ganzzahlen und Dezimalzahlen
  • ✅ Erlaubt: Positive/negative Zahlen, Dezimalzahlen
  • ⚠️ Infinity (unendlich), -Infinity, NaN (Not a Number)
javascript
let x = 10 / 0;
console.log(x);  // Infinity

let y = "Hallo" / 2;
console.log(y);  // NaN

2. String (Zeichenketten)

javascript
let name = "Max";           // Mit doppelten Anführungszeichen
let stadt = 'Berlin';      // Mit einfachen Anführungszeichen
let text = `Hallo ${name}`; // Mit Backticks (Template Literals)

console.log(typeof name);   // "string"

Template Literals (Empfohlen):

javascript
let vorname = "Max";
let nachname = "Mustermann";
let alter = 25;

// Alt (schlecht):
let begruessung1 = "Hallo " + vorname + " " + nachname + ", du bist " + alter + " Jahre alt.";

// Neu (gut - Template Literals):
let begruessung2 = `Hallo ${vorname} ${nachname}, du bist ${alter} Jahre alt.`;

3. Boolean (Wahrheitswert)

javascript
let istAngemeldet = true;
let istMinderjaehrig = false;

console.log(typeof istAngemeldet);  // "boolean"

Verwendung:

  • ✅ Bedingte Anweisungen (if)
  • ✅ Schleifen (while)
  • ✅ Flag-Variablen

4. Null (Leerer Wert)

javascript
let benutzer = null;  // Absichtlich leer

console.log(typeof benutzer);  // "object" (eigentlich ein Bug in JavaScript)

Wann verwendet man null?

  • ✅ Wenn eine Variable absichtlich leer sein soll
  • ✅ Um eine Variable "zurückzusetzen"

5. Undefined (Nicht definiert)

javascript
let x;
console.log(x);  // undefined

console.log(typeof x);  // "undefined"

Unterschied zwischen null und undefined:

nullundefined
Absichtlich leerNicht zugewiesen
Programmierer setzt WertJavaScript setzt Wert

5.2 Datentyp-Erkennung: typeof Operator

Der typeof Operator gibt den Datentyp einer Variable zurück.

Grundlegende Verwendung

javascript
console.log(typeof 42);           // "number"
console.log(typeof "Hallo");     // "string"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object" (Bug!)
console.log(typeof Symbol());     // "symbol"
console.log(typeof 123n);        // "bigint"
console.log(typeof function(){}); // "function"
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"

Überraschungen mit typeof

javascript
// Achtung: Diese sind überraschend!
console.log(typeof null);   // "object" (eigentlich ein Fehler in JS)
console.log(typeof []);     // "object" (Array ist ein Objekt)
console.log(typeof NaN);    // "number" (😱 NaN ist eine Zahl?!)

Bessere Methoden zur Typüberprüfung:

javascript
// Für Arrays
Array.isArray([1, 2, 3]);  // true

// Für null
x === null;  // true, wenn x null ist

// Für NaN
isNaN(NaN);  // true
Number.isNaN(NaN);  // true (besser!)

5.3 Datentyp-Konvertierung

JavaScript kann Datentypen automatisch oder manuell konvertieren.

1. String zu Number

javascript
// Methode 1: Number()
let str1 = "123";
let num1 = Number(str1);
console.log(num1);  // 123
console.log(typeof num1);  // "number"

// Methode 2: parseFloat() / parseInt()
let str2 = "3.14";
let num2 = parseFloat(str2);
console.log(num2);  // 3.14

let str3 = "100";
let num3 = parseInt(str3);
console.log(num3);  // 100

// Methode 3: Unäre Plus-Operator (Kurzform)
let str4 = "42";
let num4 = +str4;
console.log(num4);  // 42

2. Number zu String

javascript
// Methode 1: toString()
let zahl = 123;
let text1 = zahl.toString();
console.log(text1);  // "123"
console.log(typeof text1);  // "string"

// Methode 2: String()
let text2 = String(zahl);
console.log(text2);  // "123"

// Methode 3: Template Literal (empfohlen!)
let text3 = `${zahl}`;
console.log(text3);  // "123"

3. Zu Boolean konvertieren

javascript
// Falsy-Werte (werden zu false):
Boolean(0);        // false
Boolean("");       // false
Boolean(null);     // false
Boolean(undefined);// false
Boolean(NaN);      // false

// Truthy-Werte (werden zu true):
Boolean(1);        // true
Boolean("Hallo");  // true
Boolean([]);       // true (leeres Array ist truthy!)
Boolean({});       // true (leeres Objekt ist truthy!)

Kurzform mit !!:

javascript
let x = "Hallo";
console.log(!!x);  // true

let y = 0;
console.log(!!y);  // false

5.4 Anfänger-Fehler: Häufige Typfehler

Fehler 1: Strings und Zahlen addieren

javascript
// Problem:
let alter = 25;
let text = "Ich bin " + alter + " Jahre alt.";
console.log(text);  // "Ich bin 25 Jahre alt." ✅ (funktioniert)

// Aber:
let zahl1 = "10";
let zahl2 = 5;
let ergebnis = zahl1 + zahl2;
console.log(ergebnis);  // "105" ❌ (String-Konkatenation!)

Lösung:

javascript
let zahl1 = "10";
let zahl2 = 5;
let ergebnis = Number(zahl1) + zahl2;
console.log(ergebnis);  // 15 ✅

Fehler 2: == vs ===

javascript
// == (lose Gleichheit - konvertiert Typen)
console.log(5 == "5");   // true ⚠️
console.log(1 == true);   // true ⚠️
console.log(0 == false);  // true ⚠️

// === (strenge Gleichheit - kein Typen-Check)
console.log(5 === "5");   // false ✅
console.log(1 === true);   // false ✅
console.log(0 === false);  // false ✅

Empfehlung: Immer === verwenden!

Fehler 3: null und undefined verwechseln

javascript
// Falsch:
if (benutzer === null) {
    // Prüft nur auf null, nicht auf undefined
}

// Richtig:
if (benutzer == null) {
    // Prüft auf null UND undefined ✅
}

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

  • 5 Grund-Datentypen: Number, String, Boolean, Null, Undefined
  • typeof gibt den Datentyp zurück (mit Überraschungen!)
  • ✅ Datentyp-Konvertierung: Number(), String(), Boolean()
  • ✅ Häufige Fehler: String + Zahl, == vs ===
  • ✅ Immer === statt == verwenden
  • ✅ Template Literals für String-Interpolation verwenden

➡️ Nächster Schritt

Im nächsten Kapitel lernen wir Operatoren - Werkzeuge zum Rechnen und Vergleichen!


Übung:

  1. Erstellen Sie Variablen verschiedener Datentypen
  2. Überprüfen Sie ihre Typen mit typeof
  3. Konvertieren Sie einen String zu einer Zahl und addieren Sie ihn
  4. Experimentieren Sie mit == und ===
  5. Geben Sie alle Ergebnisse in der Konsole aus

Frei für alle Anfänger