JavaScript Variables

Variables sind Container für Daten. Sie speichern Werte die du später verwenden kannst.

Was sind Variables?

Stell dir Variables wie beschriftete Boxen vor:

Variable = Box mit Label

let name = 'Max';
//  ^      ^
//  |      └── Wert (Inhalt der Box)
//  └─────────Name (Label auf der Box)

console.log(name);  // Max

Die 3 Arten: let, const, var

Modern: let und const (ES6, 2015) Alt: var (veraltet, nicht mehr nutzen!)

let - Veränderbare Variable

let - Kann geändert werden

let alter = 25;
console.log(alter);  // 25

alter = 26;  // Neuer Wert
console.log(alter);  // 26

// Variable erneut deklarieren: FEHLER!
let alter = 30;  // ❌ SyntaxError

Wann nutzen?

✅ Wenn Wert sich ändert
✅ Counter, Schleifen
✅ Formular-Daten

const - Konstante (unveränderbar)

const - Kann NICHT geändert werden

const pi = 3.14159;
console.log(pi);  // 3.14159

pi = 3.14;  // ❌ TypeError: Assignment to constant

// Muss sofort initialisiert werden
const x;  // ❌ SyntaxError
const x = 10;  // ✅ OK

Wann nutzen?

✅ Wenn Wert sich NICHT ändert
✅ Standard-Wahl!
✅ Konfiguration, Funktionen, Arrays/Objects

Wichtig bei Arrays/Objects:

const bei Arrays/Objects

// Array mit const
const zahlen = [1, 2, 3];
zahlen.push(4);  // ✅ OK! Inhalt änderbar
console.log(zahlen);  // [1, 2, 3, 4]

zahlen = [5, 6];  // ❌ TypeError: Assignment to constant
// Variable kann nicht neu zugewiesen werden!

// Object mit const
const person = { name: 'Max' };
person.name = 'Anna';  // ✅ OK! Property änderbar
person.alter = 25;     // ✅ OK! Property hinzufügen

person = { name: 'Tom' };  // ❌ TypeError
// Variable kann nicht neu zugewiesen werden!

Merke: const verhindert Neu-Zuweisung, nicht Mutation!

📝 Quiz

Was passiert bei diesem Code? const zahlen = [1, 2]; zahlen.push(3);

Error - const kann nicht geändert werdenEs funktioniert - Inhalt von const Arrays ist änderbarEs funktioniert - const wird automatisch zu letundefined

var - Veraltet (nicht nutzen!)

var - ALT, nicht mehr nutzen

var name = 'Max';
name = 'Anna';  // Kann geändert werden

// Probleme mit var:
var x = 1;
var x = 2;  // ✅ Erlaubt (aber verwirrend!)

// Function Scope statt Block Scope
if (true) {
    var y = 10;
}
console.log(y);  // 10 (außerhalb verfügbar!)

// ❌ Nutze var NICHT mehr!
// ✅ Nutze let oder const

Warum nicht var?

❌ Kann mehrfach deklariert werden (verwirrend)
❌ Function Scope statt Block Scope
❌ Hoisting-Probleme
❌ Veraltet seit ES6 (2015)

let vs. const - Wann was?

Entscheidungshilfe

// const als Standard (Default)
const name = 'Max';
const alter = 25;
const istStudent = true;

// let nur wenn Wert sich ändert
let count = 0;
count++;  // Muss sich ändern

let userInput;  // Wird später gesetzt
userInput = prompt('Name:');

// Faustregel: Immer const, nur let wenn nötig!

Best Practice:

Default: const (immer zuerst versuchen)
Falls Fehler: Zu let wechseln
Niemals var (veraltet)

📝 Quiz

Wann solltest du var nutzen?

Für alle Variablen die sich ändernFür globale VariablenNiemals - var ist veraltetFür wichtige Variablen

Variablen-Namen (Naming Conventions)

Regeln:

Erlaubte Namen

// ✅ Erlaubt
let name = 'Max';
let userName = 'max123';
let user_name = 'max';
let firstName = 'Max';
let _temp = 10;
let $price = 99;

// ❌ NICHT erlaubt
let 123name = 'Max';  // Darf nicht mit Zahl starten
let user-name = 'Max';  // Kein Bindestrich
let let = 10;  // Kein Keyword
let class = 'A';  // Kein reserved word

Konventionen (Best Practices):

camelCase verwenden

// ✅ RICHTIG: camelCase
let userName = 'Max';
let userAge = 25;
let isStudent = true;
let maxValue = 100;

// ❌ Vermeide
let username = 'Max';  // Schwer lesbar bei langen Namen
let user_name = 'Max';  // snake_case (eher Python)
let UserName = 'Max';  // PascalCase (für Klassen)

Gute Namen:

Aussagekräftige Namen

// ❌ SCHLECHT: Kryptisch
let x = 25;
let temp = 'Max';
let data = [1, 2, 3];

// ✅ GUT: Selbsterklärend
let userAge = 25;
let userName = 'Max';
let productPrices = [1, 2, 3];

// ❌ SCHLECHT: Zu lang
let theCurrentUserNameFromTheDatabase = 'Max';

// ✅ GUT: Präzise aber kurz
let userName = 'Max';

📝 Quiz

Welcher Variablen-Name ist ungültig in JavaScript?

userNameuser_name_userNameuser-name

Scope - Gültigkeitsbereich

Wo ist die Variable verfügbar?

Block Scope (let & const)

Block Scope

// Block = { ... }

{
    let x = 10;
    console.log(x);  // 10
}

console.log(x);  // ❌ ReferenceError: x ist nicht definiert
// x existiert nur innerhalb der { }!

// Praktisches Beispiel
if (true) {
    let message = 'Hallo';
    console.log(message);  // Hallo
}
console.log(message);  // ❌ Fehler

Function Scope

function test() {
    let x = 10;
    console.log(x);  // 10
}

test();
console.log(x);  // ❌ Fehler: x nicht verfügbar außerhalb

Global Scope

// Außerhalb aller Funktionen/Blocks
let globalVar = 'Ich bin überall sichtbar';

function test() {
    console.log(globalVar);  // ✅ Funktioniert
}

if (true) {
    console.log(globalVar);  // ✅ Funktioniert
}

console.log(globalVar);  // ✅ Funktioniert

// ⚠️ Zu viele globale Variables vermeiden!

📝 Quiz

Was gibt dieser Code aus? if (true) { let x = 10; } console.log(x);

10undefinedError - x ist nicht definiertnull

Hoisting - Variablen-Hochziehen

JavaScript "hebt" Deklarationen hoch:

Hoisting mit var

console.log(x);  // undefined (nicht Fehler!)
var x = 10;

// Wird intern so behandelt:
var x;  // Deklaration wird hochgezogen
console.log(x);  // undefined
x = 10;  // Zuweisung bleibt wo sie ist

Hoisting mit let/const

console.log(y);  // ❌ ReferenceError
let y = 10;

console.log(z);  // ❌ ReferenceError
const z = 20;

// let/const haben "Temporal Dead Zone"

Merke: Mit let/const keine Hoisting-Probleme!

📝 Quiz

Was gibt console.log(x); var x = 10; aus?

10undefinedErrornull

Variable Re-deklaration

Nochmal deklarieren?

// var: Erlaubt (verwirrend!)
var x = 1;
var x = 2;  // ✅ Funktioniert

// let: NICHT erlaubt
let y = 1;
let y = 2;  // ❌ SyntaxError

// const: NICHT erlaubt
const z = 1;
const z = 2;  // ❌ SyntaxError

// ✅ ABER: Wert ändern mit let
let y = 1;
y = 2;  // ✅ OK

Template Literals (Template Strings)

Moderne String-Syntax mit Variables:

Template Literals

const name = 'Max';
const alter = 25;

// Alt: String-Konkatenation
console.log('Hallo, ich bin ' + name + ' und ' + alter + ' Jahre alt.');

// Neu: Template Literal (mit ` Backticks)
console.log(`Hallo, ich bin ${name} und ${alter} Jahre alt.`);

// Mehrzeilig
const message = `
    Hallo ${name},
    du bist ${alter} Jahre alt.
    Willkommen!
`;

// Mit Berechnungen
console.log(`In 5 Jahren bin ich ${alter + 5} Jahre alt.`);

Destructuring - Variables aus Arrays/Objects

Destructuring

// Array Destructuring
const zahlen = [1, 2, 3];
const [a, b, c] = zahlen;
console.log(a);  // 1
console.log(b);  // 2

// Object Destructuring
const person = {
    name: 'Max',
    alter: 25,
    stadt: 'Berlin'
};

const { name, alter } = person;
console.log(name);   // Max
console.log(alter);  // 25

📝 Quiz

Was macht const { name } = person;?

Erstellt ein Object mit name PropertyExtrahiert die name Property aus person ObjectKopiert das person ObjectLöscht die name Property

Praktische Beispiele

Beispiel 1: Counter

Zähler

let count = 0;  // Muss sich ändern → let

function increment() {
    count++;
    console.log('Count:', count);
}

function decrement() {
    count--;
    console.log('Count:', count);
}

increment();  // Count: 1
increment();  // Count: 2
decrement();  // Count: 1

Beispiel 2: Konfiguration

Config mit const

// Konfiguration ändert sich nicht → const
const API_URL = 'https://api.example.com';
const MAX_RETRIES = 3;
const TIMEOUT = 5000;

// Nutzen
fetch(API_URL)
    .then(...)
    .catch(...);

Beispiel 3: User-Daten

User-Object

const user = {
    name: 'Max',
    age: 25,
    email: 'max@example.com'
};

// Object-Properties ändern: OK mit const
user.age = 26;
user.city = 'Berlin';

console.log(user);
// { name: 'Max', age: 26, email: '...', city: 'Berlin' }

Best Practices

✅ DO:

const als Standard nutzen
let nur wenn nötig (Wert ändert sich)
Niemals var (veraltet)
camelCase für Namen
Aussagekräftige Namen
Eine Deklaration pro Zeile

Best Practice Beispiel

// ✅ GUT
const userName = 'Max';
const userAge = 25;
let loginCount = 0;

loginCount++;

❌ DON'T:

Nicht var nutzen
Keine kryptischen Namen (x, temp, data)
Keine globalen Variables ohne Grund
Nicht mehrere in einer Zeile (schwer lesbar)

Anti-Patterns

// ❌ SCHLECHT
var x = 1, y = 2, z = 3;
var temp = 'Max';

// ✅ BESSER
const firstName = 'Max';
const lastName = 'Mustermann';
const age = 25;

Häufige Anfängerfehler

Fehler 1: const neu zuweisen

❌ FALSCH:

const pi = 3.14;
pi = 3.14159;  // ❌ TypeError

✅ RICHTIG:

let pi = 3.14;  // let wenn Wert sich ändert
pi = 3.14159;   // ✅ OK

Fehler 2: Variable ohne let/const/var

❌ FALSCH:

name = 'Max';  // Wird global, ohne strict mode

✅ RICHTIG:

const name = 'Max';

Fehler 3: Scope-Probleme

❌ FALSCH:

if (true) {
    let message = 'Hallo';
}
console.log(message);  // ❌ Fehler

✅ RICHTIG:

let message;
if (true) {
    message = 'Hallo';
}
console.log(message);  // ✅ OK

📝 Quiz

Was ist der Hauptunterschied zwischen let und const?

Kein Unterschiedconst kann nicht neu zugewiesen werden, let schonlet ist schnellerconst ist veraltet

TipsAndTricks

⚡

Tipps & Tricks

const als Standard-Wahl

Nutze immer const, außer du musst wirklich neu zuweisen:

// ✅ const für die meisten Fälle
const userName = 'Max';
const API_URL = 'https://api.example.com';
const users = [];  // Array-Inhalt änderbar!

users.push('Max');  // OK mit const!

// ✅ let nur wenn Wert sich ändert
let count = 0;
count++;

// ❌ var niemals nutzen (veraltet)

Destructuring für mehrere Variablen

Extrahiere Werte elegant aus Arrays und Objects:

// Array Destructuring
const [firstName, lastName] = ['Max', 'Müller'];

// Object Destructuring
const user = { name: 'Max', age: 25 };
const { name, age } = user;

// Mit Default Values
const { name, city = 'Berlin' } = user;

// Variablen tauschen
let a = 1, b = 2;
[a, b] = [b, a];  // a=2, b=1

Template Literals für String-Building

Nutze Backticks statt String-Verkettung:

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

// ❌ Alt: Mit +
const text = 'Ich bin ' + name + ' und ' + age + ' Jahre alt';

// ✅ Neu: Template Literal
const text = `Ich bin ${name} und ${age} Jahre alt`;

// Mit Berechnungen
const text = `In 5 Jahren bin ich ${age + 5}`;

Object/Array Shorthand

Spare Code mit ES6 Shorthand:

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

// ❌ Alt: Redundant
const user = {
    name: name,
    age: age
};

// ✅ Neu: Shorthand
const user = { name, age };

// Auch bei Arrays
const arr = [name, age];  // ['Max', 25]

📝 Quiz

Welche Naming Convention nutzt man in JavaScript?

snake_casecamelCasekebab-caseUPPERCASE

Übungsaufgaben

Zeit dein Wissen über Variablen zu testen!

🎯

Aufgabe 1: let vs const

Einfach

Deklariere Variablen richtig: Name und Stadt mit const (ändern sich nicht), Alter mit let (kann sich ändern). Zeige alle in einem <p> Tag an.

HTML

<p id="output"></p>

<script>
  // Deklariere hier die Variablen
  // name (const) = 'Max'
  // alter (let) = 25
  // stadt (const) = 'Berlin'


  // Zeige sie im <p> Tag an
  document.getElementById('output').innerHTML =
    'Name: ' + name + '<br>' +
    'Alter: ' + alter + '<br>' +
    'Stadt: ' + stadt;
</script>

<p id="output"></p>

<script>
  // Deklariere hier die Variablen
  // name (const) = 'Max'
  // alter (let) = 25
  // stadt (const) = 'Berlin'


  // Zeige sie im <p> Tag an
  document.getElementById('output').innerHTML =
    'Name: ' + name + '<br>' +
    'Alter: ' + alter + '<br>' +
    'Stadt: ' + stadt;
</script>

Live-Vorschau

🎯

Aufgabe 2: Template Literal

Einfach

Nutze ein Template Literal (Backticks) um einen Satz zu erstellen: 'Ich bin Max, 25 Jahre alt und wohne in Berlin.'

HTML

<p id="output"></p>

<script>
  const name = 'Max';
  const alter = 25;
  const stadt = 'Berlin';

  // Nutze Template Literal (mit Backticks ``)
  const satz = // Dein Code hier

  document.getElementById('output').textContent = satz;
</script>

<p id="output"></p>

<script>
  const name = 'Max';
  const alter = 25;
  const stadt = 'Berlin';

  // Nutze Template Literal (mit Backticks ``)
  const satz = // Dein Code hier

  document.getElementById('output').textContent = satz;
</script>

Live-Vorschau

🎯

Aufgabe 3: Variable neu zuweisen

Mittel

Erstelle einen Counter der bei 0 startet. Bei Klick auf + soll er um 1 erhöht werden (Hint: Nutze let, nicht const!).

HTML

<h2 id="count">0</h2>
<button onclick="increment()">+ Erhöhen</button>

<script>
  const count = 0; // ❌ Falsch! const kann nicht geändert werden

  function increment() {
    count++; // Fehler!
    document.getElementById('count').textContent = count;
  }
</script>

<h2 id="count">0</h2>
<button onclick="increment()">+ Erhöhen</button>

<script>
  const count = 0; // ❌ Falsch! const kann nicht geändert werden

  function increment() {
    count++; // Fehler!
    document.getElementById('count').textContent = count;
  }
</script>

Live-Vorschau

Nächste Schritte

Du kennst jetzt:

✅ let, const, var
✅ Unterschiede & wann was
✅ Scope (Block, Function, Global)
✅ Naming Conventions (camelCase)
✅ Template Literals
✅ Best Practices

Als Nächstes lernst du:

Datentypen im Detail (String, Number, Boolean, etc.)
Operatoren (+, -, *, /, ==, ===)
Type Conversion & Coercion

Weiter so! 🚀

JavaScript Variables - let, const, var

JavaScript Variables

Was sind Variables?

Die 3 Arten: let, const, var

let - Veränderbare Variable

const - Konstante (unveränderbar)

📝 Quiz

var - Veraltet (nicht nutzen!)

let vs. const - Wann was?

📝 Quiz

Variablen-Namen (Naming Conventions)

📝 Quiz

Scope - Gültigkeitsbereich

Block Scope (let & const)

Function Scope

Global Scope

📝 Quiz

Hoisting - Variablen-Hochziehen

📝 Quiz

Variable Re-deklaration

Template Literals (Template Strings)

Destructuring - Variables aus Arrays/Objects

📝 Quiz

Praktische Beispiele

Beispiel 1: Counter

Beispiel 2: Konfiguration

Beispiel 3: User-Daten

Best Practices

✅ DO:

❌ DON'T:

Häufige Anfängerfehler

Fehler 1: const neu zuweisen

Fehler 2: Variable ohne let/const/var

Fehler 3: Scope-Probleme

📝 Quiz

TipsAndTricks

Tipps & Tricks

const als Standard-Wahl

Destructuring für mehrere Variablen

Template Literals für String-Building

Object/Array Shorthand

📝 Quiz

Übungsaufgaben

Aufgabe 1: let vs const

Aufgabe 2: Template Literal

Aufgabe 3: Variable neu zuweisen

Nächste Schritte

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

JavaScript Functions - Funktionen erklärt

JavaScript Grundlagen: Deine erste Programmierung

JavaScript Arrays - Listen & Array Methods