JavaScript Datentypen und Type Casting

JavaScript ist dynamisch typisiert – Variablen haben keinen festen Typ, sondern der Wert bestimmt den Typ. Das macht die Sprache flexibel, aber auch fehleranfällig. In diesem Tutorial lernst du alle Datentypen kennen und wie JavaScript zwischen ihnen konvertiert.

Primitive Datentypen

JavaScript hat 7 primitive Datentypen (unveränderliche Werte):

1. String – Textdaten

Strings repräsentieren Text und werden in Anführungszeichen geschrieben:

let singleQuote = 'Hallo';
let doubleQuote = "Welt";
let templateLiteral = `Template String mit ${singleQuote}`; // ES6

console.log(templateLiteral); // Template String mit Hallo

Template Literals (Backticks) erlauben:

Variablen einbetten: ${variable}
Mehrzeilige Strings
Expression Evaluation

let name = 'MaxMustermann';
let age = 25;

let message = `Hallo, ich bin ${name} und bin ${age} Jahre alt.
Das ist eine zweite Zeile!`;

console.log(message);
// Output:
// Hallo, ich bin MaxMustermann und bin 25 Jahre alt.
// Das ist eine zweite Zeile!

// Expressions in Template Literals
let price = 100;
console.log(`Preis mit MwSt: ${price * 1.19}€`); // Preis mit MwSt: 119€

Escape Characters:

let text = 'It\'s a nice day'; // Escape mit Backslash
let path = "C:\\Users\\MaxMustermann"; // Backslash escapen
let newline = "Zeile 1\nZeile 2"; // \n = Zeilenumbruch

2. Number – Zahlen (Integer und Float)

JavaScript hat nur einen Number-Typ für alle Zahlen:

let integer = 42;
let float = 3.14;
let negative = -10;
let scientific = 2.5e6; // 2.5 * 10^6 = 2500000

console.log(typeof integer); // number
console.log(typeof float);   // number

Spezielle Number-Werte:

let infinity = Infinity;       // Unendlich
let negInfinity = -Infinity;
let notANumber = NaN;          // "Not a Number"

console.log(1 / 0);            // Infinity
console.log(-1 / 0);           // -Infinity
console.log('text' * 5);       // NaN – ungültige Operation

// NaN-Check
console.log(isNaN(NaN));       // true
console.log(isNaN('text'));    // true (wird zu NaN konvertiert)
console.log(Number.isNaN(NaN)); // true (besser!)
console.log(Number.isNaN('text')); // false (keine Konvertierung)

Number-Methoden:

let num = 3.14159;

console.log(num.toFixed(2));        // "3.14" (String!)
console.log(num.toPrecision(3));    // "3.14"
console.log(parseInt('42px'));      // 42
console.log(parseFloat('3.14abc')); // 3.14

3. BigInt – Große Ganzzahlen (ES2020)

Für Zahlen größer als 2^53 - 1 (Number.MAX_SAFE_INTEGER):

let bigNumber = 1234567890123456789012345678901234567890n; // Suffix 'n'
let fromNumber = BigInt(123);

console.log(typeof bigNumber); // bigint

// Operationen
console.log(10n + 20n);  // 30n
console.log(10n * 2n);   // 20n

// Mixing mit Number nicht erlaubt!
console.log(10n + 5);    // ❌ TypeError: Cannot mix BigInt and other types
console.log(10n + 5n);   // ✅ 15n

4. Boolean – true/false

Nur zwei Werte: true und false

let isActive = true;
let hasPermission = false;

console.log(typeof isActive); // boolean

// Aus Vergleichen
let isAdult = age >= 18;      // true oder false
let isEqual = 5 === 5;        // true

Falsy Values (werden zu false konvertiert):

Boolean(false);      // false
Boolean(0);          // false
Boolean(-0);         // false
Boolean(0n);         // false (BigInt Zero)
Boolean('');         // false (leerer String)
Boolean(null);       // false
Boolean(undefined);  // false
Boolean(NaN);        // false

// Alles andere ist truthy!
Boolean('0');        // true (String mit Inhalt)
Boolean('false');    // true
Boolean([]);         // true (leeres Array)
Boolean({});         // true (leeres Objekt)

5. undefined – Nicht zugewiesener Wert

undefined bedeutet: Variable existiert, hat aber keinen Wert:

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

// Funktionsparameter ohne Argument
function test(param) {
  console.log(param);        // undefined
}
test();

// Nicht existierende Objekt-Eigenschaften
let user = { name: 'Max' };
console.log(user.age);       // undefined

6. null – Absichtlich kein Wert

null repräsentiert absichtliche Abwesenheit eines Werts:

let result = null; // Explizit: "noch kein Wert"
console.log(result);         // null
console.log(typeof null);    // "object" (JavaScript-Bug!)

// Unterschied zu undefined
let a;              // undefined – nicht initialisiert
let b = null;       // null – bewusst gesetzt

null vs. undefined:

console.log(null == undefined);  // true (loose equality)
console.log(null === undefined); // false (strict equality)

// Praktisch
let data = fetchData(); // Funktion gibt null zurück bei Fehler
if (data === null) {
  console.log('Fehler beim Laden');
}

7. Symbol – Einzigartige Identifier (ES6)

Symbols sind garantiert einzigartig – nützlich für Object Keys:

let sym1 = Symbol('description');
let sym2 = Symbol('description');

console.log(sym1 === sym2); // false – immer verschieden!
console.log(typeof sym1);   // "symbol"

// Verwendung als Object Key
let id = Symbol('id');
let user = {
  name: 'Max',
  [id]: 12345 // Symbol als Key
};

console.log(user[id]);      // 12345
console.log(user.id);       // undefined – nicht dasselbe!

typeof Operator – Typen prüfen

Der typeof Operator gibt den Typ als String zurück:

console.log(typeof 'text');       // "string"
console.log(typeof 42);           // "number"
console.log(typeof 42n);          // "bigint"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof Symbol('x'));  // "symbol"

// Spezialfälle
console.log(typeof null);         // "object" (historischer Bug!)
console.log(typeof {});           // "object"
console.log(typeof []);           // "object" (Arrays sind Objects)
console.log(typeof function(){}); // "function" (technisch auch Object)

typeof-Fallstricke vermeiden:

// null prüfen
let value = null;
if (value === null) {
  console.log('ist null');
}

// Array prüfen
let arr = [];
console.log(Array.isArray(arr)); // true (besser als typeof!)

Non-Primitive: Object

Alle komplexen Datenstrukturen sind Objects:

// Object Literal
let person = {
  name: 'Max',
  age: 25
};

// Array
let numbers = [1, 2, 3];

// Function
function greet() {}

// Alle sind typeof "object" (außer Functions)
console.log(typeof person);  // "object"
console.log(typeof numbers); // "object"
console.log(typeof greet);   // "function"

Primitive vs. Object:

// Primitives sind immutable
let str = 'hello';
str.toUpperCase(); // Gibt neuen String zurück
console.log(str);  // 'hello' – Original unverändert

// Objects sind mutable
let obj = { count: 5 };
obj.count = 10;    // Ändert das Objekt direkt
console.log(obj);  // { count: 10 }

Type Conversion vs. Type Coercion

Explicit Type Conversion (manuell)

String Conversion:

let num = 123;
let str = String(num);    // "123"
let str2 = num.toString(); // "123"

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

Number Conversion:

let str = '123';
let num = Number(str);     // 123
let num2 = parseInt(str);  // 123
let num3 = parseFloat('3.14'); // 3.14
let num4 = +'456';         // 456 (Unary Plus Operator)

console.log(typeof num);   // "number"

// Fehlerhafte Conversions
console.log(Number('abc')); // NaN
console.log(Number(null));  // 0
console.log(Number(undefined)); // NaN
console.log(Number(true));  // 1
console.log(Number(false)); // 0

Boolean Conversion:

console.log(Boolean(1));       // true
console.log(Boolean(0));       // false
console.log(Boolean('text'));  // true
console.log(Boolean(''));      // false
console.log(Boolean(null));    // false
console.log(Boolean(undefined)); // false

// Double Negation Trick
console.log(!!'text');  // true
console.log(!!0);       // false

Implicit Type Coercion (automatisch)

JavaScript konvertiert Typen automatisch in bestimmten Kontexten:

String Coercion (mit +):

console.log('5' + 3);      // "53" – Number wird zu String
console.log('Hello' + true); // "Hellotrue"
console.log('Value: ' + null); // "Value: null"

// Aber Achtung:
console.log('10' - 5);     // 5 – String wird zu Number!
console.log('10' * 2);     // 20
console.log('10' / 2);     // 5

Number Coercion (in Rechenoperationen):

console.log('5' - 3);      // 2
console.log('5' * '2');    // 10
console.log('10' / '2');   // 5
console.log('abc' - 5);    // NaN

// Vergleiche
console.log('5' > 3);      // true – String wird zu Number

Boolean Coercion (in if/while):

if ('text') {
  console.log('Truthy!'); // Wird ausgeführt
}

if (0) {
  console.log('Falsy!');  // Wird NICHT ausgeführt
}

// Praktisch
let user = getUserData(); // könnte null sein
if (user) {
  console.log(user.name); // Safe Access
}

Equality und Type Coercion

Loose Equality (==) – MIT Coercion

console.log(5 == '5');     // true – String wird zu Number
console.log(true == 1);    // true
console.log(false == 0);   // true
console.log(null == undefined); // true
console.log('' == 0);      // true

// Verwirrend:
console.log('0' == false); // true
console.log([] == false);  // true
console.log([] == ![]);    // true (!)

Strict Equality (===) – OHNE Coercion

console.log(5 === '5');    // false – verschiedene Typen
console.log(true === 1);   // false
console.log(null === undefined); // false
console.log('' === 0);     // false

// Empfohlen: Immer === nutzen!

Häufige Pitfalls (Fallstricke)

1. Addition vs. Concatenation

console.log(1 + 2);        // 3 (Number Addition)
console.log('1' + 2);      // "12" (String Concatenation)
console.log(1 + 2 + '3');  // "33" (erst 1+2=3, dann "3"+"3")
console.log('1' + 2 + 3);  // "123" (alles String)

2. typeof null

console.log(typeof null);  // "object" (Bug seit JavaScript 1.0)

// Richtig null prüfen:
let value = null;
console.log(value === null); // ✅ true

3. NaN ist nicht gleich sich selbst

console.log(NaN === NaN);  // false (!)

// Richtig prüfen:
console.log(isNaN(NaN));           // true
console.log(Number.isNaN(NaN));    // true (besser!)

4. Negative Zero

let negZero = -0;
console.log(negZero === 0);        // true
console.log(Object.is(negZero, 0)); // false (unterscheidet -0 und 0)

5. parseInt ohne Radix

console.log(parseInt('08'));  // 8 (moderne Browser)
console.log(parseInt('08', 10)); // 8 (explizit Basis 10 – sicherer!)
console.log(parseInt('1010', 2)); // 10 (Binär zu Dezimal)

Best Practices

// ✅ Nutze strikte Gleichheit
if (value === 42) { }

// ✅ Explizite Conversions
let num = Number(input);
let str = String(value);

// ✅ Typen prüfen
if (typeof age === 'number') { }
if (Array.isArray(data)) { }

// ✅ Falsy-Check nur wenn gewollt
if (user) { } // OK für null/undefined-Check

// ❌ Vermeide
if (value == true) { }  // Nutze === oder Boolean(value)
let x = new Number(5);  // Nutze Primitive, nicht Wrapper-Objects

Zusammenfassung

Primitive Types:

string, number, bigint, boolean, undefined, null, symbol

Type Checking:

typeof für die meisten Typen
=== null für null-Check
Array.isArray() für Arrays

Conversions:

Explizit: Number(), String(), Boolean()
Implizit: Vorsicht bei + (String Concatenation!)
Immer === statt == verwenden

Nächste Schritte

Du verstehst jetzt:

Alle JavaScript Datentypen
typeof Operator und seine Eigenheiten
Unterschied zwischen Type Conversion und Coercion
Häufige Fallstricke und wie man sie vermeidet

Im nächsten Tutorial lernst du Objekte und Prototypen – wie JavaScript komplexe Datenstrukturen verwaltet.

Weiterführende Ressourcen

Tipp: Teste Type Coercion in der Console mit verschiedenen Operatoren (+, -, *, /, ==, ===) und Werten!