javascript:void(0), cos'è?

Che cos’è javascript:void(0)?

A volte capita di trovare nel codice di una pagina HTML una stringa come la seguente

<a href="javascript:void(0)">Cliccami</a>

Ma a cosa serve? In questo caso stiamo dicendo al browser che quando un utente cliccherà su quel link non dovrà accadere nulla.

A volte trovate anche questa forma

<a href="#">Cliccami</a>

Perfettamente lecita e valida ma con un piccolo rischio: lo scroll della pagina verso l’alto, verso il top della pagina.

Infatti solitamente possiamo usare link nella forma

<a href="#ancora-nella-pagina">Cliccami</a>

per far spostare lo scroll della pagina ad un elemento con id="ancora-nella-pagina".

Perchè usare JavaScript?

Se andate a leggere la documentazione ufficiale di void su MDN troverete che void valuta l’espressione che gli passiamo e poi ritorna undefined.

Un browser quando trova un URI dentro un link nella forma javascript: esegue il codice e poi rimpiazza il contenuto della pagina con il valore di ritorno, a meno che il codice o la funzione non ritornino undefined.

<a href="javascript:void(0);">Clicca qui per non fare nulla</a>

<a href="javascript:void(document.body.style.backgroundColor='green');">
  Clicca qui per uno sfondo verde della pagina
</a>

Utilizzi di void in JavaScript

Possiamo comunque utilizzare void per altri scopi, quelli per i quali è stato ideato.

Immaginate di aver scritto un event handler per un checkbox. Al click vogliamo che esegua una qualche operazione. Potremmo scrivere una cosa di questo tipo.

checkbox.onclick = () => eseguiOperazione();

Al click sulla checkbox viene eseguita la funzione e poi il chekcbox cambia stato.

MA

Se per caso la funzione in una situazione particolare ritorna ad esempio false il flusso di azioni si interrompe e il checkbox non cambia stato. Se è una cosa voluta non è un problema. Se però non è voluta e vogliamo evitarlo possiamo scrivere l’event handler in questa forma:

checkbox.onclick = () => void eseguiOperazione();

Questo fa in modo che se per caso qualcuno un domani cambia quella funzione in un modo non previsto verrà in ogni caso ignorato il valore di ritorno e non bloccheremo il comportamento di default del checkbox.

Un’altro modo di utilizzare void è quello di eseguire una funzione e scartare subito il valore di ritorno.

void function () {
  console.log("Boom!");
}();

Attenzione alle precedenze

void risolve le espressioni con una ben definita precedenza, alla quale è bene fare attenzione per evitare risultati non voluti. Considerate questi due esempi presi sempre da MDN

void 2 === "2"; 
void (2 === "2");

Quello che viene interpretato ed eseguito è quanto segue:

(void 2) === '2' // returns false
void (2 === '2') // returns undefined

Infatti viene eseguito il primo elemento appena dopo void. Nella prima riga il primo elemento è il numero 2. Nella seconda riga il primo elemento dopo void è il contenuto delle parentesi.

Funzioni eseguite e poi PUFF non ci sono più

Quando usate void la funzione o l’espressione in generale viene eseguita e viene ritornanto undefined. Attenzione che l’eventuale funzione che avete utilizzato non esiste più dopo l’esecuzione.

void function test() {
  console.log("test function executed");
};
try {
  test();
} catch (e) {
  console.log("test function is not defined");
  // output: "test function is not defined"
}

Buon coding! 😃