Variablen und Datentypen — JavaScript

Was ist das und wozu dient es?

Stell dir vor, dein Computer ist ein riesiger Schreibtisch. Darauf liegen Lehrbücher, Hefte, Stifte und natürlich dein Smartphone. Um eine bestimmte Sache schnell zu finden, legst du jedes an seinen Platz. In der Programmierung ist es genauso: Wenn ein Programm läuft, muss es irgendwo Zahlen, Wörter und andere Daten speichern. Dafür gibt es Variablen.

Eine Variable ist wie eine Kiste mit einem Aufkleber. Auf den Aufkleber schreibst du einen Namen (z.B. "meinAlter"), und hinein legst du einen Wert (z.B. 12). Wenn du diesen Wert brauchst, sagst du einfach: "Gib mir das, was in der Kiste mit dem Namen meinAlter ist".

Ein Datentyp ist eine Regel, was genau in die Kiste gelegt werden darf. In eine Kiste darfst du nur Zahlen legen, in eine andere nur Text, in eine dritte nur wahre oder falsche Aussagen (ja/nein). Wenn du versuchst, Text in die Kiste für Zahlen zu legen, wird der Computer verwirrt. Daher ist es wichtig zu wissen, welche Typen es gibt und wie man sie richtig verwendet.

In JavaScript (JS) funktionieren Datentypen fast wie in Python, aber es gibt wichtige Unterschiede. Zum Beispiel schreibst du in Python age = 12, und Python errät selbst, dass 12 eine Zahl ist. In JavaScript ist es dasselbe, aber es gibt Nuancen: JS ist manchmal zu "ratfreudig" und könnte etwas anderes tun, als du erwartest. Deshalb werden wir lernen, explizit anzugeben, was wir wollen.

Wozu ist das nötig? Stell dir vor, du schreibst ein Taschenrechner-Programm. Wenn du die Typen verwechselst und die Zahl 5 mit dem Text "5" addierst, erhältst du nicht 10, sondern "55" (fünf Fünfer hintereinander). Der Computer macht, was du gesagt hast, nicht, was du dachtest. Daher ist das Wissen über Datentypen eine Superkraft, die hilft, dumme Fehler zu vermeiden.

Codebeispiele mit Erklärung

Lass uns direkt zur Praxis übergehen. Öffne einen beliebigen Code-Editor (z.B. den in den Browser integrierten, indem du F12 drückst und zum Tab Console gehst) oder verwende einen Online-Editor wie CodePen oder JSFiddle. Schreibe den Code und schau, was passiert.

Beispiel 1: Variablen mit Zahlen erstellen

// Erstelle eine Variable mit dem Namen "myAge" und lege die Zahl 12 hinein
let myAge = 12;

// Erstelle eine Variable "pi" und lege die Dezimalzahl 3.14 hinein
let pi = 3.14;

// Erstelle eine Variable "negativeNumber" und lege die negative Zahl -5 hinein
let negativeNumber = -5;

// Gib die Werte auf dem Bildschirm aus
console.log("Mein Alter:", myAge);   // Gibt aus: Mein Alter: 12
console.log("Die Zahl Pi:", pi);         // Gibt aus: Die Zahl Pi: 3.14
console.log("Negative Zahl:", negativeNumber); // Gibt aus: Negative Zahl: -5

// Jetzt versuchen wir, zwei Zahlen zu addieren
let sum = myAge + pi;  // 12 + 3.14 = 15.14
console.log("Summe von Alter und Pi:", sum); // Gibt aus: Summe von Alter und Pi: 15.14

// Beachte: In JavaScript wird der Dezimalteil mit einem Punkt getrennt, nicht mit einem Komma!
// Wenn du 3,14 schreibst, ist das ein Fehler, weil das Komma eine andere Bedeutung hat.

Erklärung: Wir haben das Schlüsselwort let verwendet. Es sagt JavaScript: "Erstelle eine neue Kiste". Danach haben wir den Variablennamen (myAge), ein Gleichheitszeichen (=) und den Wert (12) geschrieben. Das Gleichheitszeichen bedeutet hier nicht "gleich" im mathematischen Sinne. Es bedeutet "lege in die Kiste". In Python würdest du dasselbe schreiben: my_age = 12. Der Unterschied besteht nur darin, dass in JavaScript camelCase üblich ist (erstes Wort klein, jedes folgende groß), während in Python snake_case (Wörter durch Unterstrich getrennt) verwendet wird.

Beispiel 2: Textzeichenfolgen (String)

// Ein String ist ein beliebiger Text. Er muss in Anführungszeichen gesetzt werden.
let myName = "Anna";      // Doppelte Anführungszeichen
let myCity = 'Moskau';    // Einfache Anführungszeichen – funktioniert auch!
let myHobby = `Malen`; // Backticks – moderne Methode

// Gib die Strings aus
console.log("Ich heiße:", myName);          // Gibt aus: Ich heiße: Anna
console.log("Ich wohne in der Stadt:", myCity);     // Gibt aus: Ich wohne in der Stadt: Moskau
console.log("Mein Hobby:", myHobby);          // Gibt aus: Mein Hobby: Malen

// Strings können verkettet werden (Konkatenation)
let greeting = "Hallo, " + myName + "! Du wohnst in " + myCity + ".";
console.log(greeting); // Gibt aus: Hallo, Anna! Du wohnst in Moskau.

// Man kann Variablen auch direkt in einen String einfügen, indem man Backticks verwendet
let greetingModern = `Hallo, ${myName}! Du wohnst in ${myCity}.`;
console.log(greetingModern); // Gibt dasselbe aus: Hallo, Anna! Du wohnst in Moskau.

// Beachte: ${...} ist eine spezielle Syntax, die nur in Backticks funktioniert.
// Das ist sehr praktisch, man muss nicht ständig Pluszeichen setzen!

Erklärung: In Python können Strings auch mit einfachen oder doppelten Anführungszeichen erstellt werden. Aber in JavaScript gibt es eine zusätzliche Art – die Backticks (`` ` ``). Sie erlauben es, Variablen direkt mit ${} in den Text einzufügen. Das nennt man Template Strings (Schablonen-Strings). In Python verwendet man dafür f-Strings: f"Hallo, {my_name}!". Das Prinzip ist dasselbe, nur die Syntax ist anders.

Beispiel 3: Boolescher Typ (Boolean) – Wahr oder Falsch

// Der boolesche Typ kann nur zwei Werte annehmen: true (wahr) oder false (falsch)
let isStudent = true;      // Ich bin Schüler – das ist wahr
let hasPets = false;       // Ich habe keine Haustiere – das ist falsch

console.log("Bin ich Schüler?", isStudent);  // Gibt aus: Bin ich Schüler? true
console.log("Habe ich Haustiere?", hasPets); // Gibt aus: Habe ich Haustiere? false

// Boolesche Werte entstehen oft durch Vergleiche
let myAge = 12;
let drivingAge = 18;

let canDrive = myAge >= drivingAge;  // 12 >= 18? Das ist falsch!
console.log("Darf ich Auto fahren?", canDrive); // Gibt aus: Darf ich Auto fahren? false

// Weitere Beispiele für Vergleiche:
let number1 = 10;
let number2 = 20;

console.log("Ist 10 größer als 20?", number1 > number2); // Gibt aus: Ist 10 größer als 20? false
console.log("Ist 10 kleiner als 20?", number1 < number2); // Gibt aus: Ist 10 kleiner als 20? true
console.log("Ist 10 gleich 20?", number1 === number2); // Gibt aus: Ist 10 gleich 20? false

// === prüft, ob zwei Werte gleich sind (Wert und Typ)
// == prüft auch, aber wandelt vorher die Typen um (das kann zu unerwarteten Ergebnissen führen)
console.log("Ist 5 gleich '5'?", 5 === "5"); // Gibt aus: Ist 5 gleich '5'? false (Zahl vs. Text)
console.log("Ist 5 gleich '5' mit ==?", 5 == "5"); // Gibt aus: Ist 5 gleich '5' mit ==? true (weil JS den Text in Zahl umwandelt)

Erklärung: Der boolesche Datentyp ist sehr nützlich für Bedingungen (z.B. "Wenn der Benutzer eingeloggt ist, zeige die Seite an"). In Python schreibst du is_student = True (mit großem T). In JavaScript schreibst du isStudent = true (mit kleinem t). Achte auch auf den Unterschied zwischen === und ==: === prüft strikt (Wert UND Typ müssen gleich sein), während == die Typen umwandelt, bevor es vergleicht. Es ist sicherer, === zu verwenden, um Überraschungen zu vermeiden.

Beispiel 4: Besondere Werte – null und undefined

// null bedeutet: "Es gibt hier absichtlich keinen Wert"
let emptyBox = null;
console.log("Leere Kiste:", emptyBox); // Gibt aus: Leere Kiste: null

// undefined bedeutet: "Der Wert wurde noch nicht zugewiesen"
let notAssigned;
console.log("Nicht zugewiesen:", notAssigned); // Gibt aus: Nicht zugewiesen: undefined

// Der Unterschied: null setzt du selbst, wenn du sagen willst "hier ist nichts".
// undefined bekommst du automatisch, wenn du eine Variable erstellst, ihr aber keinen Wert gibst.

// Beispiel:
let myVariable;
console.log("Vor der Zuweisung:", myVariable); // undefined
myVariable = "Jetzt habe ich einen Wert!";
console.log("Nach der Zuweisung:", myVariable); // "Jetzt habe ich einen Wert!"

Erklärung: null und undefined sind zwei besondere Werte in JavaScript. null setzt du selbst, um zu sagen: "Diese Variable hat absichtlich keinen Wert". undefined bedeutet: "Der Wert wurde noch nicht festgelegt". In Python gibt es None für beides. Wenn du in Python my_variable = None schreibst, ist das ähnlich wie let myVariable = null in JavaScript. Aber in Python gibt es kein direktes Äquivalent zu undefined – wenn du eine Variable ohne Wert erstellst, bekommst du einen Fehler.

Wichtige Unterschiede zwischen JavaScript und Python

Zusammenfassung

Heute haben wir gelernt:

• Variablen sind wie Kisten mit Namen, in denen wir Daten speichern.
• Datentypen sagen dem Computer, welche Art von Daten in der Variable liegt: Zahl, Text, Wahr/Falsch usw.
• In JavaScript gibt es Zahlen (Number), Strings (Text), Booleans (true/false), null und undefined.
• JavaScript und Python sind sich sehr ähnlich, aber es gibt kleine Unterschiede in der Schreibweise (camelCase vs. snake_case, true vs. True, console.log vs. print).
• Die strikte Gleichheit === in JavaScript ist sicherer als ==, weil sie keine unerwarteten Typumwandlungen vornimmt.

Im nächsten Artikel werden wir uns ansehen, wie man mit Bedingungen (if/else) und Schleifen (for/while) arbeitet – das sind die nächsten wichtigen Bausteine, um Programme zu schreiben, die intelligent Entscheidungen treffen können!