Javascript Variable

Eine Variable wird mit let (früher in älteren Versionen von Javascript mit var) deklariert und ist der Speicher oder Platzhalter für Daten wie Zahlen und Strings, deren Wert sich während der Ausführung des Scripts ändert. Eine Javascript-Variable hat einen Namen, einen Typ und einen Wert.

Javascript Variablen

Variable mit var – die alte Methode

Drei Schlüsselwörter – const, let und var – erzeugen Konstanten bzw. Variablen in Javascript. var ist die älteste Form, let und const sind mit ES6 (ECMAScript 2015) hinzugekommen.

Variablen, die gar nicht oder mit var vereinbart werden, sind älteste Schema, denn vor ECMAScript 6 gab es keine Alternative.

Die Deklaration (Erklärung, Vereinbarung) ist das Bekanntmachen der Variablen. Eine Javascript Variable wird entweder gleich bei der Deklaration oder später im Laufe des Programms ein Anfangswert zugewiesen. Das Zuweisen des Werts ist die Definition der Variablen. Bis zur Zuweisung eines Werts (der Initialisierung) hat die Variable den Wert undefined.

Deklaration und Definition

var myVar;     // Wert ist undefined
myVar = 42;    // Wert ist 42

//oder der Variablen direkt bei der Definition einen Wert zuweisen

var zahl = 42;  // Der Name ist "zahl", der Wert ist 42, 
                   der Typ ist numerisch

Variablen, die mit var deklariert werden, gelten innerhalb der Funktion, in der sie vereinbart werden. Wenn Variablen mit var außerhalb von Funktionen angelegt werden, sind sie globale Variablen, die im gesamten Programm verfügbar sind.

Javascript Variable mit let

Die Deklaration von Variablen mit let ist der Nachfolger von var im modernen Javascript. Eine Variable, die mit let deklariert wird, gilt nicht innerhalb des gesamten Scripts, sondern nur innerhalb ihres umschließenden Blocks mit { und } – z.B. innerhalb von Bedingungen und Schleifen.

let x;             // Deklaration und Initialisierung
x = "Hello World"; // Zuweisung

let reduziert Fehlerquellen, da eine Variable mit let einen kleineren Gültigkeitsbereich (scope) hat.

var name = "ECMA";

if (name === "ECMA") {
   let hallo = "Hallo Javascript";
} else {
   let hallo = "Hallo";
}

console.log (hallo);

erzeugt einen Fehler (ReferenceError), denn Hallo ist nur innerhalb des umfassenden Blocks verfügbar, hier also innerhalb der if-Bedingung.

let wird von allen modernen Browsern unterstützt, angefangen bei IE11. IE10 (kein Support mehr von Microsoft) hingegen unterstützt let noch nicht.

const – Konstante

Korrekt gesehen ist eine Konstante keine Variable. Einer Konstanten muss bei der Deklaration sofort ein Wert zugewiesen werden, denn nach der Deklaration kann einer Konstanten kein neuer Wert zugewiesen werden.

Eine Variable mit const ist genauso wie let auf ihre Block-Umgebung oder Block-Scope eingeschränkt

const x = "HALLO ECMA!"

const ist keine Konstante? Tatsächlich, denn das ist durchaus korrekt:

const arr = ["Blau", "Rost", "Grün"];
arr.push("Lila");

Arrays und Objects, die als const angelegt werden, können geändert werden, Integer, Boolean und String hingegen nicht.

Das Schöne an const: Weil einer Variablen, die mit const vereinbart wurde, kein neuer Wert zugewiesen werden kann, gibt es weniger Nebeneffekte.

Variablen definieren und deklarieren

In einer Definition können auch mehrere Variablen vereinbart werden – sie werden in Javascript einfach durch Kommas voneinander getrennt.

let name, adresse, hausnr;
let name = "Meier", var adresse = "Winterstr.", var hausnr = 22;

Allerdings ist die ausführliche Schreibweise besser, denn sie lässt sich besser kommentieren und ist zudem besser lesbar:

let name    = "Meier";      // Name
let adresse = "Winterstr."; // Adresse
let hausnr  = 22;           // Hausnummer

Globale Variablen

Variablen in Javascript können ausdrücklich durch let, const oder var oder implizit (ohne const, let oder var) einfach durch die Zuweisung eines Anfangswerts vereinbart werden. Die einfache Zuweisung definiert eine globale Variable.

let name = "Meier";     // explizit durch Schlüsselwort let
adresse = "Winterstr."; // implizit durch Wertzuweisung

Globale Variablen gelten im gesamten Script. Variablen, die mit var vereinbart wurden, gelten hingegen nur in ihrer Funktion, mit let nur innerhalb ihres Blocks.

Jetzt klingt es zwar ganz schön praktisch, dass die globale Variable im ganzen Script gilt – aber das ist ausgesprochen gefährlich. Gerade einfache Variablennamen wie i, wert und x werden schnell auch an anderen Stellen des Scripts benutzt und überschreiben sich dann gegenseitig.

Gute Programmierpraxis – Konventionen

Darum ist die ausdrückliche Deklaration mit let, var und const die bessere Technik, während die implizite Vereinbarung einer Variablen als schlechte Programmierpraxis gilt.

Wird modernes Javascript im Strict Modus – strict-mode programmiert, entsteht sofort eine Fehlermeldung, wenn Variablen nicht definiert werden.

"use strict";
let name = "Meier";
if (vorname === "Ludwig") {
   console.log ("Hierhin kommt das Script nicht mehr");
}
ReferenceError: Can't find variable: vorname

Gute Variablennamen

Javascript-Variablennamen

  • bestehen aus Buchstaben (wobei auch ein Unterstrich "_" als Buchstabe zählt),
  • aus Ziffern,
  • dürfen keine Leerzeichen und Bindestriche enthalten,
  • dürfen nicht mit einer Zahl, einem Sonderzeichen oder Satzzeichen anfangen,
  • dürfen nicht mit einem Schlüsselwort übereinstimmen.

Zu den Programmierkonventionen für Javascript gehört der Camel Case oder camelCase. Gut lesbare Variablennamen, die aus zwei Wörtern zusammengesetzt sind beginnen mit einem kleingeschriebenen Wort, der Bindestrich fällt weg, das nächste Wort beginnt mit einem Großbuchstaben: maxHeight statt max-height.

Das erste Zeichen muss ein Buchstabe oder ein Unterstrich sein. Javascript ist zwar eine schwach typisierte Sprache, aber in Hinsicht auf die korrekte Schreibweise kennt Javascript keine Gnade.

Variablennamen sind case sensitive (Javascript achtet streng auf Groß- und Kleinschreibung), d.h., dass Name, name und NAme drei verschiedene Namen sind.

Korrekte Variablennamen Nicht korrekt Was ist falsch?
name1 10names Variablen müssen mit einem Buchstaben oder einem Unterstrich beginnen
price_tag box.front Der Punkt im Variablennamen ist nicht zulässig
_abc name#last Das „#“-Zeichen ist nicht zulässig
Abc_22 A-23 Das „-“-Zeichen – der Bindestrich – ist nicht zulässig
A23 5 Variablennamen müssen mit einem Buchstaben oder einem Unterstrich beginnen
var Übermut = 4;
var Π = Math.PI;
var ❿ = "Zehn"; Π ist ein valider Variablennamen, Übermut ebenfalls: Javascript steht auf Unicode. Aber ❿ führt zu einem Syntaxfehler.

Illegale oder falsche Variablennamen erzeugen eine Fehlermeldung und verhindern die Ausführung des Programms.

[log] let 10names = "10 Namen";		No identifiers allowed directly after numeric literal
oder								Uncaught SyntaxError: Invalid or unexpected token

Variablen und Datentypen

In Programmiersprachen wie C++ und Java muss der Typ der Variablen deklariert werden. Um eine Variable zum Speichern ganzzahliger Werte zu vereinbaren, muss der Typ explizit deklariert werden:

int num = 5;   oder    float fnum = 44.5;

Wenn eine Programmiersprache bei der Vereinbarung der Variablen den Datentyp erzwingt, wird sie als streng typisiert bezeichnet. Javascript hingegen ist eine dynamische oder locker typisierte Sprache, denn der Typ einer Variablen wird nicht ausdrücklich vereinbart:

let num = 5;
let fnum = 44.5;

Javascript verlangt keine Typangabe bei der Deklaration, sondern findet selber heraus, welcher Datentyp in num und fnum gespeichert wird. Wir dürfen einer Variablen zunächst einen String zuweisen und später einen numerischen Wert. Bei der Ausführung des Programms wird der Javascript-Interpreter die Daten in den korrekten Typ konvertieren. In jeder der folgenden Anweisungen wird Javascript den Typ der Variablen konvertieren:

AnweisungKonvertierung
let item = 5.5;Zuweisung eines Fließkommawerts
item = 44;Konvertierung in Integer
item = "Egon M.";Konvertierung in String
item = true;Konvertierung in Boolean
item = null;Konvertierung in null-Wert

Allerdings gilt die Zuweisung eines anderen Datentyps als schlechte Programmierpraxis.

Suchen auf mediaevent.de