Variablen

Geschätzte Lektüre: 8 Minuten 602 Ansichten

Variablen bilden eines der fundamentalsten Konzepte in JavaScript und der Programmierung im Allgemeinen. Sie dienen als Behälter für Daten und ermöglichen es uns, Informationen zu speichern, zu verändern und wiederzuverwenden.

Was ist eine Variable?

Eine Variable können Sie sich wie eine beschriftete Schachtel vorstellen: Die Beschriftung ist der Variablenname, und der Inhalt der Schachtel ist der Wert, den die Variable speichert. Technisch gesehen ist eine Variable ein benannter Speicherplatz im Arbeitsspeicher des Computers, der während der Ausführung eines Programms verwendet wird.

Das Besondere an JavaScript-Variablen ist ihre dynamische Typisierung. Das bedeutet, dass eine Variable zu unterschiedlichen Zeitpunkten Werte verschiedener Datentypen halten kann – im Gegensatz zu statisch typisierten Sprachen wie Java oder C#.

Deklaration von Variablen

In JavaScript gibt es drei Schlüsselwörter zur Variablendeklaration:

var Die traditionelle Deklaration

var alter = 30;

var war bis ES6 (ECMAScript 2015) die einzige Möglichkeit, Variablen zu deklarieren. Variablen mit var haben einen Funktions-Scope (nicht Block-Scope) und unterliegen dem sogenannten „Hoisting“.

Beispiel für Hoisting:

console.log(name); // undefined, nicht ReferenceError
var name = "Max";

let Die moderne Block-Scope Variable

let counter = 0;

Eingeführt mit ES6, bietet let Block-Scoping und ist damit vorhersagbarer als var Es wird heute in den meisten Fällen bevorzugt.

const Konstanten

const PI = 3.14159;

Auch mit ES6 eingeführt, erzeugt const eine unveränderliche Bindung an einen Wert. Der Wert selbst kann bei Objekten und Arrays allerdings verändert werden (nur die Referenz ist konstant).

Gültigkeitsbereiche (Scope) von Variablen

Der Scope definiert, wo im Code eine Variable zugänglich ist.

Globaler Scope
Variablen, die außerhalb aller Funktionen oder Blöcke deklariert werden, sind global verfügbar:

let globalVar = "Ich bin überall verfügbar";

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

Funktions-Scope (bei var )

function test() {
  var functionScoped = "Nur hier verfügbar";
}
console.log(functionScoped); // ReferenceError

Block-Scope (bei let und const )

if (true) {
  let blockScoped = "Nur in diesem Block";
}
console.log(blockScoped); // ReferenceError

Datentypen in Variablen

JavaScript ist dynamisch typisiert, aber die Werte selbst haben Typen:

Primitive Datentypen

String: Textwerte

let name = "Anna";

Number: Zahlen (Ganzzahlen und Fließkommazahlen)

let age = 25;
let price = 19.99;

Boolean: Wahrheitswerte

let isActive = true;

undefined: Nicht initialisierte Variable

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

null: Bewusste Abwesenheit eines Wertes

let empty = null;

Symbol (ES6): Eindeutiger Identifier

let sym = Symbol('description');

BigInt: Sehr große ganze Zahlen

let big = 9007199254740991n;

Objekt-Datentyp

let person = {
  name: "Max",
  age: 30
};

Variablen-Namenskonventionen

Gute Variablennamen sind entscheidend für lesbaren Code:
• Verwenden Sie camelCase: userName nicht username oder user_name
• Namen sollten beschreibend sein: shoppingCart statt sc oder x
• Konstanten oft in UPPER_CASE: MAX_USERS
• Vermeiden Sie reservierte Schlüsselwörter wie class, function etc.
• Beginnt mit Buchstaben, _ oder $ nicht mit Zahlen

Typisches Verhalten von Variablen

Dynamische Typisierung

let dynamic = "Text"; // String
dynamic = 42; // Jetzt Number
dynamic = true; // Jetzt Boolean

Variablen ohne Wert

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

Variablen kopieren
Bei primitiven Typen wird der Wert kopiert:

let a = 5;
let b = a; // b erhält eine Kopie des Wertes
a = 10;
console.log(b); // 5

Bei Objekten wird die Referenz kopiert:

let obj1 = { value: 10 };
let obj2 = obj1; // Beide zeigen auf dasselbe Objekt
obj1.value = 20;
console.log(obj2.value); // 20

Fortgeschrittene Konzepte

Temporale Dead Zone (bei let und const )

console.log(x); // ReferenceError
let x = 5;

Im Gegensatz zu var können let und const nicht vor ihrer Deklaration verwendet werden.

Closures und Variablen

Variablen in äußeren Funktionen bleiben für innere Funktionen zugänglich:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

Destrukturierende Zuweisung (ES6)

let [a, b] = [1, 2]; // a=1, b=2
let {name, age} = {name: "Max", age: 30};

Best Practices für Variablen

• Bevorzugen Sie const für Werte, die sich nicht ändern sollen
• Verwenden Sie let für Variablen, die sich ändern müssen
• Vermeiden Sie var in modernem Code
• Deklarieren Sie Variablen möglichst nahe an ihrer Verwendung
• Initialisieren Sie Variablen bei der Deklaration, wenn möglich
• Vermeiden Sie globale Variablen, wo es geht
• Verwenden Sie aussagekräftige Namen

Praxisbeispiel: Einkaufswagen

// Produkte als Array von Objekten
const products = [
  { id: 1, name: "Laptop", price: 999 },
  { id: 2, name: "Phone", price: 699 },
  { id: 3, name: "Tablet", price: 499 }
];

// Warenkorb initialisieren
let shoppingCart = [];

// Funktion zum Hinzufügen von Produkten
function addToCart(productId, quantity = 1) {
  const product = products.find(p => p.id === productId);
  if (product) {
    const existingItem = shoppingCart.find(item => item.id === productId);
    if (existingItem) {
      existingItem.quantity += quantity;
    } else {
      shoppingCart.push({ ...product, quantity });
    }
  }
}

// Funktion zur Berechnung des Gesamtpreises
function calculateTotal() {
  return shoppingCart.reduce((total, item) => {
    return total + (item.price * item.quantity);
  }, 0);
}

// Beispielverwendung
addToCart(1); // Laptop hinzufügen
addToCart(2, 2); // Zwei Phones hinzufügen

console.log("Warenkorb:", shoppingCart);
console.log("Gesamtpreis:", calculateTotal());

In diesem Beispiel sehen wir verschiedene Variablen im Einsatz: const für die unveränderliche Produktliste, let für den veränderlichen Warenkorb, Parameter als lokale Variablen in Funktionen, und die Verwendung von Variablen unterschiedlicher Typen (Arrays, Objekte, Zahlen).

Rückgrat jeder JavaScript-Anwendung

Variablen sind das Rückgrat jeder JavaScript-Anwendung. Das Verständnis der Unterschiede zwischen var, let und const, der verschiedenen Gültigkeitsbereiche und der dynamischen Typisierung ist essentiell für die Entwicklung robuster Anwendungen. Moderne JavaScript-Entwicklung bevorzugt const und let und vermeidet var sowie globale Variablen, wo möglich. Durch die bewusste Wahl von Variablentypen und -namen schaffen wir Code, der nicht nur funktioniert, sondern auch wartbar und verständlich ist.

Dieses Dokument teilen

Variablen

Oder Link kopieren

INHALT

Abonnieren

×
Cancel