Strict mode in JavaScript: cosa fa davvero 'use strict'

La strict mode è una variante più rigorosa di JavaScript

JavaScript ha una lunga storia, e si porta dietro parecchie decisioni discutibili: assegnamenti che creano in silenzio variabili globali, un this che cambia significato a seconda di come chiami una funzione, nomi di parametro duplicati che semplicemente... funzionavano. Eliminare una qualsiasi di queste cose avrebbe rotto il web, quindi il TC39 (il comitato che cura il linguaggio) ha scelto un'altra strada: una modalità opzionale in cui gli spigoli più taglienti vengono smussati.

Questa modalità si chiama strict mode. La attivi con una sola riga all'inizio di un file o di una funzione:

'use strict';

x = 10;
console.log(x);

Eseguilo e otterrai un ReferenceError: x is not defined. Senza la direttiva, lo stesso codice crea tranquillamente una variabile globale chiamata x e stampa 10. Stesso linguaggio, due insiemi di regole diversi.

La direttiva 'use strict'

La direttiva è solo un letterale stringa: 'use strict'; oppure "use strict";. Deve essere la prima istruzione dello script o della funzione. Se prima c'è qualsiasi altra cosa, anche un'espressione isolata, il motore la tratta come una normale stringa e la ignora.

'use strict';

function demo() {
    'use strict';  // also legal at the top of a function
    undeclared = 1;
}

try {
    demo();
} catch (err) {
    console.log(err.message);
}

Puoi limitare la strict mode a una singola funzione mettendo la direttiva al suo interno. In pratica oggi nessuno lo fa più: o scrivi moduli (strict di default) o attivi la modalità per l'intero file.

Cosa cambia davvero la strict mode

La strict mode non è una sola regola, è un pacchetto. I punti principali:

• Assegnare un valore a una variabile non dichiarata lancia un errore invece di creare una variabile globale.
• this in una normale chiamata di funzione è undefined, non l'oggetto globale.
• I nomi di parametro duplicati (function f(a, a) {}) sono un errore di sintassi.
• Assegnare un valore a proprietà di sola lettura lancia un errore invece di fallire in silenzio.
• Eliminare con delete una semplice variabile o funzione lancia un errore.
• Alcune parole riservate per il futuro (implements, interface, package, private, protected, public, static, yield) non si possono usare come nomi di variabile.

Un piccolo giro:

'use strict';

// 1. Undeclared assignment
try {
    count = 5;
} catch (err) {
    console.log('undeclared:', err.message);
}

// 2. this in a plain function call
function who() {
    return this;
}
console.log('this is:', who());

// 3. Duplicate param names would be a SyntaxError:
// function bad(a, a) {}   // <-- won't even parse

Ognuno di questi casi è "il motore si è accorto prima di un probabile errore". Tutto il valore della strict mode sta qui.

Il bug della variabile globale silenziosa

È il motivo principale per cui esiste la strict mode. Senza, un errore di battitura diventa una variabile globale:

// Non-strict mode (don't do this)
function setup() {
    usernmae = 'Ada';   // typo - creates window.usernmae
}

setup();
console.log(username);  // undefined - the real variable was never set

Il programma gira. Nessun errore. Il bug salta fuori solo più tardi, quando qualcosa che avrebbe dovuto leggere username trova undefined. In strict mode lo stesso errore di battitura lancia un errore appena viene eseguito, e lo correggi in pochi secondi invece che in ore.

Il JavaScript moderno è strict di default

Ecco la parte che confonde molti: la maggior parte del JavaScript che scrivi oggi è già in strict mode, anche se non hai mai scritto 'use strict' da nessuna parte.

Due grandi fonti di strict mode automatica:

• Moduli ES. Qualsiasi file .mjs, qualsiasi <script type="module"> e tutto ciò che viene importato con import/export gira in strict mode. Nessuna direttiva necessaria.
• Corpi delle classi. Ogni istruzione dentro un class { ... } è strict, anche se il file che la contiene non lo è.

class Counter {
    tick() {
        // Strict here automatically.
        // count = 1 would throw ReferenceError.
        return this;
    }
}

const c = new Counter();
console.log(c.tick() === c);

Quindi quando devi davvero scrivere 'use strict'; a mano? Solo negli script classici: il JS vecchio stile caricato con un semplice tag <script>, o i file Node.js più vecchi che usano require senza un bundler di moduli. Per tutto ciò che è nuovo, ci pensano i moduli.

La strict mode cambia this nelle funzioni normali

Un comportamento che vale la pena sottolineare, perché mette in difficoltà chi inizia. In modalità non strict, chiamare una funzione normale senza un oggetto davanti collega this all'oggetto globale (window nei browser, global in Node). In strict mode lo collega a undefined:

'use strict';

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

showThis();          // undefined
showThis.call(42);   // 42 - not boxed into a Number object

Di solito è proprio quello che vuoi. Se this è undefined, un bug in cui hai dimenticato di fare il bind di un metodo emerge subito. Se invece punta in silenzio all'oggetto globale, il bug resta nascosto finché qualcosa più avanti non si rompe.

Cosa non fa la strict mode

La strict mode rende più rigorosi la compilazione e l'esecuzione, ma non ti dà i tipi, non intercetta gli accessi a null e non ti avvisa delle variabili inutilizzate. Quelli sono compiti di TypeScript, ESLint e del tuo editor. Pensa alla strict mode come a una correzione di un insieme preciso di trappole del linguaggio, non come a una rete di sicurezza completa.

E non è la stessa cosa di "JavaScript moderno". Puoi scrivere codice pessimo in strict mode e codice eccellente senza la direttiva. Rende solo più difficile commettere alcuni errori specifici.

Cosa portarti a casa

• 'use strict'; all'inizio di un file o di una funzione attiva una variante più rigorosa di JavaScript.
• Gli errori di battitura smettono di creare variabili globali, this smette di diventare in silenzio l'oggetto globale e una manciata di altre trappole diventano errori.
• I moduli ES e i corpi delle class sono strict in automatico: raramente devi scrivere la direttiva a mano.
• Serve a intercettare i bug prima, non ad abilitare nuove funzionalità.

Prossimo passo: i commenti

Hai visto le direttive, i punti e virgola e le regole a cui tiene il motore. Ora tocca alle note che lasci tu per chi leggerà il codice in futuro: come funzionano i commenti in JavaScript e quando vale la pena scriverli.