JavaScript Variables

const - Konstante Werte

const verwendest du für Werte, die sich nicht ändern sollen. Einmal zugewiesen, kannst du den Wert nicht mehr neu zuweisen.

javascript Kopieren

// Konstante deklarieren
const PI = 3.14159;
const siteName = "DevPanicZone";

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

Bei Objekten und Arrays kannst du mit const zwar keine neue Referenz zuweisen, aber die Inhalte ändern:

javascript Kopieren

const user = { name: "Anna-Maria" };
user.name = "Anna";     // Inhalt verändert
user = { name: "Anna"}; // geht nicht

Das liegt daran, dass user eine „Referenz“ speichert — das ist aber Anfänger-Advanced. Fürs erste reicht:

• const = Schublade bleibt dieselbe
• Inhalt darf verändert werden, wenn es ein Objekt ist.

let - Variable Werte

let verwendest du für Werte, die sich im Laufe des Programms ändern können.

javascript Kopieren

// Variable deklarieren
let counter = 0;

// Wert ändern - das funktioniert!
counter = 1;
counter = counter + 1;
counter++;

console.log(counter); // 3

var - Die alte Methode (nicht empfohlen)

var war die ursprüngliche Art, Variablen zu deklarieren. Es hat aber einige Probleme, die zu unerwartetem Verhalten führen können.

javascript Kopieren

// Funktioniert, aber nicht empfohlen
var oldStyle = "nicht mehr nutzen";

// Probleme mit var:
var x = 1;
var x = 2; // Erlaubt! Kann zu Bugs führen

// Mit let wäre das ein Fehler:
let y = 1;
let y = 2; // SyntaxError: Identifier 'y' has already been declared

Global Scope

Variablen, die außerhalb aller Funktionen und Blöcke deklariert werden, sind global zugänglich.

javascript Kopieren

// Global Scope
const globalVar = "Überall verfügbar";

function showGlobal() {
    console.log(globalVar); // Funktioniert!
}

showGlobal();

Function Scope

Alle drei Keywords var, let & const haben Function Scope - sie sind nur innerhalb der Funktion zugänglich, in der sie deklariert wurden.

javascript Kopieren

function testFunctionScope() {
    const functionVar = "Nur in der Funktion";
    console.log(functionVar); // Funktioniert!
}

console.log(functionVar); // ReferenceError: functionVar is not defined

Block Scope

let und const haben Block Scope - sie sind nur innerhalb des Blocks {...} zugänglich. var hat KEINEN Block Scope!

javascript Kopieren

// let und const mit Block Scope
if (true) {
    let blockLet = "Nur im Block";
    const blockConst = "Auch nur im Block";
    var blockVar = "Außerhalb auch verfügbar!";
    
    console.log(blockLet); // Funktioniert
}

console.log(blockLet); // ReferenceError
console.log(blockConst); // ReferenceError
console.log(blockVar); // "Außerhalb auch verfügbar!" - Achtung!

Hoisting mit var

Bei var wird die Deklaration nach oben gehoben und mit undefined initialisiert.

javascript Kopieren

// Was du schreibst:
console.log(myVar); // undefined (kein Fehler!)
var myVar = "Hallo";

// Was JavaScript daraus macht:
var myVar; // Deklaration wird nach oben gehoben
console.log(myVar); // undefined
myVar = "Hallo"; // Zuweisung bleibt hier

Hoisting mit let und const

Bei let und const werden die Variablen auch gehoben, aber sie befinden sich in der "Temporal Dead Zone" und können nicht verwendet werden, bevor sie deklariert wurden.

javascript Kopieren

// Das verursacht einen Fehler:
console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = "Hallo";

console.log(myConst); // ReferenceError: Cannot access 'myConst' before initialization
const myConst = "Hallo";

Konstanten in UPPER_CASE

Konstanten, die sich wirklich nie ändern (z.B. Konfigurationswerte), schreibst du oft in UPPER_CASE mit Unterstrichen:

javascript Kopieren

const MAX_USERS = 100;
const API_KEY = "abc123xyz";
const DEFAULT_COLOR = "#333333";

// Aber normale const-Variablen bleiben in camelCase:
const userName = "Anna-Maria";
const currentDate = new Date();

Beschreibende Namen

Wähle Namen, die beschreiben, was die Variable enthält. Andere Entwickler (und dein zukünftiges Ich) werden es dir danken!

let d = new Date();
let temp = users.filter(u => u.age > 18);

let currentDate = new Date();
let adultUsers = users.filter(user => user.age > 18);

1. const als Standard, let wenn nötig

Verwende standardmäßig const. Nur wenn du weißt, dass sich der Wert ändern muss, verwende let. Das verhindert versehentliche Neuzuweisungen.

// Gut: const für Werte, die sich nicht ändern
const siteName = "DevPanicZone";
const MAX_ATTEMPTS = 3;

// Gut: let für Werte, die sich ändern
let currentAttempt = 0;
currentAttempt++;

// Nicht optimal: let obwohl const reichen würde
let userName = "Anna-Maria"; 
// Wenn sich das nie ändert, nutze const

2. Deklariere Variablen am Anfang

Deklariere alle Variablen am Anfang ihres Scopes. Das macht den Code übersichtlicher und vermeidet Hoisting-Probleme.

function processUser() {
    // Alle Variablen am Anfang
    const userName = "Anna-Maria";
    let userAge = 25;
    let isValid = false;
    
    // Dann die Logik
    if (userAge >= 18) {
        isValid = true;
    }
    
    return isValid;
}

3. Vermeide var komplett

Es gibt keinen Grund mehr, var zu verwenden. let und const sind in jeder Hinsicht besser.

var count = 0;

let count = 0;

4. Ein Konzept, eine Variable

Verwende nicht dieselbe Variable für verschiedene Zwecke. Erstelle lieber neue Variablen mit aussagekräftigen Namen.

// Verwirrend: Variable wird für verschiedene Dinge benutzt
let data = fetchUsers();
data = data.filter(u => u.active);
data = data.map(u => u.name);

// Klar: Jede Variable hat einen eigenen Zweck
const allUsers = fetchUsers();
const activeUsers = allUsers.filter(user => user.active);
const userNames = activeUsers.map(user => user.name);

5. Vermeide globale Variablen

Globale Variablen können von überall im Code geändert werden, was zu schwer zu findenden Bugs führt. Halte deinen Scope so klein wie möglich.

// Globale Variable - kann überall geändert werden
let counter = 0;

function increment() {
    counter++;
}

// Gekapselt - kontrollierter Zugriff
function createCounter() {
    let counter = 0;
    
    return {
        increment() {
            counter++;
            return counter;
        }
    };
}

1. Variable nicht deklariert

Wenn du eine Variable verwendest, ohne sie zu deklarieren, wird sie automatisch global - das kann zu schwer zu findenden Bugs führen.

// Immer deklarieren
function goodExample() {
    const userName = "Anna-Maria";
}

function badExample() {
    // Keine Deklaration - wird global!
    userName = "Anna-Maria"; // Im strict mode ein Fehler
}

2. const mit einem Objekt verwechseln

Ein häufiger Anfängerfehler: const macht die Referenz konstant, nicht den Inhalt!

const user = { name: "Anna-Maria" };

// Eigenschaft ändern
user.name = "Anna";
user.age = 25;

// Das funktioniert NICHT - neue Referenz zuweisen
user = { name: "Anna" }; // TypeError

// Gleiches gilt für Arrays:
const numbers = [1, 2, 3];
numbers.push(4); // Funktioniert
numbers = [5, 6]; // TypeError

3. Scope-Verwirrung mit var

Ein klassisches Problem mit var in Schleifen:

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // Gibt dreimal "3" aus - nicht 0, 1, 2!
    }, 100);
}

// Lösung: Block Scope
for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // Gibt 0, 1, 2 aus - wie erwartet!
    }, 100);
}

4. Variable nicht initialisiert

Wenn du let ohne Wert deklarierst, ist die Variable undefined. Bei const MUSST du sofort einen Wert zuweisen.

// ist undefined
let userName;
console.log(userName); // undefined
userName = "Anna-Maria"; // Später zuweisen ist OK

// SyntaxError: Missing initializer in const declaration
const siteName;

// Der Wert MUSS sofort zugewiesen werden
const siteName = "DevPanicZone";

Demo 1: const vs let

Teste selbst den Unterschied zwischen const und let:

Open JavaScript Demo 1

JavaScript Kopieren

// Demo 1: const vs let
document.getElementById('demoConstBtn').addEventListener('click', function() {
    const output = document.getElementById('demoOutput1');
    try {
        const CONSTANT_VALUE = "Ich bin konstant!";
        CONSTANT_VALUE = "Versuch mich zu ändern!"; // Das gibt einen Fehler
    } catch(error) {
        output.innerHTML = `
            <p class="error-message"><strong>❌ Fehler mit const:</strong></p>
            <p>${error.message}</p>
            <p>const-Variablen können nicht neu zugewiesen werden!</p>
        `;
    }
});

document.getElementById('demoLetBtn').addEventListener('click', function() {
    const output = document.getElementById('demoOutput1');
    let mutableValue = "Ich bin veränderbar!";
    mutableValue = "Ich wurde geändert!";
    output.innerHTML = `
        <p class="success-message"><strong>✅ Erfolg mit let:</strong></p>
        <p>Alter Wert: "Ich bin veränderbar!"</p>
        <p>Neuer Wert: "${mutableValue}"</p>
        <p>let-Variablen können neu zugewiesen werden!</p>
    `;
});

document.getElementById('demoResetBtn').addEventListener('click', function() {
    document.getElementById('demoOutput1').innerHTML = '<p>Klicke auf die Buttons, um zu sehen, was passiert...</p>';
});

Demo 2: Block Scope

Sieh dir an, wie Block Scope mit let und const funktioniert:

Open JavaScript Demo 2

JavaScript Kopieren

// Demo 2: Block Scope
document.getElementById('scopeTestBtn').addEventListener('click', function() {
    const output = document.getElementById('demoOutput2');
    let results = [];
    
    // Globale Variable
    const globalVar = "Ich bin global";
    
    // Block Scope Test
    if (true) {
        const blockVar = "Ich bin im Block";
        let blockLet = "Ich auch!";
        results.push(`Innerhalb des Blocks:<br>globalVar = "${globalVar}"<br>blockVar = "${blockVar}"<br>blockLet = "${blockLet}"`);
    }
    
    // Außerhalb des Blocks
    results.push(`Außerhalb des Blocks:<br>globalVar = "${globalVar}"`);
    
    try {
        console.log(blockVar); // Das gibt einen Fehler
    } catch(error) {
        results.push(`<span class="error-message">blockVar ist außerhalb nicht verfügbar! (ReferenceError)</span>`);
    }
    
    output.innerHTML = results.join('<br><br>');
});

Demo 3: Variable Counter

Ein einfacher Counter mit let:

Open JavaScript Demo 3

JavaScript Kopieren

// Demo 3: Counter
let counter = 0;

document.getElementById('incrementBtn').addEventListener('click', function() {
    counter++;
    document.getElementById('counterValue').textContent = counter;
});

document.getElementById('decrementBtn').addEventListener('click', function() {
    counter--;
    document.getElementById('counterValue').textContent = counter;
});

document.getElementById('resetCounterBtn').addEventListener('click', function() {
    counter = 0;
    document.getElementById('counterValue').textContent = counter;
});