Variablen und Datentypen

Variablen sind grundlegende Bausteine in jeder Programmiersprache. Sie dienen als Behälter, in denen Informationen gespeichert und später verwendet werden können. In diesem Kapitel lernen wir, wie Variablen in JavaScript deklariert, zugewiesen und verwendet werden, sowie die verschiedenen Datentypen, die JavaScript bietet.

Variablen deklarieren

In JavaScript gibt es drei Möglichkeiten, Variablen zu deklarieren:

1. var (ältere Methode)

var name = "Maria";
var alter = 25;

Früher war var die einzige Möglichkeit, Variablen zu deklarieren. Heute wird es jedoch weniger empfohlen, da es einige Besonderheiten hat, die zu unerwarteten Ergebnissen führen können.

2. let (moderne Methode)

let name = "Jan";
let alter = 30;

Mit let deklarierte Variablen können später im Code einen neuen Wert erhalten:

let punkte = 10;
console.log(punkte); // Ausgabe: 10

punkte = 20;
console.log(punkte); // Ausgabe: 20

3. const (Konstanten)

Wenn Sie einen Wert haben, der sich nicht ändern soll, verwenden Sie const:

const PI = 3.14159;
const GEBURTSJAHR = 1995;

Versucht man den Wert einer Konstante zu ändern, erhält man einen Fehler:

const MAX_PUNKTE = 100;
MAX_PUNKTE = 200; // Fehler: Assignment to constant variable

Variablenbenennung

Bei der Benennung von Variablen gibt es einige Regeln zu beachten:

• Namen können Buchstaben, Ziffern, Unterstriche (_) und Dollarzeichen ($) enthalten
• Namen müssen mit einem Buchstaben, Unterstrich oder Dollarzeichen beginnen (nicht mit einer Ziffer)
• Namen sind case-sensitive (name und Name sind unterschiedliche Variablen)
• Reservierte Wörter (wie let, const, function, etc.) dürfen nicht als Variablennamen verwendet werden

Empfohlene Namenskonventionen

In JavaScript wird üblicherweise die “camelCase”-Schreibweise verwendet:

let ersterName = "Max";
let letzterLoginDatum = "2023-10-15";
let istAngemeldet = true;

Für Konstanten wird oft “UPPERCASE_WITH_UNDERSCORES” verwendet:

const MAX_VERSUCHE = 3;
const API_KEY = "abc123xyz";

JavaScript-Datentypen

JavaScript kennt verschiedene Datentypen, die in zwei Hauptkategorien eingeteilt werden können:

Primitive Datentypen

1. Number (Zahlen)

In JavaScript gibt es nur einen Zahlentyp, der sowohl ganze Zahlen als auch Fliesskommazahlen umfasst:

let ganzeZahl = 42;
let fliesskommazahl = 3.14;
let negativeZahl = -10;
let wissenschaftlicheNotation = 2.5e6; // 2.5 * 10^6 = 2500000

JavaScript hat auch spezielle numerische Werte:

let unendlich = Infinity;
let negativeUnendlich = -Infinity;
let nichtEineZahl = NaN; // Not a Number

2. String (Text)

Strings sind Textdaten, die in einfachen, doppelten oder Backtick-Anführungszeichen eingeschlossen werden:

let einfacheAnfuehrungszeichen = "Hallo Welt";
let doppelteAnfuehrungszeichen = "JavaScript lernen";
let backticks = `Willkommen`;

Mit Backticks können wir auch Variablen in Strings einfügen (Template Literals):

let name = "Alex";
let begruessung = `Hallo, ${name}! Willkommen zurück.`;
console.log(begruessung); // Ausgabe: Hallo, Alex! Willkommen zurück.

3. Boolean (Wahrheitswerte)

Boolean-Werte können nur true oder false sein:

let istRichtig = true;
let istFalsch = false;

let istGroesser = 10 > 5; // true
let istGleich = 10 === 5; // false

4. Undefined

Eine Variable, die deklariert, aber nicht initialisiert wurde, hat den Wert undefined:

let nichtDefiniert;
console.log(nichtDefiniert); // Ausgabe: undefined

5. Null

null repräsentiert eine absichtliche Abwesenheit eines Wertes:

let keinWert = null;

6. Symbol (seit ES6)

Ein einzigartiger und unveränderlicher Wert, oft als Objekt-Eigenschaftsschlüssel verwendet:

let symbol = Symbol("beschreibung");

7. BigInt (seit ES2020)

Für sehr grosse ganze Zahlen:

let grosseZahl = 9007199254740991n; // Das 'n' am Ende macht es zu einem BigInt

Komplexe Datentypen

1. Object (Objekt)

Objekte sind Sammlungen von Schlüssel-Wert-Paaren:

let person = {
  name: "Lisa",
  alter: 28,
  istStudent: false,
};

// Zugriff auf Eigenschaften
console.log(person.name); // Ausgabe: Lisa
console.log(person["alter"]); // Ausgabe: 28

2. Array

Arrays sind geordnete Listen von Werten:

let farben = ["Rot", "Grün", "Blau"];
let gemischtesArray = [1, "Text", true, null, { key: "value" }];

// Zugriff auf Elemente (Index beginnt bei 0)
console.log(farben[0]); // Ausgabe: Rot
console.log(farben[2]); // Ausgabe: Blau

3. Function (Funktion)

Funktionen sind wiederverwendbare Codeblöcke:

function addiere(a, b) {
  return a + b;
}

// Oder als Pfeilfunktion (Arrow Function)
const multipliziere = (a, b) => a * b;

Den Datentyp herausfinden

Mit dem typeof-Operator können Sie den Datentyp einer Variable prüfen:

let zahl = 42;
let text = "Hallo";
let wahr = true;
let nichts = null;
let undefiniert;
let obj = {};
let arr = [];
let func = function () {};

console.log(typeof zahl); // "number"
console.log(typeof text); // "string"
console.log(typeof wahr); // "boolean"
console.log(typeof nichts); // "object" (Das ist ein bekannter Fehler in JavaScript)
console.log(typeof undefiniert); // "undefined"
console.log(typeof obj); // "object"
console.log(typeof arr); // "object" (Arrays sind in JavaScript spezielle Objekte)
console.log(typeof func); // "function"

Typkonvertierung (Type Conversion)

JavaScript führt in bestimmten Situationen automatische Typkonvertierungen durch:

Implizite Typkonvertierung

let ergebnis = "5" + 2; // "52" (Zahl wird in String umgewandelt)
let ergebnis2 = "5" - 2; // 3 (String wird in Zahl umgewandelt)
let ergebnis3 = "5" * "2"; // 10 (Strings werden in Zahlen umgewandelt)
let ergebnis4 = 10 + true; // 11 (true wird zu 1 konvertiert)

Explizite Typkonvertierung

Sie können Datentypen auch explizit konvertieren:

// Zu String konvertieren
String(123); // "123"
(123).toString(); // "123"

// Zu Zahl konvertieren
Number("123"); // 123
parseInt("123"); // 123
parseFloat("3.14"); // 3.14
+"123"; // 123 (unäres Plus)

// Zu Boolean konvertieren
Boolean(1); // true
Boolean(0); // false
Boolean(""); // false
Boolean("text"); // true
!!123; // true (doppelte Negation)

Übung: Arbeiten mit Variablen und Datentypen

Aufgabe: Arbeiten mit Variablen und Datentypen

Üben wir das Gelernte mit einer praktischen Übung:

// 1. Deklarieren Sie Variablen verschiedener Datentypen
let name = "Max Mustermann";
let alter = 30;
let groesse = 1.78;
let istStudent = false;
const GEBURTSJAHR = 1993;
let hobbys = ["Lesen", "Kochen", "Programmieren"];
let adresse = {
  strasse: "Hauptstrasse 1",
  stadt: "Musterstadt",
  plz: "12345",
};

// 2. Geben Sie die Werte und deren Typen aus
console.log("Name:", name, "Typ:", typeof name);
console.log("Alter:", alter, "Typ:", typeof alter);
console.log("Grösse:", groesse, "Typ:", typeof groesse);
console.log("Ist Student:", istStudent, "Typ:", typeof istStudent);
console.log("Geburtsjahr:", GEBURTSJAHR, "Typ:", typeof GEBURTSJAHR);
console.log("Hobbys:", hobbys, "Typ:", typeof hobbys);
console.log("Adresse:", adresse, "Typ:", typeof adresse);

// 3. Erstellen Sie einen String mit Template Literals
let beschreibung = `${name} ist ${alter} Jahre alt, ${groesse}m gross und ${istStudent ? "ist" : "ist kein"} Student.`;
console.log(beschreibung);

// 4. Versuchen Sie, den Wert einer Konstante zu ändern
try {
  GEBURTSJAHR = 1995; // Dies wird einen Fehler verursachen
} catch (error) {
  console.log("Fehler beim Ändern einer Konstante:", error.message);
}

// 5. Führen Sie einige Typkonvertierungen durch
let zahlAlsString = "42";
let zahlAlsZahl = Number(zahlAlsString);
console.log("String zu Zahl:", zahlAlsZahl, typeof zahlAlsZahl);

let zahlZuString = String(alter);
console.log("Zahl zu String:", zahlZuString, typeof zahlZuString);

let wahrheitswertAlsZahl = Number(istStudent);
console.log(
  "Boolean zu Zahl:",
  wahrheitswertAlsZahl,
  typeof wahrheitswertAlsZahl
);

Kopieren Sie diesen Code in die Konsole Ihres Browsers oder in eine JavaScript-Datei und beobachten Sie die Ergebnisse.

Zusammenfassung

• Variablen werden mit let, const oder var deklariert
• JavaScript hat primitive Datentypen (Number, String, Boolean, undefined, null, Symbol, BigInt) und komplexe Datentypen (Object, Array, Function)
• Der typeof-Operator hilft, den Datentyp einer Variable zu bestimmen
• JavaScript führt automatische Typkonvertierungen durch, die manchmal zu unerwarteten Ergebnissen führen können
• Template Literals (${variable}) ermöglichen eine einfache Einbettung von Variablen in Strings

Im nächsten Kapitel lernen wir mehr über Operatoren und Bedingungen in JavaScript, die es uns ermöglichen, mit diesen Datentypen zu arbeiten und Entscheidungen in unserem Code zu treffen.