JavaScript è un linguaggio di scripting che può essere utilizzato sia nello sviluppo front-end che back-end. Con questo linguaggio di programmazione puoi creare contenuti che si aggiornano dinamicamente, animano immagini e controllano i contenuti multimediali.
JavaScript ha centinaia di framework e librerie ed è anche il linguaggio di programmazione più utilizzato, secondo Statista.
JavaScript ha vari operatori creati per ottenere ruoli diversi. In questo articolo spiegherò cos’è JavaScript Void (0), la sua importanza, i suoi casi d’uso e vantaggi, i potenziali rischi per la sicurezza e le sue alternative.
Sommario:
Cos’è l’operatore Void (0)?
Nei nostri dizionari void significa “non valido” o “completamente vuoto”. Void (0) è un operatore che controlla un dato valore e restituisce undefinito. Una funzione è considerata nulla se non restituisce nulla. L’operatore void (0) può essere utilizzato in molte aree.
Ad esempio, puoi fare in modo che JavaScript venga restituito indefinito quando fai clic su un tag di ancoraggio. Quando ciò accade, significa che la pagina su cui stai facendo clic non verrà aggiornata e non accadrà nulla a quella pagina.
Importanza dell’utilizzo dell’operatore Void e 0 come operando
Puoi utilizzare l’operatore void con qualsiasi espressione. Tuttavia, in JavaScript, viene utilizzato principalmente con 0 come operando. Ecco alcuni casi d’uso dell’operatore Void (0):
Impedisci la navigazione
In occasioni normali, se fai clic su un collegamento, probabilmente ti porterà a una nuova pagina. Possiamo creare un progetto per dimostrare come funziona. Avrò due file nel mio progetto: index.html e nextPage.html.
Puoi aggiungere questo codice a diversi file come segue:
Indice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home Page</title> </head> <body> <h1>Welcome to the Home Page</h1> <a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/nextPage.html">Go to Next Page (No void operator)</a> <script src="script.js"></script> </body> </html> nextPage.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Next Page</title> </head> <body> <h1>You are on the Next Page</h1> <a href="index.html">Go back to Home Page (No void operator)</a> <script src="script.js"></script> </body> </html>
Guarda questo video:
Come puoi vedere, puoi navigare dalla ‘Home’ alla ‘Pagina successiva’ facendo clic sul pulsante.
Possiamo ora introdurre l’operatore void (0) che blocca la navigazione. Aggiungi questo codice a index.html:
<!-- With void operator -->
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="doSomething()">Click me</a>
<script>
function doSomething() {
alert("Button clicked, but no navigation!");
}
</script><!-- With void operator -->
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="doSomething()">Click me</a>
<script>
function doSomething() {
alert("Button clicked, but no navigation!");
}
</script>
Guarda questo video quando premiamo il pulsante “Click me”:
Puoi vedere che dopo aver fatto clic sul pulsante, questo avviso, “Pulsante cliccato, ma nessuna navigazione!” viene visualizzato, ma non passiamo alla pagina successiva.
Funzioni anonime autoeseguibili
Una funzione anonima autoeseguibile o un’espressione di funzione immediatamente richiamata (IIFE) è una funzione che viene definita ed eseguita dopo la creazione. Tali funzioni sono progettate per creare un ambito privato per le variabili che impediscono a queste funzioni di inquinare l’ambito globale.
Dai un’occhiata a questo codice:
void function() {
// Function to calculate the sum of numbers from 1 to n
const calculateSum = () => {
let sum = 0;
for (let i = 1; i <= 10; i++) {
sum += i;
}
return sum;
};
// Call the function and log the result to the console
const result = calculateSum();
console.log("The sum of numbers from 1 to 10 is:", result);
}();
Questa è una funzione autoeseguibile che somma tutti i numeri da 1 a 10 e visualizza i risultati una volta eseguito il codice.
Quando esegui il codice, l’output sarà: “La somma dei numeri da 1 a 10 è: 55”.
Come combinare JavaScript e Void 0
L’operatore void non è esclusivo di JavaScript poiché è disponibile in altri linguaggi di programmazione come C e C++. Tuttavia, l’utilizzo di questo operatore varia da una lingua all’altra. Ad esempio, void è un tipo di dati nei linguaggi di programmazione C e C++ e non un operatore.
JavaScript utilizza la parola chiave “void” con lo zero numerico. È possibile utilizzare l’operatore void() per impedire il comportamento predefinito, ad esempio il browser che passa all’URL successivo. Questo è un esempio perfetto di un blocco di codice che combina JavaScript con l’operatore void ().
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>
È inoltre possibile utilizzare l’operatore void() per ottenere un valore primitivo indefinito. Dai un’occhiata a questo blocco di codice:
const result = void(0);const result = void(0);
Quando lo esegui, diventerai indefinito.
Cosa sono i vantaggi nulli (0)?
In JavaScript, utilizziamo l’operatore void () per creare valori “void” o “undefiniti”. Questi sono alcuni dei vantaggi derivanti dall’utilizzo di questo operatore nel codice:
- Impedire la navigazione: possiamo utilizzare l’operatore void(0) nell’attributo href se vogliamo impedire ai browser di navigare verso una nuova pagina quando facciamo clic su un collegamento o un pulsante. Questo blocco di codice illustra come funziona:
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>
- Restituisci valori non definiti dalle funzioni: come sviluppatore, puoi utilizzare l’operatore void () per restituire esplicitamente undefinito quando desideri la coerenza del codice nella tua applicazione. Dai un’occhiata a questo blocco di codice:
function myFunction() {
// do something
return void(0);
}
- Evita l’assegnazione ‘indefinito’: puoi usare void() in modo tale che ‘undefinito’ sia equivalente al ‘risultato’. Puoi anche usarlo come scelta stilistica. Questo blocco di codice mostra come è possibile ottenere questo risultato:
let result = void(0);
- Rendi il codice più leggibile: la leggibilità del codice non è qualcosa che dovremmo ignorare, soprattutto quando si ha a che fare con applicazioni di grandi dimensioni. Puoi usare void() quando vuoi scartare esplicitamente il valore restituito e far sapere agli altri sviluppatori che la funzione non restituirà nulla. Questo blocco di codice mostra come è possibile ottenere questo risultato:
function myFunction() {
// Do something...
return void(0);
}
Potenziali rischi per la sicurezza nulli (0)
Anche se void (0) è utile in vari casi in JavaScript, può anche rivelarsi pericoloso se non utilizzato correttamente. Questi sono alcuni dei casi in cui void (0) potrebbe essere utilizzato in modo dannoso:
- Vulnerabilità di script injection: esistono rischi potenziali di attacchi di script injection se il valore passato all’operatore void () non viene ripulito e convalidato. Un buon esempio è quando questo valore viene generato dinamicamente in base all’input dell’utente.
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>
Un blocco di codice di questo tipo consente agli utenti di iniettare codice dannoso.
- Clickjacking: gli aggressori possono utilizzare operatori void per creare livelli trasparenti/invisibili su una pagina web. Tali aggressori utilizzeranno quindi questi livelli per indurre gli utenti a fare clic su collegamenti e pulsanti dannosi.
- Può essere utilizzato per aggirare la Content Security Policy (CSP): la maggior parte dei proprietari di siti Web utilizza CSP per prevenire attacchi di cross-site scripting (XSS). Puoi utilizzare CSP per limitare la natura degli script e delle risorse che le tue pagine web dovrebbero caricare. Tuttavia, l’uso dell’operatore void() può entrare in conflitto con tali misure poiché carica anche gli script non consentiti dalla politica di sicurezza del contenuto.
Alternative a void (0)
La tecnologia continua a cambiare, e così anche la programmazione. Alcune persone vedono void (0) come un operatore obsoleto. Queste sono alcune delle alternative utilizzate dagli sviluppatori moderni:
- Utilizza event.preventDefault(): puoi utilizzare event.preventDefault() per impedire che si verifichi l’azione di un evento. Tale affermazione può impedire agli utenti di inviare un modulo o passare alla pagina successiva.
Questi frammenti di codice mostrano come utilizzare event.preventDefault:
#html <a href="#" onclick="event.preventDefault()">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
- Utilizza # come valore href: diverse pagine di un’applicazione sono collegate tra loro per una facile navigazione. L’utilizzo di # come href garantisce che gli utenti rimangano sulla stessa pagina. Puoi utilizzare questo approccio insieme a event.prevetDefault() per impedire alla tua pagina web di scorrere verso l’alto. Ecco come puoi ottenere questo risultato:
#html <a href="#">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
event.preventDefault();
window.scrollTo(0, 0);
});
- Utilizza null: è possibile restituire un valore null anziché undefinito. Ecco come puoi ottenere questo risultato:
let result = null;
Domande frequenti
Cos’è JavaScript?
JavaScript è un linguaggio di programmazione utilizzato principalmente nello sviluppo front-end. Tuttavia, questo linguaggio viene utilizzato nello sviluppo back-end con framework come Node.js. JavaScript viene utilizzato principalmente con altre tecnologie front-end come CSS e HTML per aggiungere interattività alle pagine web.
Cos’è JavaScript Void 0?
JavaScript Void 0 è un operatore utilizzato per impedire che si verifichi l’azione predefinita. Ad esempio, puoi utilizzare void (0) per impedire la navigazione quando un utente fa clic su un collegamento o un pulsante. Quando si fa clic su un collegamento da un codice con void (0), il browser tenta di navigare ma i risultati restituiscono un valore indefinito.
Esistono alternative al vuoto (0)?
SÌ. La maggior parte degli sviluppatori moderni utilizza ascoltatori di eventi invece di void (0) nel proprio codice. Questo approccio semplifica la gestione di varie funzioni e impedisce comportamenti predefiniti nei codici sorgente.
Usare void (0) è sicuro?
È possibile utilizzare void (0) per impedire il comportamento predefinito e con funzioni autoeseguibili. Tuttavia, void (0) può essere pericoloso se non lo usi consapevolmente nel tuo codice. Ad esempio, un operatore di questo tipo può facilitare l’iniezione di codice dannoso se applicato agli input dell’utente.
Conclusione
JavaScript è un linguaggio di programmazione molto ampio e potresti volerci del tempo prima di padroneggiarne la maggior parte dei concetti.
Abbiamo insegnato qual è l’operatore void (0), la sua importanza, i casi d’uso e le sue alternative. Ora capisci anche come combinare JavaScript e void(0) i potenziali rischi che potresti incontrare quando utilizzi questo operatore.
Puoi anche esplorare alcuni dei migliori ambienti runtime JavaScript per una migliore esecuzione del codice.