La parola void significa “spazio completamente vuoto” secondo il dizionario. Questo termine, quando viene usato nella programmazione, si riferisce ad un ritorno di “niente” – un “valore vuoto” per così dire.
Che cos’è la parola chiave void?
Quando una funzione è void, significa che la funzione non restituisce nulla. Questo è simile alle funzioni in JavaScript che restituiscono undefined
esplicitamente, così:
function und() { return undefined}und()
o implicitamente, così:
function und() {}und()
A prescindere dalle espressioni e dalle dichiarazioni nelle funzioni di cui sopra (aggiunge 2 numeri insieme, trova la media di 5 numeri, qualsiasi cosa), non viene restituito alcun risultato.
Ora sappiamo cosa significa la parola chiave void
. Che dire di javascript:void(0)
?
Cos’è javascript:void(0)?
Se dividiamo questo, abbiamo javascript:
e void(0)
. Guardiamo ogni parte in modo più dettagliato.
javascript:
Questo viene chiamato Pseudo URL. Quando un browser riceve questo valore come valore di href
su un tag di ancoraggio, interpreta il codice JS che segue i due punti (:) piuttosto che trattare il valore come un percorso di riferimento.
Per esempio:
<a href="javascript:console.log('javascript');alert('javascript')">Link</a>
Quando si clicca su “Link”, ecco il risultato:
Come visto sopra, il browser non tratta href
come un percorso di riferimento. Invece, lo tratta come codice JavaScript che inizia dopo “javascript:” e separato da punti e virgola.
void(0)
L’operatore void valuta le espressioni date e restituisce undefined
.
Per esempio:
const result = void(1 + 1);console.log(result);// undefined
1 + 1
viene valutato ma viene restituito undefined
. Per confermarlo, ecco un altro esempio:
<body> <h1>Heading</h1> <script> void(document.body.style.backgroundColor = 'red', document.body.style.color = 'white' ) </script></body>
Il risultato del codice precedente è:
Ecco un altro esempio:
console.log(void(0) === undefined)// true
Combinazione di javascript: e void(0)
A volte, non volete che un link passi ad un’altra pagina o ricarichi una pagina. Usando javascript:
, potete eseguire del codice che non cambia la pagina corrente.
Questo, usato con void(0)
significa, non fare nulla – non ricaricare, non navigare, non eseguire alcun codice.
Per esempio:
<a href="javascript:void(0)">Link</a>
La parola “Link” è trattata come un link dal browser. Per esempio, è focalizzabile, ma non naviga verso una nuova pagina.
0
è un argomento passato a void
che non fa nulla, e non restituisce nulla.
Il codice JavaScript (come visto sopra) può anche essere passato come argomento al metodo void
. Questo fa sì che l’elemento di collegamento esegua del codice ma mantiene la stessa pagina.
Per esempio:
<a href="javascript:void( document.querySelector('#link').style.color = 'green')">Link</a>
Quando il pulsante viene cliccato, questo è il risultato:
Con void
, si dice al browser di non restituire nulla (o restituire undefined
).
Un altro caso d’uso dei link con il riferimento javascript:void(0)
è che a volte, un link può eseguire del codice JavaScript in background, e la navigazione può essere inutile. In questo caso, le espressioni verrebbero usate come argomenti passati a void
.
Conclusione
In questo articolo semplificato, abbiamo imparato cos’è l’operatore void
, come funziona e come si usa con lo pseudo URL javascript:
per gli attributi href
dei link.
Questo assicura che una pagina non navighi verso un’altra pagina o ricarichi la pagina corrente quando viene cliccata.