JavaScript Strict Mode oder Sloppy Mode – die Vorteile!

Der Strict Mode wurde mit ECMAScript 5 (2009) eingeführt, dieser reduziert die Fehleranfälligkeit von JavaScript und verbessert die allgemeine Sicherheit in der Syntax. So wirst du dein Code automatisch sauberer Schreiben, weshalb es meistens kein Grund gibt den Strict Mode nicht zu verwenden. Außer du muss bereits bestehende Software warten – aber dann kannst du deine Ergänzen-Funktionen zum Beispiel in den Strict Mode verwenden.

Mit "automatisch sauberem Schreiben" meine ich unter anderem, dass du dazu gezwungen bist, deine Variablen vor der Verwendung zu definieren und dass du keine Parameter in einer Funktion mit dem gleichen Namen nennen darfst. Dies hilft, Fehler zu vermeiden, da JavaScript sonst einen entsprechenden Fehler auslösen würde. Durch das Einhalten solcher Regeln wird der Code automatisch sauberer und einfacher zu lesen und zu verstehen. Dies kann dazu beitragen, dass der Code stabiler und einfacher zu warten ist.

Zum Beispiel für eine undefinierte Variable würdest du den folgenden Fehler erhalten: Uncaught ReferenceError: test is not defined.

Strict Mode verwenden in JavaScript

Um den Strict Mode zu verwenden, kann dieser entweder global verwendet werden oder in verschiedenen Scopes, um den Strict Mode mit dem Non Strict Mode.

Um den Strict Mode Global zu verwenden, kannst du am Anfang deiner JS Datei folgendes Schreiben, durch das use strict als String wird der Strict Mode initialisiert – diese sieht auf den ersten Blick immer falsch aus, funktioniert aber tatsächlich.

"use strict";

// dein JavaScript Code

Diese Syntax eines String Literals wurde bewusst gewählt, um eine Abwärtskompatibilität für ältere Versionen zu gewährleisten. Da der Strict Mode ("use strict";) keine neuen Funktionalitäten bereitstellt, sondern nur ältere Designfehler korrigiert, um so eine sichere Anwendung zu haben, weshalb diese aber noch in älteren Versionen funktionieren kann.

Strict Mode auf Funktionsebene

Neben einer globalen Definition von "use strict"; kann dieser auch in Funktionen eingesetzt werden – falls du neue Funktionen zu einer bestehenden älteren Code Base hinzufügen willst. Ist es eine Überlegung nur deine neuen Funktionen in den Strict Mode zu setzen, sodass du nicht den alten Code überarbeiten musst!

function add(a, b) {
    "use strict";
    return a + b;
}

Strict Mode auf Klassenebene & Module

Bei der Klassen Syntax und bei dem Aufruf von Scripten als Module ist es so das der Strict Mode immer an ist, da diese syntaktischen Möglichkeiten erst später dazu kamen konnte man dort das Verhalten Standardmäßig ändern. Bei Funktionen oder dem globalen Kontext konnte man das nicht machen, weil sonst alter Code nicht mehr funktionieren würde.

Folgender Code wäre also unter anderem automatisch im Strict Mode und würde auch einen Fehler werfen: Uncaught SyntaxError: Duplicate parameter name not allowed in this context

class Add {

    constructor(a, a, b) {

    }

}

Der Module Type könnte zum Beispiel so aktiviert werden – und dann wären die gesamten Dateien, die über die index.js geladen werden, auch im Strict Mode.

<script type="module" src="./index.js"></script>

Was man beim Arbeiten im Strict Mode beachten muss?

Nachdem wir nun kennengelernt haben: Wie man den Strict Mode aktivieren kann – wollen wir uns anschauen, welche Eigenheiten einem im Strict Mode erwarten können, genauer welche Fehler und Verhaltensweisen vermutlich anders erwartet werden.

Definition von Variablen

Grade bei der Definition von Variablen können schnell Fehler passieren, weshalb diese definitiv mit einem Keyword wie let, const oder var eingeleitet werden sollten. Im Strict Mode ist diese immer notwendig, im Sloppy Mode (none Strict Mode) können Variablen einfach Werte zugewiesen werden – was schnell zu Fehlern führt. Wie folgendes Beispiel zeigt.

var variable = "ich bin ein String!"

variabe = "ich bin ein neuer String!"

console.log(variable)

Im Strict Mode bekommen wir jetzt ein Fehler, dass die Variable „variabe“ nicht definiert ist – da sich bei der Benennung ein Tippfehler eingeschlichen hat. Im Sloppy Mode würden wir es erst merken, wenn ein unerwartetes Verhalten eintritt.

Doppelte Parameter Name

Standardmäßig ist es in JavaScript möglich doppelte Parameternamen anzugeben wie in diesem Beispiel. Hier wird a doppelt angegeben, im Sloppy Mode interessiert das JavaScript reichlich wenig. Dort würde nur der 2te Parameter verwendet werden, da dieses a später definiert wurde.

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

Im Strict Mode ist so etwas zum Glück nicht mehr möglich – da das nur zu Fehlern führen kann und keinen nennenswerten Vorteil hätte.

Als Fehler erhalten wird: Uncaught SyntaxError: Duplicate parameter name not allowed in this context

Definition von Oktal Literals in JavaScript

Oktal Literals können in JavaScript mit einer führenden 0 im Nummer-Typen definiert werden, diese ist sehr gefährlich, da so zum Beispiel aus einer „012“ eine 10 wird. Im Strict Mode muss der Präfix 0o verwendet werden für Oktal Literals. Die Schreibweise mit einer führenden 0 löst ein Fehler aus – wie das folgende Beispiel auch zeigt.

let number1 = 012; // Fehler

console.log(number1);

let number2 = 0o012; // Prefix 0o -> für Octal Literals

console.log(number2);

Der daraus resultierende Fehler gibt Folgendes aus: Uncaught SyntaxError: Octal literals are not allowed in strict mode.

this Variable in Funktionen

this ist eine spezielle Variable, die immer den aktuellen Kontext in Objekten bereithält. Wenn nun aber diese Methode in einer Funktion abgerufen wird, ist diese das Window Objekt, wenn add() nicht mit dem New Keyword initialisiert wird – weshalb diese schnell zu Fehler führen kann. So wird im Strict Mode bei einer Initialisierung ohne New Keyword this mit undefined definiert, so kann mit dieser Variable nicht mehr gearbeitet werden und es gibt direkt einen Fehler. Im Sloppy Mode bliebe das unter gewissen Umständen erst einmal unbemerkt und fällt dann erst im weiteren Verlauf auf.

function add() {
    console.log(this);
}

Werte Zuweisungen an String Literals

Standardmäßig ist der folgende Abruf möglich, zumindest kann man das so schreiben, ohne einen Fehler zu erzeugen. Aber dennoch – er gibt das kein Sinn.

"string".item = "test";

console.log("string".item);

Im Strict Mode ergibt das dementsprechende einen Fehler Uncaught TypeError: Cannot create property 'item' on string 'string'.

Gesperrte Keywords im Strict Mode als Variablennamen

Im Strict Mode sind deutlich mehr Keywords gesperrt, die nicht verwenden werden dürfen als Variablennamen. Nicht alle Keywords haben in JavaScript eine Funktion bereits – sind aber geplant, implementiert zu werden.

• implements
• interface
• package
• private
• protected
• public
• static
• yield
• let

Der daraus resultierende Fehler sagt Folgendes aus: Unexpected strict mode reserved word

Quelle der Reversed Keywords.

Ist JavaScript im Strict Mode?

JavaScript hat keine interne Methode, um zu überprüfen, ob man sich aktuell im Strict Mode befindet oder nicht. Falls du das ganze prüfen möchtest, kannst du unter anderem die folgende Variante verwenden, basierend auf meiner Beschreibung der this Variable. Da this undefined ist, wenn die Initialisierung ohne New Keyword erfolgt, ist im Strict Mode.

function isStrict() {
    if (!this) return true
    return false
}

console.log("Strict Mode? " + isStrict());

Fazit

Du hast gelernt, dass der Strict Mode viele Kinderkrankheiten von JavaScript behebt. Weshalb bei neuen Anwendungen dieser auch immer eingeschaltet werden sollte, da dieser dich primär unterstützt deinen Code sicherer zu machen. Es können im Allgemeinen mehr Fehler auftreten, diese hilft dir dabei weniger Fehler zu machen – da die unscheinbaren Besonderheiten von JavaScript so nicht mehr auftreten können.