Cos'è (0, foo)() nel codice compilato da webpack/babel

Il codice che sembra sbagliato ma non lo è

Apri i DevTools su un sito costruito con webpack o Next.js, o semplicemente ispezioni l’output di Babel, e trovi qualcosa del genere:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _utils = require("./utils");

(0, _utils.doSomething)();

Quel (0, _utils.doSomething)() sembra un modo assurdamente contorto per scrivere semplicemente _utils.doSomething(). Non è un bug del bundler, e non è nemmeno codice generato a caso: è una scelta precisa per riprodurre fedelmente il comportamento dei moduli ES nativi.

L’operatore virgola, in breve

Prima di arrivare al perché, vale la pena ripassare cosa fa l’operatore virgola (,) usato come espressione: valuta ogni elemento della sequenza da sinistra a destra e restituisce solo il valore dell’ultimo.

let x = (1, 2, 3);
console.log(x); // 3

Nell’esempio di prima, (0, _utils.doSomething) valuta 0, lo scarta, e restituisce _utils.doSomething — cioè il riferimento alla funzione. Fin qui, lo stesso identico riferimento che avresti scrivendo direttamente _utils.doSomething. La differenza sta in come quel riferimento viene poi chiamato.

Il vero motivo: staccare il valore di this

Quando chiami un metodo nella forma oggetto.metodo(), JavaScript lega this dentro metodo all’oggetto a sinistra del punto. Prova questo esempio:

const modulo = {
  nome: "modulo",
  getThis() {
    return this;
  },
};

modulo.getThis(); // this === modulo

const riferimento = modulo.getThis;
riferimento(); // this === undefined (in strict mode)

Assegnare la funzione a una variabile e poi chiamarla “stacca” il legame con modulo: this torna a essere undefined (in strict mode) invece di modulo. L’espressione con la virgola ottiene esattamente questo risultato, ma in linea, senza dover introdurre una variabile intermedia:

(0, modulo.getThis)(); // this === undefined, proprio come con la variabile

Perché Babel/webpack lo fanno apposta

Nella specifica dei moduli ES, quando importi una funzione con import { foo } from './modulo' e la chiami con foo(), this dentro foo è sempre undefined: non esiste alcun legame implicito con l’oggetto modulo da cui l’hai importata.

Il problema è che Babel compila import/export in require/exports per compatibilità con CommonJS. Se traducesse ingenuamente foo() in _modulo.foo(), il comportamento cambierebbe silenziosamente: quella sintassi lega this all’oggetto _modulo (l’oggetto exports del modulo importato), cosa che la specifica ES vieta esplicitamente.

Per evitare questa discrepanza, Babel genera (0, _modulo.foo)(): preleva il riferimento alla funzione senza chiamarla nel contesto di _modulo, poi la invoca “slegata”, riproducendo fedelmente il comportamento nativo dei moduli ES anche nel codice transpilato a CommonJS.

Quando lo incontri

Praticamente ogni volta che ispezioni codice compilato da Babel (webpack, Next.js, Create React App e tanti altri toolchain basati su Babel) che importa una funzione da un altro modulo e la richiama direttamente, invece di chiamarla come metodo di un oggetto. È lo stesso tipo di “sintassi oscura trovata nel codice” già visto con javascript:void(0) e con !function(){}(): non un errore, ma un trucco preciso con uno scopo tecnico.