Variablen & Datentypen in JavaScript

Variablen sind wie Behälter für Daten. In diesem Kapitel lernst du, wie du Daten speicherst, welche Arten von Daten es gibt und wie JavaScript damit umgeht.

Variablen deklarieren

In modernem JavaScript gibt es drei Wege, Variablen zu deklarieren:

const – Konstanten

Verwende const für Werte, die sich nicht ändern sollen:

const PI = 3.14159;
const SITE_NAME = "Meine Website";
const MAX_USERS = 100;

// ❌ Das geht NICHT:
PI = 3.14; // TypeError: Assignment to constant variable

Faustregel: Nutze const als Standard. Es macht deinen Code sicherer.

let – Veränderbare Variablen

Verwende let für Werte, die sich ändern können:

let score = 0;
score = 10;      // ✅ Funktioniert
score = score + 5;
console.log(score); // 15

let username = "Max";
username = "Anna";  // ✅ Funktioniert

var – Veraltet ⚠️

var ist die alte Art, Variablen zu deklarieren. Verwende es nicht mehr!

// ❌ Vermeide var
var oldVariable = "alt";

// ✅ Nutze stattdessen
const newConstant = "neu";
let newVariable = "auch neu";

Warum kein var?

• Hat seltsame Scoping-Regeln
• Kann zu schwer findbaren Bugs führen
• let und const sind sicherer

Namensregeln für Variablen

// ✅ Gültige Namen
let userName = "Max";
let user_name = "Max";
let _privateVar = true;
let $price = 99.99;
let age2 = 25;

// ❌ Ungültige Namen
let 2age = 25;       // Darf nicht mit Zahl beginnen
let user-name = "";   // Kein Bindestrich
let let = "test";     // Reservierte Wörter verboten

Namenskonventionen

// camelCase für normale Variablen (Standard!)
let firstName = "Max";
let numberOfUsers = 42;
let isLoggedIn = true;

// UPPER_SNAKE_CASE für Konstanten
const MAX_RETRY_COUNT = 3;
const API_BASE_URL = "https://api.example.com";

// PascalCase für Klassen (später mehr dazu)
class UserProfile { }

Die 7 Datentypen in JavaScript

JavaScript hat 7 primitive Datentypen + Object:

1. String (Text)

// Mit doppelten Anführungszeichen
const greeting = "Hallo Welt";

// Mit einfachen Anführungszeichen
const name = 'Max';

// Mit Backticks (Template Literals) - EMPFOHLEN!
const message = `Hallo ${name}!`;
console.log(message); // "Hallo Max!"

// Mehrzeilige Strings
const poem = `
    Roses are red,
    Violets are blue,
    JavaScript is awesome,
    And so are you!
`;

String-Methoden:

const text = "JavaScript ist toll";

text.length;              // 20 (Anzahl Zeichen)
text.toUpperCase();       // "JAVASCRIPT IST TOLL"
text.toLowerCase();       // "javascript ist toll"
text.includes("ist");     // true
text.startsWith("Java");  // true
text.endsWith("toll");    // true
text.replace("toll", "super"); // "JavaScript ist super"
text.split(" ");          // ["JavaScript", "ist", "toll"]
text.trim();              // Entfernt Leerzeichen am Anfang/Ende
text.slice(0, 10);        // "JavaScript"
text.charAt(0);           // "J"

2. Number (Zahlen)

const integer = 42;
const decimal = 3.14;
const negative = -17;
const million = 1_000_000;  // Unterstriche für Lesbarkeit!

// Spezielle Werte
const infinity = Infinity;
const notANumber = NaN;

// Mathe
console.log(10 + 5);    // 15
console.log(10 - 5);    // 5
console.log(10 * 5);    // 50
console.log(10 / 5);    // 2
console.log(10 % 3);    // 1 (Rest/Modulo)
console.log(10 ** 2);   // 100 (Potenz)

Number-Methoden:

const num = 3.14159;

num.toFixed(2);           // "3.14" (String!)
Math.round(num);          // 3
Math.ceil(num);           // 4 (aufrunden)
Math.floor(num);          // 3 (abrunden)
Math.abs(-5);             // 5 (Betrag)
Math.max(1, 5, 3);        // 5
Math.min(1, 5, 3);        // 1
Math.random();            // 0 bis 0.999...
Math.sqrt(16);            // 4 (Wurzel)

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

// String zu Number konvertieren
parseInt("42");           // 42
parseFloat("3.14");       // 3.14
Number("42");             // 42

3. Boolean (Wahr/Falsch)

const isLoggedIn = true;
const hasPermission = false;

// Vergleiche ergeben Booleans
console.log(5 > 3);       // true
console.log(5 < 3);       // false
console.log(5 === 5);     // true
console.log(5 !== 3);     // true

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

Truthy und Falsy:

JavaScript wandelt Werte automatisch in Boolean um:

// ❌ Falsy Werte (werden zu false)
Boolean(false);     // false
Boolean(0);         // false
Boolean("");        // false
Boolean(null);      // false
Boolean(undefined); // false
Boolean(NaN);       // false

// ✅ Truthy Werte (werden zu true)
Boolean(true);      // true
Boolean(1);         // true
Boolean("hello");   // true
Boolean([]);        // true (leeres Array!)
Boolean({});        // true (leeres Object!)

4. Undefined

Eine Variable wurde deklariert, aber kein Wert zugewiesen:

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

function noReturn() {
    // keine return-Anweisung
}
console.log(noReturn()); // undefined

5. Null

Bewusst kein Wert / leer:

let user = null; // Explizit "nichts"

// Unterschied zu undefined
let a;           // undefined - vergessen zuzuweisen
let b = null;    // null - bewusst leer gelassen

6. Symbol (Fortgeschritten)

Einzigartige Identifier:

const id1 = Symbol('id');
const id2 = Symbol('id');
console.log(id1 === id2); // false (immer einzigartig!)

7. BigInt (Sehr große Zahlen)

const bigNumber = 9007199254740991n;
const anotherBig = BigInt("9007199254740991");

Komplexe Datentypen

Array (Liste)

// Array erstellen
const fruits = ["Apfel", "Banane", "Orange"];
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, "text", true, null];

// Zugriff (Index startet bei 0!)
console.log(fruits[0]);    // "Apfel"
console.log(fruits[1]);    // "Banane"
console.log(fruits[2]);    // "Orange"
console.log(fruits.length); // 3

// Ändern
fruits[0] = "Birne";
fruits.push("Mango");      // Am Ende hinzufügen
fruits.pop();              // Letztes Element entfernen
fruits.unshift("Kirsche"); // Am Anfang hinzufügen
fruits.shift();            // Erstes Element entfernen

// Nützliche Methoden
fruits.includes("Banane"); // true
fruits.indexOf("Banane");  // 1
fruits.join(", ");         // "Birne, Banane, Orange"
fruits.reverse();          // Reihenfolge umkehren
fruits.slice(0, 2);        // Teile kopieren ["Birne", "Banane"]

Object (Objekt)

// Object erstellen
const person = {
    name: "Max",
    age: 25,
    city: "Berlin",
    isStudent: true,
    hobbies: ["Musik", "Sport", "Coding"],
    address: {
        street: "Hauptstraße 1",
        zip: "10115"
    }
};

// Zugriff - Punkt-Notation
console.log(person.name);          // "Max"
console.log(person.address.city);  // undefined
console.log(person.address.street); // "Hauptstraße 1"

// Zugriff - Bracket-Notation
console.log(person["name"]);       // "Max"
const key = "age";
console.log(person[key]);          // 25

// Ändern & Hinzufügen
person.age = 26;
person.email = "max@example.com";

// Löschen
delete person.isStudent;

// Object-Methoden
Object.keys(person);    // ["name", "age", "city", ...]
Object.values(person);  // ["Max", 26, "Berlin", ...]
Object.entries(person); // [["name", "Max"], ["age", 26], ...]

Typeof Operator

Finde heraus, welchen Typ ein Wert hat:

typeof "Hello"      // "string"
typeof 42           // "number"
typeof true         // "boolean"
typeof undefined    // "undefined"
typeof null         // "object" (bekannter Bug!)
typeof Symbol()     // "symbol"
typeof {}           // "object"
typeof []           // "object" (Array ist ein Object)
typeof function(){} // "function"

// Arrays erkennen
Array.isArray([1,2,3]); // true
Array.isArray({});      // false

Type Coercion (Automatische Umwandlung)

JavaScript wandelt Typen manchmal automatisch um:

// String + Number = String
console.log("5" + 3);      // "53"
console.log("Hello" + 5);  // "Hello5"

// Number-Operationen wandeln zu Number
console.log("5" - 3);      // 2
console.log("5" * 3);      // 15
console.log("10" / 2);     // 5

// Vergleiche
console.log("5" == 5);     // true (nur Wert)
console.log("5" === 5);    // false (Wert UND Typ) ← NUTZE DAS!

// Boolean-Kontext
if ("hello") {
    console.log("String ist truthy!");
}

⚠️ Immer === und !== verwenden!

// ❌ Vermeide == und !=
console.log(0 == false);     // true 🤔
console.log("" == false);    // true 🤔
console.log(null == undefined); // true 🤔

// ✅ Nutze === und !==
console.log(0 === false);    // false ✅
console.log("" === false);   // false ✅

Praktische Beispiele

Benutzer-Daten speichern

const user = {
    id: 1,
    username: "maxcoder",
    email: "max@example.com",
    isVerified: true,
    createdAt: "2024-01-15",
    settings: {
        theme: "dark",
        notifications: true
    }
};

console.log(`Willkommen, ${user.username}!`);
console.log(`Theme: ${user.settings.theme}`);

Warenkorb

const cart = [
    { name: "T-Shirt", price: 29.99, quantity: 2 },
    { name: "Jeans", price: 59.99, quantity: 1 },
    { name: "Schuhe", price: 89.99, quantity: 1 }
];

// Gesamtpreis berechnen
let total = 0;
for (const item of cart) {
    total += item.price * item.quantity;
}
console.log(`Gesamtpreis: ${total.toFixed(2)} €`);
// "Gesamtpreis: 209.96 €"

Zusammenfassung

Konzept	Beschreibung	Beispiel
const	Unveränderliche Variable	const PI = 3.14
let	Veränderliche Variable	let count = 0
String	Text	"Hallo"
Number	Zahlen	42, 3.14
Boolean	Wahr/Falsch	true, false
Array	Liste	[1, 2, 3]
Object	Schlüssel-Wert-Paare	{name: "Max"}
null	Bewusst leer	null
undefined	Nicht zugewiesen	undefined

Übungen

1. Erstelle ein Profil-Objekt mit deinen Daten (Name, Alter, Hobbies)
2. Erstelle eine Einkaufsliste als Array
3. Experimentiere mit typeof – teste verschiedene Werte

---