JavaScript Data Types

JavaScript hat 7 primitive Datentypen und Objects (komplexe Typen). Lass uns alle kennenlernen!

Primitive vs. Non-Primitive

Primitive Typen (unveränderlich):

String
Number
Boolean
undefined
null
Symbol (ES6)
BigInt (ES2020)

Non-Primitive (komplexe Typen):

Object
Array
Function

1. String - Text

Strings sind Texte in Anführungszeichen:

Strings erstellen

// Einfache Anführungszeichen
const name = 'Max';

// Doppelte Anführungszeichen
const nachname = "Mustermann";

// Backticks (Template Literals)
const vollname = `Max Mustermann`;

// Strings mit Zahlen
const alter = '25';  // String, nicht Number!
const preis = "19.99";  // String, nicht Number!

String-Methoden

Wichtige String-Methoden

const text = 'Hallo Welt';

// Länge
console.log(text.length);  // 10

// Großbuchstaben
console.log(text.toUpperCase());  // HALLO WELT

// Kleinbuchstaben
console.log(text.toLowerCase());  // hallo welt

// Zeichen an Position
console.log(text[0]);  // H
console.log(text.charAt(0));  // H

// Enthält Text?
console.log(text.includes('Welt'));  // true

// Teilen
console.log(text.split(' '));  // ['Hallo', 'Welt']

// Ersetzen
console.log(text.replace('Welt', 'JavaScript'));  // Hallo JavaScript

// Anfang/Ende
console.log(text.startsWith('Hallo'));  // true
console.log(text.endsWith('Welt'));  // true

// Trimmen (Leerzeichen entfernen)
const text2 = '  Hallo  ';
console.log(text2.trim());  // 'Hallo'

String Concatenation

Strings verbinden

const vorname = 'Max';
const nachname = 'Mustermann';

// Mit +
const name1 = vorname + ' ' + nachname;
console.log(name1);  // Max Mustermann

// Mit Template Literal (modern!)
const name2 = `${vorname} ${nachname}`;
console.log(name2);  // Max Mustermann

// Mit concat()
const name3 = vorname.concat(' ', nachname);
console.log(name3);  // Max Mustermann

2. Number - Zahlen

Numbers sind alle Zahlen (Integer und Float):

Numbers

// Integer (Ganzzahl)
const alter = 25;
const anzahl = 100;

// Float (Dezimalzahl)
const preis = 19.99;
const pi = 3.14159;

// Negativ
const temperatur = -10;

// Wissenschaftliche Notation
const gross = 1e6;  // 1000000
const klein = 1e-6;  // 0.000001

// Spezielle Werte
const unendlich = Infinity;
const negativUnendlich = -Infinity;
const keinZahl = NaN;  // Not a Number

Number-Methoden

Number Operationen

const zahl = 3.14159;

// Auf Ganzzahl runden
console.log(Math.round(zahl));  // 3
console.log(Math.floor(zahl));  // 3 (abrunden)
console.log(Math.ceil(zahl));   // 4 (aufrunden)

// Dezimalstellen
console.log(zahl.toFixed(2));  // '3.14' (String!)

// Absoluter Wert
console.log(Math.abs(-10));  // 10

// Maximum / Minimum
console.log(Math.max(1, 5, 3));  // 5
console.log(Math.min(1, 5, 3));  // 1

// Zufallszahl (0 bis 1)
console.log(Math.random());  // z.B. 0.547382

// Zufallszahl zwischen 1 und 10
const random = Math.floor(Math.random() * 10) + 1;

// Potenz
console.log(Math.pow(2, 3));  // 8 (2³)

// Quadratwurzel
console.log(Math.sqrt(16));  // 4

NaN - Not a Number

NaN verstehen

// NaN entsteht bei ungültigen Operationen
const ergebnis = 'text' / 2;
console.log(ergebnis);  // NaN

// NaN prüfen
console.log(isNaN(ergebnis));  // true
console.log(isNaN(42));  // false

// NaN ist nicht gleich sich selbst!
console.log(NaN === NaN);  // false
console.log(Number.isNaN(NaN));  // true (besser!)

3. Boolean - Wahr/Falsch

Booleans haben nur zwei Werte: true oder false

Boolean

const istStudent = true;
const hatFuehrerschein = false;
const istErwachsen = true;

// Vergleiche ergeben Boolean
const alter = 25;
console.log(alter > 18);  // true
console.log(alter < 18);  // false

// Logische Operationen
console.log(true && false);  // false (UND)
console.log(true || false);  // true (ODER)
console.log(!true);  // false (NICHT)

Truthy & Falsy

Falsy Values (werden zu false):

Falsy Values

// Diese Werte sind "falsy"
console.log(Boolean(false));      // false
console.log(Boolean(0));          // false
console.log(Boolean(''));         // false (leerer String)
console.log(Boolean(null));       // false
console.log(Boolean(undefined));  // false
console.log(Boolean(NaN));        // false

// Alles andere ist "truthy"
console.log(Boolean(true));       // true
console.log(Boolean(1));          // true
console.log(Boolean('text'));     // true
console.log(Boolean([]));         // true
console.log(Boolean({}));         // true

4. undefined - Nicht definiert

undefined = Variable deklariert, aber kein Wert zugewiesen:

undefined

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

// Funktion ohne return
function test() {
    // kein return
}
console.log(test());  // undefined

// Nicht existierende Property
const person = { name: 'Max' };
console.log(person.alter);  // undefined

5. null - Bewusst leer

null = Absichtlich kein Wert:

null

// Bewusst "leer" setzen
let user = null;
console.log(user);  // null

// Unterschied zu undefined
let a;           // undefined (nicht zugewiesen)
let b = null;    // null (bewusst leer)

// Prüfen
console.log(a === undefined);  // true
console.log(b === null);       // true

6. Array - Liste von Werten

Arrays sind geordnete Listen:

Arrays

// Array erstellen
const zahlen = [1, 2, 3, 4, 5];
const namen = ['Max', 'Anna', 'Tom'];
const mixed = [1, 'text', true, null];

// Zugriff über Index (startet bei 0)
console.log(zahlen[0]);  // 1
console.log(namen[1]);   // Anna

// Länge
console.log(zahlen.length);  // 5

// Letztes Element
console.log(zahlen[zahlen.length - 1]);  // 5

7. Object - Schlüssel-Wert-Paare

Objects speichern Daten mit Namen:

Objects

// Object erstellen
const person = {
    name: 'Max',
    alter: 25,
    istStudent: true
};

// Zugriff über Key
console.log(person.name);   // Max
console.log(person.alter);  // 25

// Oder mit []
console.log(person['name']);  // Max

// Property ändern
person.alter = 26;

// Property hinzufügen
person.stadt = 'Berlin';

typeof - Typ prüfen

typeof gibt den Typ zurück:

typeof Operator

console.log(typeof 'text');        // 'string'
console.log(typeof 42);            // 'number'
console.log(typeof true);          // 'boolean'
console.log(typeof undefined);     // 'undefined'
console.log(typeof null);          // 'object' (Bug in JS!)
console.log(typeof []);            // 'object'
console.log(typeof {});            // 'object'
console.log(typeof function(){}); // 'function'

// Variable prüfen
const alter = 25;
console.log(typeof alter);  // 'number'

Achtung: typeof null gibt 'object' zurück (historischer Bug)!

Type Conversion - Typen umwandeln

Zu String konvertieren

String Conversion

// Explizit
const zahl = 123;
const string1 = String(zahl);
const string2 = zahl.toString();

console.log(typeof string1);  // 'string'

// Implizit (Coercion)
const string3 = zahl + '';
console.log(string3);  // '123'

Zu Number konvertieren

Number Conversion

// Explizit
const string = '123';
const number1 = Number(string);
const number2 = parseInt(string);
const number3 = parseFloat('3.14');

console.log(typeof number1);  // 'number'
console.log(number3);  // 3.14

// Implizit
const number4 = +'123';  // Unäres Plus
console.log(number4);  // 123

// Fehler
console.log(Number('abc'));  // NaN

Zu Boolean konvertieren

Boolean Conversion

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

// Implizit (in if)
if ('text') {
    console.log('truthy');
}

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

Type Coercion - Automatische Umwandlung

JavaScript wandelt Typen automatisch um:

Type Coercion

// String + Number = String
console.log('5' + 3);  // '53' (Concatenation)

// String - Number = Number
console.log('5' - 3);  // 2 (Subtraktion)

// Boolean zu Number
console.log(true + 1);   // 2
console.log(false + 1);  // 1

// Vergleiche
console.log('5' == 5);   // true (loose equality, konvertiert)
console.log('5' === 5);  // false (strict equality, keine Konversion)

// Vorsicht!
console.log([] + []);      // '' (leerer String)
console.log([] + {});      // '[object Object]'
console.log({} + []);      // 0 oder '[object Object]' (Browser-abhängig)

== vs. === - Equality

Immer === nutzen!

== vs ===

// == (loose equality) - mit Type Coercion
console.log(5 == '5');       // true (konvertiert!)
console.log(true == 1);      // true
console.log(null == undefined);  // true

// === (strict equality) - ohne Type Coercion
console.log(5 === '5');      // false (verschiedene Typen)
console.log(true === 1);     // false
console.log(null === undefined);  // false

// Best Practice: IMMER === nutzen!

Praktische Beispiele

Beispiel 1: Form Validation

Eingabe validieren

const userInput = document.getElementById('age').value;

// Input ist immer String!
console.log(typeof userInput);  // 'string'

// Zu Number konvertieren
const age = Number(userInput);

// Validieren
if (isNaN(age)) {
    console.log('Bitte eine Zahl eingeben!');
} else if (age < 18) {
    console.log('Zu jung!');
} else {
    console.log('Willkommen!');
}

Beispiel 2: Template String

Dynamischer Text

const name = 'Max';
const age = 25;
const isStudent = true;

const message = `
    Name: ${name}
    Alter: ${age}
    Student: ${isStudent ? 'Ja' : 'Nein'}
    In 5 Jahren: ${age + 5} Jahre
`;

console.log(message);

Best Practices

✅ DO:

=== statt == (strict equality)
Typen explizit konvertieren (Number(), String())
typeof für Type-Checks
Template Literals für Strings mit Variables
isNaN() für NaN-Check

❌ DON'T:

Nicht == nutzen (vermeidet Type Coercion)
Nicht typeof null für null-Check (gibt 'object')
Nicht implizite Coercion verlassen
Nicht NaN === NaN prüfen (immer false)

TipsAndTricks

⚡

Tipps & Tricks

Template Literals für String-Interpolation

Nutze Template Literals statt String-Verkettung für besseren Code:

const name = 'Max';
const age = 25;
// Alt:
const text = 'Ich bin ' + name + ', ' + age + ' Jahre alt';
// Neu:
const text = `Ich bin ${name}, ${age} Jahre alt`;
// Mit Berechnungen:
const text = `In 5 Jahren bin ich ${age + 5} Jahre alt`;

Nullish Coalescing für Fallback-Werte

Der ?? Operator ist besser als || für Default-Werte:

// Problem mit ||
const count = 0;
const display = count || 'Keine Daten';  // 'Keine Daten' (0 ist falsy!)

// Lösung mit ??
const display = count ?? 'Keine Daten';  // 0 (nur bei null/undefined)

// Praktisch für APIs
const username = userData?.name ?? 'Gast';

Optional Chaining für sicheren Property-Zugriff

Vermeide Fehler bei undefined/null Properties:

const user = { address: { city: 'Berlin' } };

// Alt: Fehleranfällig
const city = user && user.address && user.address.city;

// Neu: Mit Optional Chaining
const city = user?.address?.city;  // Berlin
const zip = user?.address?.zip;    // undefined (kein Fehler!)

Number() vs parseInt() richtig einsetzen

Wähle die richtige Methode zur Konvertierung:

// Number() - Für cleane Zahlen
Number('42')      // 42
Number('42.5')    // 42.5
Number('42px')    // NaN

// parseInt() - Für Zahlen mit Text
parseInt('42px')     // 42 (stoppt bei erstem Nicht-Zahl-Zeichen)
parseInt('42.5')     // 42 (ignoriert Dezimalstellen)
parseFloat('42.5px') // 42.5

📝 Quiz

Was ist der Unterschied zwischen null und undefined?

Kein Unterschiedundefined = nicht zugewiesen, null = bewusst leernull ist veraltetundefined ist ein Fehler

📝 Quiz

Warum sollte man === statt == nutzen?

=== ist schneller=== prüft Wert UND Typ, == konvertiert Typen== ist veraltetKein Unterschied

Übungsaufgaben

Aufgabe 1: Type Checks

Erstelle Variables mit verschiedenen Typen:

String, Number, Boolean, undefined, null
Gebe typeof für alle aus
Prüfe welche truthy/falsy sind

Aufgabe 2: Conversions

Konvertiere:

String '42' zu Number
Number 123 zu String
String 'true' zu Boolean
Teste mit console.log()

Aufgabe 3: Template String

Erstelle Variables:

name, age, city
Template String mit allen Werten
Rechnung im Template (age + 10)

Nächste Schritte

Du kennst jetzt:

✅ Alle Datentypen (String, Number, Boolean, etc.)
✅ Primitive vs. Non-Primitive
✅ typeof Operator
✅ Type Conversion & Coercion
✅ == vs. ===
✅ Truthy & Falsy Values
✅ String & Number Methoden

Als Nächstes lernst du:

Operators (Arithmetik, Vergleiche, Logik)
Conditionals (if, else, switch)
Loops (for, while)

Weiter so! 🚀

JavaScript Data Types - String, Number, Boolean & mehr

JavaScript Data Types

Primitive vs. Non-Primitive

1. String - Text

String-Methoden

String Concatenation

2. Number - Zahlen

Number-Methoden

NaN - Not a Number

3. Boolean - Wahr/Falsch

Truthy & Falsy

4. undefined - Nicht definiert

5. null - Bewusst leer

6. Array - Liste von Werten

7. Object - Schlüssel-Wert-Paare

typeof - Typ prüfen

Type Conversion - Typen umwandeln

Zu String konvertieren

Zu Number konvertieren

Zu Boolean konvertieren

Type Coercion - Automatische Umwandlung

== vs. === - Equality

Praktische Beispiele

Beispiel 1: Form Validation

Beispiel 2: Template String

Best Practices

✅ DO:

❌ DON'T:

TipsAndTricks

Tipps & Tricks

Template Literals für String-Interpolation

Nullish Coalescing für Fallback-Werte

Optional Chaining für sicheren Property-Zugriff

Number() vs parseInt() richtig einsetzen

📝 Quiz

📝 Quiz

Übungsaufgaben

Nächste Schritte

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

JavaScript Grundlagen: Deine erste Programmierung

JavaScript Arrays - Listen & Array Methods

JavaScript Conditionals - if, else, switch