JavaScript-Variablen erklärt: var vs let vs const, Gültigkeitsbereich und bewährte Vorgehensweisen

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

.

1. Einführung

JavaScript ist eine der am weitesten verbreiteten Programmiersprachen in der Webentwicklung. Besonders in der Front‑End‑Entwicklung ist es unverzichtbar, um interaktive Webseiten zu erstellen. In diesem Kontext spielen Variablen eine entscheidende Rolle beim Verwalten von Daten in Ihren Programmen.

In diesem Artikel erklären wir JavaScript‑Variablen ausführlich – von den Grundlagen bis zu fortgeschritteneren Themen. Konkret lernen Sie, wie man Variablen deklariert, das Konzept von Gültigkeitsbereichen versteht, Namenskonventionen befolgt und häufige Fehler vermeidet, und das alles anhand praktischer Code‑Beispiele.

1.1 Was Sie in diesem Artikel lernen werden

Durch das Lesen dieses Artikels erwerben Sie folgendes Wissen und diese Fähigkeiten.

1. Das Grundkonzept und die Rolle von Variablen in JavaScript verstehen
2. Die Unterschiede zwischen var, let und const kennenlernen und wissen, wie man sie korrekt einsetzt
3. Gültigkeitsbereiche und Lebensdauer effektiv verwalten
4. Variablen mit praktischen Techniken anhand realer Code‑Beispiele anwenden
5. Häufige Fehlerursachen identifizieren und lernen, wie man sie behebt

1.2 Für wen dieser Artikel gedacht ist

• Anfänger, die die Grundlagen von JavaScript erlernen möchten
• Fortgeschrittene Lernende, die bereits Programmiererfahrung haben, aber ein tieferes Verständnis der Unterschiede von Variablen und ihrer Gültigkeitsbereiche suchen
• Jeder, der Coding‑Fehler reduzieren und Programme effizienter entwerfen möchte

Dieser Leitfaden erklärt Konzepte mit Code‑Beispielen, sodass Anfänger nicht stecken bleiben. Er enthält zudem Tipps zur Fehlervermeidung und einen FAQ‑Abschnitt, damit Fortgeschrittene praktisches, angewandtes Wissen erhalten.

Im nächsten Abschnitt werfen wir einen genaueren Blick darauf, was ein „Variable“ überhaupt ist.

2. Was sind Variablen in JavaScript?

In JavaScript ist eine Variable ein benannter Container, der verwendet wird, um Daten vorübergehend zu speichern und bei Bedarf wiederzuverwenden. Der Einsatz von Variablen macht das Datenmanagement innerhalb eines Programms effizienter.

2.1 Welche Rolle hat eine Variable?

In der Programmierung ist eine Variable wie eine „Box“, die Informationen speichert. Indem man Daten in die Box legt und wieder herausnimmt, kann man den Programmzustand verwalten und Berechnungen durchführen.

Zum Beispiel verwendet der folgende Code eine Variable, um eine Nachricht anzuzeigen.

let greeting = "Hello!";
console.log(greeting);

In diesem Code:

• Die Variable greeting speichert die Zeichenkette "Hello!".
• console.log() gibt den Inhalt dieser Variable aus.

So ermöglichen Variablen das dynamische Manipulieren von Daten in Ihrem Programm.

2.2 Wesentliche Merkmale von Variablen in JavaScript

JavaScript‑Variablen besitzen die folgenden Eigenschaften.

1. Dynamische Typisierung

• In JavaScript wird der Typ einer Variable (Zahl, Zeichenkette, Array usw.) automatisch bestimmt. Beim Deklarieren einer Variable muss kein Typ angegeben werden.
• Beispiel:

  let number = 10;         // number
  let text = "Hello!";     // string
  let isTrue = true;       // boolean
  

2. Flexibilität

• Man kann einer Variable Werte unterschiedlicher Typen zuweisen (obwohl dies aus Lesbarkeitsgründen nicht empfohlen wird).
• Beispiel:

  let data = 10;     // number
  data = "string";   // changed to string
  

3. Gültigkeitsbereich (Sichtbarkeit)

• Der nutzbare Bereich einer Variable hängt davon ab, wo sie deklariert wurde (Details folgen später).

3. Neuzuweisung und Neudeklaration

• Ob eine Neuzuweisung oder Neudeklaration erlaubt ist, hängt vom verwendeten Schlüsselwort ab.
• Beispiel:

  var x = 5;
  var x = 10; // redeclaration allowed (not recommended)
  
  let y = 5;
  // let y = 10; // Error (cannot redeclare)
  
  const z = 5;
  // z = 10; // Error (cannot reassign)
  

2.3 Vorteile der Verwendung von Variablen

1. Wiederverwendbarkeit

• Wenn Sie denselben Wert mehrfach benötigen, erleichtert das Speichern in einer Variable die Verwaltung.

1. Einfachere Aktualisierungen

• Durch das Ändern des Variablenwerts werden Änderungen im gesamten Programm wirksam.

1. Verbesserte Lesbarkeit und Wartbarkeit

• Benannte Variablen machen die Absicht klarer und helfen anderen Entwicklern, Ihren Code zu verstehen.

2.4 Ein einfaches Beispiel mit Variablen

Im Folgenden finden Sie ein einfaches Berechnungsprogramm, das Variablen verwendet.

let price = 500;              // item price
let quantity = 3;             // quantity
let total = price * quantity; // calculate total
console.log(`Total is ${total} yen.`);

In diesem Beispiel werden Preis und Menge in Variablen gespeichert, und der Gesamtbetrag wird dynamisch berechnet und angezeigt. So erhöhen Variablen die Flexibilität und Effizienz in Ihren Programmen.

3. Wie man Variablen deklariert und Unterschiede zwischen den Keywords

In JavaScript verwenden Sie drei Keywords, um Variablen zu deklarieren: var, let und const. Das Verständnis ihrer Eigenschaften und wie man zwischen ihnen wählt, hilft Fehler zu vermeiden und die Lesbarkeit zu verbessern.

3.1 Grundlegende Unterschiede zwischen var, let und const

1. var – Die veraltete Deklaration

var wird seit den frühen Versionen von JavaScript verwendet.

Eigenschaften:

• Erlaubt Neudeklaration und Neuzuweisung.
• Hat Funktionsscope (Blockscope wird ignoriert).
• Hoisting verschiebt die Deklaration an den Anfang ihres Scopes.

Beispiel:

var x = 10;
console.log(x); // 10

var x = 20; // redeclaration allowed
console.log(x); // 20

if (true) {
  var y = 30; // ignores block scope
}
console.log(y); // 30

Hinweise:

• Da es den Blockscope ignoriert, kann es zu ungewolltem Verhalten führen.
• Es gilt in modernem JavaScript als veraltet; vermeiden Sie es in neuem Code.

2. let – Die empfohlene Wahl für Neuzuweisung

let wurde in ES6 (2015) eingeführt und wird jetzt weit verbreitet verwendet.

Eigenschaften:

• Kann nicht neu deklariert werden, aber neu zugewiesen.
• Hat Blockscope.
• Hoisting erfolgt, aber die Verwendung vor der Initialisierung verursacht einen Fehler ( Temporal Dead Zone ).

Beispiel:

let a = 10;
console.log(a); // 10

a = 20; // reassignment allowed
console.log(a); // 20

if (true) {
  let b = 30; // valid only inside this block
  console.log(b); // 30
}
// console.log(b); // Error: b is out of scope

Hinweise:

• Verwenden Sie let, wenn Neuzuweisung notwendig ist, aber bevorzugen Sie const, wenn Sie keine Neuzuweisung benötigen.

3. const – Für Konstanten

const wurde ebenfalls in ES6 eingeführt und wird verwendet, um Konstanten zu deklarieren (Werte, die nicht neu zugewiesen werden sollten).

Eigenschaften:

• Kann nicht neu deklariert oder neu zugewiesen werden.
• Hat Blockscope.
• Muss bei der Deklaration initialisiert werden.

Beispiel:

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

// pi = 3.1415; // Error: cannot reassign

if (true) {
  const gravity = 9.8;
  console.log(gravity); // 9.8
}
// console.log(gravity); // Error: out of scope

Hinweise:

• Sie können die Variable selbst nicht neu zuweisen, aber wenn es sich um ein Objekt oder Array handelt, können Sie immer noch seine Eigenschaften/Elemente modifizieren.

Beispiel:

const user = { name: "Alice" };
user.name = "Bob"; // property mutation is allowed
console.log(user.name); // Bob

3.2 Vergleichstabelle: var vs let vs const

3.3 Wie man richtig wählt

1. Verwenden Sie const standardmäßig

• Wenn Sie keine Neuzuweisung benötigen, verwenden Sie const, um die Sicherheit zu erhöhen.

1. Verwenden Sie let nur, wenn Neuzuweisung erforderlich ist

• Verwenden Sie es für Schleifenzähler oder Statusvariablen, die sich im Laufe der Zeit ändern müssen.

1. Vermeiden Sie var

• Sie könnten es in Legacy-Code sehen, aber es wird für moderne Codebasen nicht empfohlen.

3.4 Kurze Nutzungsübersicht

const PI = 3.14;           // constant
let count = 0;             // value that changes
for (let i = 0; i < 5; i++) {
  count += i;
}
console.log(count);        // display total

let userName = "Alice";
console.log(userName); // "Alice"
userName = "Bob";
console.log(userName); // "Bob"

4. Scope und Lebensdauer von Variablen

In JavaScript ist das Verständnis des Scopes einer Variable (wo sie zugänglich ist) und ihrer Lebensdauer (wie lange sie im Speicher existiert) äußerst wichtig. Durch das Beherrschen dieser Konzepte können Sie unerwartete Bugs vermeiden und effizienteren Code schreiben.

4.1 Was ist Scope?

Scope bezieht sich auf den Bereich, in dem eine Variable zugänglich ist. In JavaScript unterscheidet sich der Scope je nachdem, wie die Variable deklariert wird.

1. Globaler Scope

Globaler Scope bedeutet einen Scope, der von überall im Programm aus zugänglich ist.

Beispiel:

var globalVar = "Global variable";

function showGlobalVar() {
  console.log(globalVar); // Accessible
}

showGlobalVar();
console.log(globalVar); // Accessible

Hinweise:
Da globale Variablen von überall aus zugänglich sind, sind sie anfällig für Namenskonflikte und unbeabsichtigte Überschreibungen. Sie sollten sie auf ein Minimum beschränken.

2. Lokaler Scope

Lokaler Scope bezieht sich auf einen Scope, der nur innerhalb einer bestimmten Funktion oder eines Blocks gültig ist.

Beispiel:

function localExample() {
  let localVar = "Local variable";
  console.log(localVar); // Accessible
}

// console.log(localVar); // Error: out of scope

In diesem Beispiel kann die Variable localVar nur innerhalb der Funktion zugänglich sein und kann außerhalb davon nicht referenziert werden.

3. Block-Scope

Variablen, die mit let und const deklariert werden, sind nur innerhalb eines Blocks (dem Abschnitt in {}) gültig.

Beispiel:

{
  let blockVar = "Block scope";
  console.log(blockVar); // Accessible
}
// console.log(blockVar); // Error: out of scope

Wichtig:
Wenn Sie eine Variable mit var deklarieren, wird der Block-Scope ignoriert, also seien Sie vorsichtig.

{
  var blockVar = "Block scope ignored";
}
console.log(blockVar); // Accessible (not recommended)

4.2 Was ist Lebensdauer?

Lebensdauer bezieht sich darauf, wie lange eine Variable im Speicher existiert.

1. Lebensdauer globaler Variablen

• Sie existieren vom Start des Programms bis zu seinem Ende.

1. Lebensdauer lokaler Variablen

• Sie existieren nur vom Aufruf einer Funktion bis zum Ende der Funktion.

Beispiel:

function showMessage() {
  let message = "Temporary message";
  console.log(message);
}

showMessage();
// console.log(message); // Error: message is not accessible after the function ends

In diesem Beispiel wird die Variable message nach dem Ende der Funktion zerstört und kann nicht mehr referenziert werden.

4.3 Was ist die Scope-Kette?

Wenn verschachtelte Scopes gebildet werden (wie z. B. verschachtelte Funktionen), sucht JavaScript nach Variablen mithilfe eines Mechanismus namens Scope-Kette.

Beispiel:

let outerVar = "Outside";

function outerFunction() {
  let innerVar = "Inside";

  function innerFunction() {
    console.log(outerVar); // Accesses outer scope
    console.log(innerVar); // Accesses inner scope
  }

  innerFunction();
}

outerFunction();

In diesem Beispiel sucht innerFunction zuerst in ihrem eigenen Scope nach Variablen, dann im übergeordneten Scope und letztendlich im globalen Scope, falls nötig. Dieser Suchprozess ist die Scope-Kette.

4.4 Closures verstehen

Eine Closure ist eine Funktion, bei der eine innere Funktion weiterhin Zugriff auf Variablen aus einer äußeren Funktion behält.

Beispiel:

function createCounter() {
  let count = 0; // Outer variable

  return function () {
    count++; // Accesses outer variable
    return count;
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

In diesem Beispiel behält die innere Funktion den Zugriff auf die äußere Variable count bei, was es ermöglicht, den Zustand zu erhalten. Closures sind nützlich für Zähler, Konfigurationsmanagement und mehr.

4.5 Wichtige Punkte für den effektiven Einsatz von Scope und Lebensdauer

1. Globale Variablen auf ein Minimum beschränken

• Um Namenskonflikte und unbeabsichtigte Überschreibungen zu vermeiden, verwenden Sie globale Variablen nicht unnötig.

1. Guten Gebrauch vom lokalen Scope machen

• Das Verwalten von Variablen innerhalb von Funktionen oder Blöcken hilft, unerwartete Fehler zu vermeiden.

1. Const bevorzugen

• Wenn Sie keine Neuzuweisung benötigen, verwenden Sie const, um die Sicherheit zu verbessern.

1. Verstehen, wann Closures nützlich sind

• Verwenden Sie Closures proaktiv, wenn Sie Zustandsmanagement oder Funktionskapselung benötigen.

5. Variableninitialisierung und Umgang mit Undefined

In JavaScript ist die ordnungsgemäße Initialisierung von Variablen wichtig. Uninitialisierte Variablen und undefinierte Werte können zu unerwarteten Fehlern führen, daher müssen Sie ihr Verhalten verstehen.

5.1 Was ist Variableninitialisierung?

Initialisierung bedeutet, dem ersten Wert einer Variable nach ihrer Deklaration zuzuweisen.

Beispiel:

let count = 0;  // initialized
let message;    // uninitialized

In diesem Beispiel wird count sicher auf 0 initialisiert. Im Gegensatz dazu hat message keinen zugewiesenen Wert, was später zu unerwartetem Verhalten führen kann.

5.2 Arbeiten mit Undefined

1. Was ist undefined?

undefined ist ein spezieller Wert, der automatisch in den folgenden Fällen zugewiesen wird:

• Uninitialisierte Variablen
• Nicht existierende Objekteigenschaften oder Array-Elemente
• Funktionen, die keinen Wert zurückgeben

Beispiel:

let value; // uninitialized variable
console.log(value); // undefined

let obj = {};
console.log(obj.property); // undefined (property does not exist)

function noReturn() {}
console.log(noReturn()); // undefined (no return value)

Hinweise:

• Da undefined oft unbeabsichtigt auftritt, müssen Sie es in Ihrem Code ordnungsgemäß behandeln.

2. Wie man undefined überprüft

Hier sind sichere Wege, um zu überprüfen, ob eine Variable oder Eigenschaft undefined ist.

Beispiel:

let data;

// Method 1: typeof operator
if (typeof data === "undefined") {
  console.log("The variable is undefined");
}

// Method 2: strict comparison
if (data === undefined) {
  console.log("The variable is undefined");
}

Die Verwendung von typeof ist sicherer, da sie keinen Fehler auslöst, selbst wenn die Variable nie deklariert wurde.

5.3 Arbeiten mit null

1. Was ist null?

null stellt einen „absichtlich leeren“ Wert dar. Im Gegensatz zu undefined wird es manuell vom Entwickler gesetzt.

Beispiel:

let value = null;
console.log(value); // null

2. Unterschiede zwischen undefined und null

Beispiel:

console.log(undefined == null);  // true
console.log(undefined === null); // false

Hinweise:

• Verwenden Sie null, um explizit einen „leeren Wert“ anzuzeigen.
• Die Unterscheidung von undefined klärt Ihre Absicht im Code.

5.4 Best Practices für die Initialisierung

1. Immer initialisieren

Weisen Sie bei der Deklaration einen Wert zu, um undefinierte Zustände zu vermeiden.

Beispiel:

let count = 0;     // initialized
let message = "";  // initialized with an empty string

2. Null verwenden, um die Absicht explizit zu machen

Wenn Daten noch nicht festgelegt sind, initialisieren Sie mit null, um anzuzeigen, dass Sie es später setzen planen.

Beispiel:

let result = null; // will be assigned later

3. Überprüfen, ob Werte initialisiert sind

Überprüfen Sie, ob Funktionsargumente oder Rückgabewerte undefined sind.

Beispiel:

function greet(name) {
  if (name === undefined || name === null) {
    console.log("No name provided");
  } else {
    console.log(`Hello, ${name}!`);
  }
}

greet();        // No name provided
greet("Taro");  // Hello, Taro!

5.5 Häufige Fehler und wie man sie behebt

1. ReferenceError

Ursache: Zugriff auf eine Variable, die nie deklariert wurde.
Beispiel:

console.log(name); // Error: name is not defined

Behebung:
Deklarieren und initialisieren Sie die Variable, bevor Sie sie verwenden.

2. TypeError

Ursache: Versuch, auf eine Eigenschaft von null oder undefined zuzugreifen.
Beispiel:

let obj = null;
console.log(obj.property); // Error: cannot read properties

Behebung:
Überprüfen Sie den Wert vorher.

if (obj !== null && obj !== undefined) {
  console.log(obj.property);
}

5.6 Zusammenfassung

Die Variableninitialisierung und die Behandlung undefinierter Werte sind grundlegende JavaScript-Fähigkeiten. Durch ordnungsgemäße Initialisierung und sichere Überprüfungen können Sie unerwartete Fehler verhindern.

6. Variablennamensregeln und Best Practices

.In JavaScript hat die Benennung von Variablen einen erheblichen Einfluss auf die Lesbarkeit und Wartbarkeit des Codes. Wenn Sie geeignete Namenskonventionen befolgen, wird die Absicht Ihres Codes klarer und Fehler lassen sich leichter vermeiden. Dieser Abschnitt erklärt die Regeln für Variablennamen und bewährte Praktiken im Detail.

6.1 Grundregeln für Variablennamen

In JavaScript müssen Variablennamen diesen Regeln entsprechen.

1. Erlaubte Zeichen

• Alphabetische Buchstaben ( a–z , A–Z )
• Zahlen ( 0–9 )
• Unterstrich ( _ )
• Dollarzeichen ( $ )

2. Nicht erlaubte Muster

• Variablennamen dürfen nicht mit einer Zahl beginnen. Beispiel:

  let 1name = "Error"; // Error
  let name1 = "Correct";
  

• Reservierte Schlüsselwörter von JavaScript dürfen nicht verwendet werden (z. B. let , const , class ). Beispiel:

  let const = "Error"; // Error
  let value = "Correct";
  

• Leerzeichen und Sonderzeichen sind nicht erlaubt. Beispiel:

  let user name = "Error"; // Error
  let userName = "Correct";
  

6.2 Häufige Benennungsstile

In JavaScript gibt es mehrere häufig verwendete Benennungsstile.

1. camelCase (Empfohlen)

Das erste Wort beginnt mit einem Kleinbuchstaben, die folgenden Wörter beginnen mit Großbuchstaben.

Beispiel:

let userName = "Taro";      // Recommended
let totalAmount = 500;     // Recommended

2. snake_case (Eingeschränkte Verwendung)

Wörter werden durch Unterstriche (_) getrennt. Dieser Stil wird häufig für Konstanten oder in datenbankbezogenem Code verwendet.

Beispiel:

let user_name = "Taro"; // Allowed but not common in JavaScript

3. PascalCase (Für Klassen und Konstruktoren)

Jedes Wort beginnt mit einem Großbuchstaben. Wird häufig für Klassennamen und Konstruktorfunktionen verwendet.

Beispiel:

class UserProfile {
  constructor(name) {
    this.name = name;
  }
}

4. UPPER_SNAKE_CASE für Konstanten

Konstanten werden typischerweise in Großbuchstaben mit Unterstrichen geschrieben.

Beispiel:

const MAX_VALUE = 100;
const DEFAULT_TIMEOUT = 5000;

6.3 Bewährte Praktiken

1. Verwenden Sie aussagekräftige Namen

Variablennamen sollten ihren Zweck eindeutig beschreiben.

Schlechtes Beispiel:

let x = 10; // Meaning unclear

Gutes Beispiel:

let itemCount = 10; // Clearly represents the number of items

2. Vermeiden Sie übermäßige Abkürzungen

Zu starke Abkürzungen verringern die Lesbarkeit.

Schlechtes Beispiel:

let nm = "Taro"; // Unclear

Gutes Beispiel:

let userName = "Taro"; // Clear intent

3. Bewahren Sie Konsistenz

Verwenden Sie im gesamten Code dieselbe Benennungskonvention.

Schlechtes Beispiel:

let user_name = "Taro"; // snake_case
let userAge = 25;       // camelCase (inconsistent)

Gutes Beispiel:

let userName = "Taro";
let userAge = 25; // Consistent camelCase

4. Verwenden Sie logische Namen für boolesche Flags

Boolesche Variablen sollten einen Zustand oder eine Bedingung beschreiben.

Schlechtes Beispiel:

let flag = true; // Ambiguous

Gutes Beispiel:

let isLoggedIn = true; // Clearly represents state

5. Zahlen und Einheiten klar benennen

Wenn Variablen numerische Werte oder Einheiten repräsentieren, machen Sie das deutlich.

Schlechtes Beispiel:

let size = 10; // Unit unclear

Gutes Beispiel:

let fontSizePx = 10; // Font size in pixels

6.4 Benennungsrichtlinien und Hinweise

1. Englisch verwenden Die Programmierung verwendet Englisch als Standardsprache. Vermeiden Sie japanische oder romanisierte Variablennamen.

Schlechtes Beispiel:

let namae = "Taro"; // Avoid romanized Japanese

Gutes Beispiel:

let userName = "Taro"; // Use English

2. Präfixe und Suffixe bei Bedarf verwenden Das Hinzufügen von Präfixen oder Suffixen kann die Rolle einer Variable verdeutlichen.

Beispiel:

let btnSubmit = document.getElementById("submit"); // Button element
let arrUsers = ["Taro", "Hanako"];                 // Array

7. Häufige Fehler und deren Behebung

In JavaScript treten Fehler im Zusammenhang mit Variablendeklaration und -verwendung häufig auf. Diese Fehler können die Codeausführung stoppen oder zu unerwartetem Verhalten führen. Dieser Abschnitt erklärt gängige Fehler und wie man sie behandelt.

7.1 ReferenceError

Ursache

Ein ReferenceError tritt auf, wenn Sie versuchen, auf eine Variable zuzugreifen, die nicht existiert oder außerhalb ihres Gültigkeitsbereichs liegt.

Beispiel: Zugriff auf eine nicht deklarierte Variable

console.log(value); // Error: value is not defined

Wie man es behebt

1. Deklarieren Sie Variablen, bevor Sie sie verwenden.

   let value = 10;
   console.log(value); // 10
   

2. Prüfen Sie den Gültigkeitsbereich der Variable.

   function test() {
     let localVar = "Local variable";
   }
   // console.log(localVar); // Error: out of scope
   

7.2 TypeError

Ursache

Ein TypeError tritt auf, wenn ein Wert nicht vom erwarteten Typ ist.

Beispiel: Zugriff auf eine Eigenschaft von undefined

let obj;
console.log(obj.property); // Error: Cannot read properties of undefined

Wie man es behebt

1. Überprüfen Sie vorher die Initialisierung und Datentypen.

   let obj = {};
   console.log(obj.property); // undefined (no error)
   

2. Verwenden Sie den optionalen Verkettungsoperator ( ?. ).

   let obj;
   console.log(obj?.property); // undefined (no error)
   

7.3 SyntaxError

Ursache

Ein SyntaxError entsteht, wenn im Code ein grammatikalischer Fehler vorliegt.

Beispiel: Fehlendes Semikolon

let x = 10
let y = 20;

Wie man es behebt

1. Nutzen Sie einen Code‑Editor oder Lint‑Tools (z. B. ESLint), um Syntaxprobleme zu erkennen.
2. Führen Sie Ihren Code aus und prüfen Sie Fehlermeldungen in den Browser‑Entwicklertools oder in Node.js.

7.4 Uncaught Error

Ursache

Ein Uncaught Error erscheint, wenn eine Ausnahme ausgelöst wird, ohne dass sie von try...catch behandelt wird.

Beispiel:

throw new Error("Something went wrong!");

Wie man es behebt

1. Fügen Sie Ausnahmebehandlung hinzu.

   try {
     throw new Error("Error occurred!");
   } catch (error) {
     console.log(error.message); // Error occurred!
   }
   

2. Protokollieren Sie Fehlermeldungen korrekt, um das Debuggen zu erleichtern.

7.5 RangeError

Ursache

Ein RangeError tritt auf, wenn ein Wert außerhalb des zulässigen Bereichs liegt.

Beispiel 1: Array‑Index außerhalb des Bereichs

let arr = [1, 2, 3];
console.log(arr[5]); // undefined (not an error, but unintended)

Beispiel 2: Ungültige Array‑Länge

new Array(-1); // Error: Invalid array length

Wie man es behebt

1. Prüfen Sie Indizes, bevor Sie auf Arrays zugreifen.

   let arr = [1, 2, 3];
   if (arr[5] !== undefined) {
     console.log(arr[5]);
   } else {
     console.log("Out of range");
   }
   

2. Kontrollieren Sie Schleifenbedingungen und Array‑Längen korrekt.

7.6 Weitere häufige Fehler

1. NaN

Ursache: Tritt auf, wenn eine numerische Operation zu einer Nicht‑Zahl führt.
Beispiel:

let result = parseInt("abc"); // NaN

Wie man es behebt

• Verwenden Sie isNaN(), um zu prüfen.

  if (isNaN(result)) {
    console.log("Invalid number");
  }
  

2. Infinity

Ursache: Tritt auf, wenn durch Null geteilt wird oder extrem große Berechnungen durchgeführt werden.
Beispiel:

let value = 1 / 0; // Infinity

Wie man es behebt

• Validieren Sie Werte, bevor Sie Berechnungen durchführen.

  let value = 10;
  if (value !== 0) {
    console.log(100 / value);
  } else {
    console.log("Cannot divide by zero");
  }
  

7.7 Zusammenfassung

Fehler sind in der JavaScript‑Entwicklung unvermeidlich, aber durch das Verständnis ihrer Ursachen und das Anwenden geeigneter Handhabungstechniken können Sie Ihre Programme stabil halten. Das Vorwegnehmen fehleranfälliger Bereiche und die Implementierung passender Fehlerbehandlung sind entscheidend für zuverlässigen Code.

8. Praktische Beispiele: Programme mit JavaScript‑Variablen

In diesem Abschnitt wenden wir das Gelernte über JavaScript‑Variablen an, indem wir konkrete Programmbeispiele erstellen. Wir gehen sie Schritt für Schritt durch, von einfachen Fällen bis zu leicht fortgeschritteneren.

8.1 Beispiel 1: Eine Berechnungs‑Anwendung

Problem:

Erstellen Sie ein Programm, das den Preis und die Menge eines Produkts in Variablen speichert, dann die Gesamtkosten berechnet und anzeigt.

Code-Beispiel:

const pricePerItem = 500;        // price per item (constant)
let quantity = 3;               // quantity (variable)
let totalPrice = pricePerItem * quantity; // calculate total

console.log(`The total price is ${totalPrice} yen.`);

Erklärung:

1. Die Konstante pricePerItem stellt den Artikelpreis dar, der sich nicht ändert.
2. Die Variable quantity speichert die Anzahl der Artikel und kann aktualisiert werden.
3. Das Berechnungsergebnis wird in totalPrice gespeichert und mit einem Template-Literal angezeigt.

8.2 Beispiel 2: Rabattberechnung mit bedingter Logik

Problem:

Erstellen Sie ein Programm, das einen Rabatt basierend auf dem Gesamtkaufpreis anwendet.

Code-Beispiel:

let totalAmount = 1200; // total purchase amount
let discount = 0;       // discount rate (initialized)

if (totalAmount >= 1000) {
  discount = 0.1; // 10% discount
} else if (totalAmount >= 500) {
  discount = 0.05; // 5% discount
}

let discountedAmount = totalAmount - totalAmount * discount;
console.log(`The discounted price is ${discountedAmount} yen.`);

Erklärung:

1. Die Initialisierung von discount verhindert Fehler, selbst wenn keine Bedingung zutrifft.
2. Der Rabattsatz wird mit bedingten Anweisungen bestimmt.
3. Die Verwendung von Variablen erleichtert die Modifikation von Bedingungen oder Werten.

8.3 Beispiel 3: Datenmanagement mit Arrays und Schleifen

Problem:

Verwalten Sie eine Liste von Produkten und ihren Preisen mit Arrays, dann berechnen Sie die Gesamtkosten.

Code-Beispiel:

const items = ["Apple", "Banana", "Orange"]; // item names
const prices = [100, 200, 150];              // prices
let totalCost = 0;                           // total cost

for (let i = 0; i < items.length; i++) {
  console.log(`${items[i]}: ${prices[i]} yen`);
  totalCost += prices[i];
}

console.log(`Total cost: ${totalCost} yen`);

Erklärung:

1. Arrays ermöglichen eine effiziente Verwaltung mehrerer verwandter Datenpunkte.
2. Eine Schleife verarbeitet jeden Artikel ohne Code-Duplikation.
3. Die Variable totalCost akkumuliert die Summe.

8.4 Beispiel 4: Wiederverwendbare Berechnungen mit Funktionen

Problem:

Erstellen Sie eine wiederverwendbare Funktion zur Berechnung der Steuer.

Code-Beispiel:

function calculateTax(price, taxRate = 0.1) {
  return price + price * taxRate;
}

let itemPrice = 1000;                 // item price
let finalPrice = calculateTax(itemPrice); // price including tax
console.log(`Price with tax: ${finalPrice} yen`);

Erklärung:

1. Die Funktion calculateTax gibt einen steuerinklusiven Preis zurück.
2. Ein Standardparameter ermöglicht es der Funktion, ohne Angabe eines Steuersatzes zu funktionieren.
3. Wiederverwendbare Funktionen verbessern die Wartbarkeit und Effizienz.

8.5 Beispiel 5: Behandlung von Benutzereingaben

Problem:

Erstellen Sie ein Programm, das den Benutzer nach Name und Alter fragt und dann feststellt, ob sie volljährig sind.

Code-Beispiel:

let userName = prompt("Please enter your name:");
let age = parseInt(prompt("Please enter your age:"), 10);

if (age >= 18) {
  console.log(`${userName} is an adult.`);
} else {
  console.log(`${userName} is a minor.`);
}

Erklärung:

1. prompt wird verwendet, um Benutzereingaben zu sammeln.
2. parseInt konvertiert String-Eingaben in eine Zahl.
3. Klare Variablennamen machen den Code leichter verständlich.

8.6 Zusammenfassung

In diesem Abschnitt haben wir praktische Beispiele mit JavaScript-Variablen erkundet.

Wichtige Erkenntnisse:

1. Berechnungs-Apps: Implementieren Sie grundlegende Arithmetik und Variablenverwaltung.
2. Bedingte Rabatte: Ändern Sie Werte dynamisch basierend auf Bedingungen.
3. Arrays und Schleifen: Verwalten und verarbeiten Sie mehrere Datenpunkte effizient.
4. Funktionen: Verbessern Sie die Wiederverwendbarkeit und Wartbarkeit.
5. Benutzereingabe: Erstellen Sie interaktive Programme mit Variablen.

9. FAQ (Häufig gestellte Fragen)

.

Dieser Abschnitt beantwortet häufige Fragen zu JavaScript‑Variablen und behandelt sowohl Anfänger‑Fallstricke als auch fortgeschrittene Themen.

Q1: Was sollte ich verwenden: var, let oder const?

A:

In den meisten Fällen const standardmäßig verwenden.

• Es verhindert erneute Zuweisung und erneute Deklaration, wodurch der Code sicherer wird.
• Es drückt klar aus, dass der Wert sich nicht ändern soll.

let nur dann verwenden, wenn eine erneute Zuweisung erforderlich ist.

var in modernem JavaScript vermeiden, da es den Block‑Scope ignoriert und zu unerwarteten Fehlern führen kann.

Q2: Muss ich Variablentypen in JavaScript deklarieren?

A:

Nein. JavaScript ist eine dynamisch typisierte Sprache, sodass Variablentypen automatisch anhand der zugewiesenen Werte bestimmt werden.

Beispiel:

let value = 10;     // number
value = "string";  // string (no error)

Allerdings kann dynamische Typisierung unbeabsichtigte Fehler verursachen, also seien Sie vorsichtig. Die Verwendung von TypeScript kann die Typsicherheit erhöhen.

Q3: Kann ich Objekt‑Eigenschaften, die mit const deklariert wurden, ändern?

A:

Ja. const verhindert die erneute Zuweisung der Variablen selbst, aber Objekt‑Eigenschaften können weiterhin geändert werden.

Beispiel:

const user = { name: "Alice" };
user.name = "Bob"; // property update allowed
console.log(user);

// user = {}; // Error: reassignment not allowed

Q4: Was ist der Unterschied zwischen undefined und null?

A:

• undefined: Eine Variable wurde deklariert, aber ihr wurde kein Wert zugewiesen.
• null: Ein explizit zugewiesener „leerer“ Wert.

Beispiel:

let a;        // undefined
let b = null; // explicitly empty

Q5: Warum sollten globale Variablen vermieden werden?

A:

Globale Variablen können mehrere Probleme verursachen:

1. Namenskollisionen: Höheres Risiko von Konflikten bei Namen.
2. Geringere Wartbarkeit: Schwieriger nachzuvollziehen, wo Werte geändert werden.
3. Schwierige Fehlersuche: Werte können unerwartet überschrieben werden.

Lösung:
Falls nötig, globale Variablen in ein Namensraum‑Objekt bündeln.

Beispiel:

const App = {
  userName: "Alice",
  userAge: 25
};

console.log(App.userName);

Q6: Welche Namenskonventionen sollte ich verwenden?

A:

Empfohlene Konventionen umfassen:

1. camelCase: Für Variablen und Funktionen.

   let userName = "Alice";
   

2. PascalCase: Für Klassen und Konstruktoren.

   class UserProfile {}
   

3. UPPER_SNAKE_CASE: Für Konstanten.

   const MAX_COUNT = 100;
   

Q7: Was ist ein Closure?

A:

Ein Closure ist ein Feature, bei dem eine Funktion Zugriff auf Variablen aus ihrem äußeren Scope behält.

Beispiel:

function counter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

Closures sind nützlich für Zustandsverwaltung und Kapselung.

10. Fazit

In diesem Artikel haben wir JavaScript‑Variablen umfassend behandelt, von den Grundkonzepten bis zu fortgeschrittener Nutzung. Variablen sind grundlegend für die Datenverwaltung und das Schreiben flexibler, effizienter Programme.

10.1 Zusammenfassung der wichtigsten Punkte

1. Grundlagen von Variablen

• Variablen speichern Daten temporär zur Wiederverwendung.
• Dynamische Typisierung bietet Flexibilität, erfordert jedoch sorgfältiges Management.

2. Deklarationsmethoden

• var: Funktions‑Scope, wieder deklarierbar, aber nicht empfohlen.
• let: Block‑Scope, wieder zuweisbar.
• const: Block‑Scope, die sicherste Wahl für die meisten Fälle.

3. Scope und Lebensdauer

• Der Scope definiert, wo Variablen zugänglich sind.
• Globale Variablen minimieren und lokalen/Block‑Scope nutzen.

4. Initialisierung und Umgang mit Undefined

• undefined: Wird automatisch zugewiesen, wenn kein Wert gesetzt ist.
• null: Stellt explizit einen leeren Wert dar.

5. Benennung und Best Practices

• Sinnvolle, konsistente Namen verwenden (vorzugsweise camelCase).
• UPPER_SNAKE_CASE für Konstanten nutzen.

6. Häufige Fehler

• Das Verständnis gängiger Fehler (ReferenceError, TypeError usw.) verbessert die Fehlersuche.
• Richtige Fehlerbehandlung erhöht die Stabilität des Programms.

7. Praktische Codebeispiele

• Praktische Beispiele zeigten Berechnungen, Bedingungen, Arrays, Funktionen und Benutzereingaben.

10.2 Nächste Schritte

1. Weiter zu Fortgeschrittenen Themen

• Funktionen und Methoden: Verbesserung von Modularität und Wiederverwendbarkeit.
• Objekte und Klassen: Arbeit mit komplexen Datenstrukturen.
• Moderne ES6+-Features: Template‑Literals, Arrow‑Funktionen, Destrukturierung und mehr.

2. Praxis mit realen Projekten

Die Anwendung von Variablen in realen Projekten wird Ihr Verständnis vertiefen.

Beispiele:

• Erstellen Sie eine einfache ToDo‑App.
• Entwickeln Sie einen Taschenrechner oder ein Kalender‑Tool.
• Implementieren Sie Formularvalidierung.

10.3 Abschließende Gedanken

JavaScript‑Variablen sind ein grundlegender Baustein der Programmierung. Durch korrekte Deklaration und Verwaltung können Sie sicheren, effizienten und wartbaren Code schreiben.

Mit dem strukturierten Wissen, das Sie in diesem Artikel erworben haben – von den Grundlagen bis zur fortgeschrittenen Nutzung – sind Sie gut gerüstet, um weiter zu üben und Ihre JavaScript‑Kenntnisse durch praktische Programmierung zu festigen.