Javascript – var, let oder const?

0
227

Es gibt verschiedene Möglichkeiten, in Javascript Variabeln anzulegen. Aber welche ist die richtige Vorgehensweise? Gibt es eine allgemein gültige – oder setzt man hier auch auf Best Practices?

Ich nutze PHPStorm als Entwicklungsumgebung. Diese zeigt folgendes Konstrukt mit Warnung an:

Grund genug, sich dies mal genauer anzuschauen.

1. Variabeln ohne var, let oder const definieren

Grundsätzlich ist es möglich, gar kein Keyword zu verwenden. Etwa so:

function foo()
{
    baa = 1;
    return baa;
}

console.log( foo() ); // 1
console.log(baa);     // 1

Dies ist sehr unschön. Wir haben in einer „einfachen“ Funktion eine globale Variable geschaffen. Womöglich wird diese in anderen Funktionen (foo2()) erneut verwendet, und nicht überschrieben.

Man wundert sich unter Umständen über das Ergebnis ,-)

Empfehlung:

  • gehen sie sparsam mit Globalen Variablen um!
  • Verwenden sie diese nur, wenn sie die Variable im gesamten Projekt benötigen
  • Am Besten an separater Stelle, damit diese immer transparent sind

2. Vorwort: Wie ist Function-Scope und Block-Scope zu verstehen?

Function-Scope ist alles, was in einer Funktion passiert:


function foo()
{
     // ... alles hier ist Function-Scoped
}



und jetzt der Block-Scope:



function foo()
{
     if(true)
     {
          // ... und das ist Block-Scoped
     }

     if(false)
     {
          // ... und das ist Block-Scoped
     }
}

 

3. VAR- Keyword

Ein mittels var definierte Variabel ist immer im Funktions-Scope und nicht schreibgeschützt. Die Variable kann daher überall in einer Funktion gelöscht oder neu definiert werden.

Empfehlung:

  • sofern sie keine funktionsweite Variabel benötigen, verwenden sie var nicht
  • wenn sie eine Variabel außerhalb von Funktionen definieren – ist diese automatisch global (siehe Punkt 1 – globale Variabeln)

4. LET und CONST

Ich verwende daher fast ausschließlich LET und CONST als Variabel Deklaration.

LET Variabeln sind nur in Blöcken zugreifbar, aber auch in Unterblöcken. Folgendes Konstrukt lässt sich also ausführen:


function foo()
{
    let baa = 1;
    if(true)
    {
        baa = baa + 2;
        return baa;
    }
    return 0;
}

console.log(foo()); // baa auch im Unterblock veränderbar!
console.log(baa);   // LET VAR nicht zulässig

CONST hingegen verhindern, dass ein Wert überschrieben werden kann:

function foo()
{
     const baa = 1;

     if(true)
     {
          baa = baa + 2;
          return baa;
     }
     return 0;
}

console.log(foo()); // Syntax Error, invalid assignment to const baa

Fazit: In 90 von 100 Fällen sollten Sie mit let und const an das gewünschte Ziel kommen ,-)

5. Allgemeine Hinweise zu Deklarationen und Initialisierung

Es gibt allerdings noch Unterschiede wie Variabeln initialisiert bzw. deklariert werden können. Diese möchte ich hier noch mal kurz aufzeigen:


var foo;     // Deklaration
foo = 1;    // Initialisierung

let foo;      // Deklaration
foo = 1;     // Initialisierung

var foo = 1; // Deklaration + Initialisierung
let foo = 1;  // Deklaration + Initialisierung

// ACHTUNG !!

const a = 5;   // Nur Deklaration + Initialisierung möglich!

War dieser Artikel für euch hilfreich oder fehlt euch etwas? Habt ihr einen Fehler entdeckt oder wollt ihr euch einfach nur bedanken – lasst es mich doch über die Kommentare wissen. Danke vorab!