JavaScript Void 0 expliqué en seulement 5 minutes

par
Tweetez
Partagez
Enregistrer
Partagez
Partagez
0 Partages

JavaScript est un langage de script qui peut être utilisé à la fois dans le développement front-end et back-end. Avec ce langage de programmation, vous pouvez créer du contenu qui se met à jour dynamiquement, animer des images et contrôler le multimédia.

JavaScript possède des centaines de frameworks et de bibliothèques et est également le langage de programmation le plus utilisé, selon Statista.

JavaScript dispose de divers opérateurs créés pour remplir différents rôles. Dans cet article, j’expliquerai ce qu’est JavaScript Void (0), son importance, ses cas d’utilisation et ses avantages, les risques de sécurité potentiels et ses alternatives.

Qu’est-ce que l’opérateur Vide (0) ?

Dans nos dictionnaires, void signifie « non valide » ou « complètement vide ». Void (0) est un opérateur qui vérifie une valeur donnée et renvoie undéfini. Une fonction est considérée comme nulle si elle ne renvoie rien. L’opérateur void (0) peut être utilisé dans de nombreux domaines.

Par exemple, vous pouvez faire en sorte que JavaScript renvoie undefined lorsque vous cliquez sur une balise d’ancrage. Lorsque cela se produit, cela signifie que la page sur laquelle vous cliquez ne sera pas actualisée et que rien ne lui arrivera.

Importance d’utiliser l’opérateur Void et 0 comme opérande

Vous pouvez utiliser l’opérateur void avec n’importe quelle expression. Cependant, en JavaScript, il est principalement utilisé avec 0 comme opérande. Voici quelques cas d’utilisation de l’opérateur Void (0) :

Empêcher la navigation

En temps normal, si vous cliquez sur un lien, cela vous mènera probablement à une nouvelle page. Nous pouvons créer un projet pour démontrer comment cela fonctionne. J’aurai deux fichiers sur mon projet : index.html et nextPage.html.

Vous pouvez ajouter ce code à différents fichiers comme suit :

Index.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>

Regardez cette vidéo :

Comme vous pouvez le voir, vous pouvez naviguer de « Accueil » à « Page suivante » en cliquant sur le bouton.

Nous pouvons maintenant introduire l’opérateur void (0) qui bloque la navigation. Ajoutez ce code à 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>

Regardez cette vidéo lorsque nous appuyons sur le bouton « Cliquez-moi » :

Vous pouvez voir qu’après avoir cliqué sur le bouton, cette alerte : « Bouton cliqué, mais pas de navigation ! » apparaît, mais nous ne passons pas à la page suivante.

Fonctions anonymes auto-exécutables

Une fonction anonyme auto-exécutable ou une expression de fonction immédiatement invoquée (IIFE) est une fonction définie et exécutée après la création. De telles fonctions sont conçues pour créer une portée privée pour les variables qui empêchent ces fonctions de polluer la portée globale.

Jetez un œil à ce code :

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);
}();

Il s’agit d’une fonction auto-exécutable qui additionne tous les nombres de 1 à 10 et affiche les résultats une fois le code exécuté.

Lorsque vous exécutez le code, le résultat sera : « La somme des nombres de 1 à 10 est : 55 ».

Comment combiner JavaScript et Void 0

L’opérateur void n’est pas exclusif à JavaScript car il est disponible dans d’autres langages de programmation comme C et C++. Cependant, l’usage de cet opérateur varie d’une langue à l’autre. Par exemple, void est un type de données dans les langages de programmation C et C++ et non un opérateur.

JavaScript utilise le mot-clé « void » avec le zéro numérique. Vous pouvez utiliser l’opérateur void() pour empêcher un comportement par défaut, tel que la navigation du navigateur vers l’URL suivante. Il s’agit d’un exemple parfait de bloc de code combinant JavaScript avec l’opérateur void(). 

<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>

Vous pouvez également utiliser l’opérateur void() pour obtenir une valeur primitive non définie. Jetez un œil à ce bloc de code :

const result = void(0);const result = void(0);

Lorsque vous l’exécuterez, vous ne serez pas défini.

Que sont les avantages nuls (0) ?

En JavaScript, nous utilisons l’opérateur void() pour créer des valeurs « vides » ou « non définies ». Voici quelques-uns des avantages de l’utilisation de cet opérateur dans votre code :

  • Empêcher la navigation : nous pouvons utiliser l’opérateur void(0) dans l’attribut href si nous voulons empêcher les navigateurs de naviguer vers une nouvelle page lorsque nous cliquons sur un lien ou un bouton. Ce bloc de code illustre son fonctionnement :
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>
  • Renvoyer des valeurs non définies à partir de fonctions : en tant que développeur, vous pouvez utiliser l’opérateur void () pour renvoyer explicitement undéfini lorsque vous souhaitez une cohérence du code dans votre application. Découvrez ce bloc de code :
function myFunction() {
    // do something
    return void(0);
}
  • Évitez l’affectation « non définie » : vous pouvez utiliser void () de telle manière que « non définie » soit équivalente au « résultat ». Vous pouvez également l’utiliser comme choix stylistique. Ce bloc de code montre comment y parvenir :
let result = void(0);
  • Rendre le code plus lisible : la lisibilité du code n’est pas quelque chose que nous devrions ignorer, en particulier lorsqu’il s’agit d’applications volumineuses. Vous pouvez utiliser void() lorsque vous souhaitez explicitement supprimer la valeur de retour et faire savoir aux autres développeurs que la fonction ne renverra rien. Ce bloc de code montre comment y parvenir :
function myFunction() {
  // Do something...
  return void(0);
}

Risques de sécurité potentiels de vide (0)

Même si void (0) est utile dans divers cas en JavaScript, il peut aussi s’avérer dangereux s’il n’est pas utilisé correctement. Voici quelques-uns des cas où void (0) peut être utilisé de manière malveillante :

  • Vulnérabilités d’injection de script : il existe des risques potentiels d’attaques par injection de script si la valeur transmise à l’opérateur void () n’est pas nettoyée et validée. Un bon exemple est lorsque cette valeur est générée dynamiquement en fonction de l’entrée de l’utilisateur. 
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>

Un tel bloc de code permet aux utilisateurs d’injecter du code malveillant.

  • Détournement de clics : les attaquants peuvent utiliser des opérateurs vides pour créer des couches transparentes/invisibles sur une page Web. Ces attaquants utiliseront ensuite ces couches pour inciter les utilisateurs à cliquer sur des liens et des boutons malveillants.
  • Peut être utilisé pour contourner la politique de sécurité du contenu (CSP) : la plupart des propriétaires de sites Web utilisent CSP pour empêcher les attaques de scripts intersites (XSS). Vous pouvez utiliser CSP pour restreindre la nature des scripts et des ressources que vos pages Web doivent charger. Cependant, l’utilisation de l’opérateur void() peut entrer en conflit avec de telles mesures car il charge même les scripts non autorisés par la politique de sécurité du contenu.

Alternatives à annuler (0)

La technologie ne cesse d’évoluer, tout comme la programmation. Certaines personnes considèrent void (0) comme un opérateur obsolète. Voici quelques-unes des alternatives utilisées par les développeurs modernes :

  • Utilisez event.preventDefault() : Vous pouvez utiliser event.preventDefault() pour empêcher l’action d’un événement de se produire. Une telle déclaration peut empêcher les utilisateurs de soumettre un formulaire ou de naviguer vers la page suivante.

Ces extraits de code montrent comment utiliser event.preventDefault :

#html
<a href="#" onclick="event.preventDefault()">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
  • Utilisez # comme valeur href : différentes pages d’une application sont liées entre elles pour une navigation facile. L’utilisation de # comme href garantit que les utilisateurs restent sur la même page. Vous pouvez utiliser cette approche avec event.prevetDefault() pour empêcher votre page Web de défiler vers le haut. Voici comment y parvenir :
#html

<a href="#">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
  event.preventDefault();
  window.scrollTo(0, 0);
});
  • Utiliser null : vous pouvez renvoyer une valeur nulle au lieu de non définie. Voici comment y parvenir :
let result = null;

FAQ

Qu’est-ce que JavaScript ?

JavaScript est un langage de programmation principalement utilisé dans le développement front-end. Cependant, ce langage est utilisé dans le développement back-end avec des frameworks tels que Node.js. JavaScript est principalement utilisé avec d’autres technologies frontales telles que CSS et HTML pour ajouter de l’interactivité aux pages Web.

Qu’est-ce que JavaScript Void 0 ?

JavaScript Void 0 est un opérateur utilisé pour empêcher l’action par défaut de se produire. Par exemple, vous pouvez utiliser void (0) pour empêcher la navigation lorsqu’un utilisateur clique sur un lien ou un bouton. Lorsqu’un lien provenant d’un code avec void (0) est cliqué, le navigateur tente de naviguer mais les résultats sont évalués comme indéfinis.

Existe-t-il des alternatives à void (0) ?

Oui. La plupart des développeurs modernes utilisent des écouteurs d’événements au lieu de void (0) dans leur code. Cette approche facilite la gestion de diverses fonctions et évite les comportements par défaut dans les codes sources.

L’utilisation de void (0) est-elle sûre ?

Vous pouvez utiliser void (0) pour empêcher le comportement par défaut et avec des fonctions auto-exécutables. Cependant, void (0) peut être dangereux si vous ne l’utilisez pas consciemment dans votre code. Par exemple, un tel opérateur peut faciliter l’injection de code malveillant s’il est appliqué aux entrées de l’utilisateur.

Conclusion

JavaScript est un langage de programmation très vaste et vous devrez peut-être prendre du temps avant de maîtriser la plupart de ses concepts.

Nous avons enseigné ce qu’est l’opérateur void (0), son importance, ses cas d’utilisation et ses alternatives. Vous comprenez également maintenant comment combiner JavaScript et void(0) les risques potentiels que vous êtes susceptibles de rencontrer lorsque vous utilisez cet opérateur.
Vous pouvez également explorer certains des meilleurs environnements d’exécution JavaScript pour une meilleure exécution du code.