Le mot void signifie « espace complètement vide » selon le dictionnaire. Ce terme, lorsqu’il est utilisé en programmation, fait référence à un retour de » rien » – une » valeur vide » pour ainsi dire.
Qu’est-ce que le mot-clé void ?
Quand une fonction est void, cela signifie que la fonction ne retourne rien. Ceci est similaire aux fonctions en JavaScript qui renvoient undefined explicitement, comme ceci:
function und() { return undefined}und()ou implicitement, comme ceci :
function und() {}und()Qu’importe les expressions et les énoncés des fonctions ci-dessus (additionne 2 nombres, trouve la moyenne de 5 nombres, peu importe), aucun résultat n’est retourné.
Nous savons maintenant à quoi sert le mot-clé void. Qu’en est-il de javascript:void(0)?
Qu’est-ce que javascript:void(0)?
Si nous divisons cela, nous avons javascript: et void(0). Examinons chaque partie plus en détail.
javascript:
C’est ce qu’on appelle une Pseudo URL. Lorsqu’un navigateur la reçoit comme valeur de href sur une balise d’ancrage, il interprète le code JS qui suit les deux points ( 🙂 plutôt que de traiter la valeur comme un chemin référencé.
Par exemple :
<a href="javascript:console.log('javascript');alert('javascript')">Link</a>Lorsque l’on clique sur « Link », voici le résultat :
Comme on le voit ci-dessus, le navigateur ne traite pas href comme un chemin référencé. Au lieu de cela, il le traite comme un certain code JavaScript commençant après « javascript : » et séparé par des points-virgules.
void(0)
L’opérateur void évalue des expressions données et renvoie undefined.
Par exemple :
const result = void(1 + 1);console.log(result);// undefined1 + 1 est évalué mais undefined est retourné. Pour confirmer cela, voici un autre exemple:
<body> <h1>Heading</h1> <script> void(document.body.style.backgroundColor = 'red', document.body.style.color = 'white' ) </script></body>Le résultat du code ci-dessus est:
Voici un autre exemple :
console.log(void(0) === undefined)// trueCombinaison de javascript : et void(0)
Parfois, vous ne voulez pas qu’un lien permette de naviguer vers une autre page ou de recharger une page. En utilisant javascript:, vous pouvez exécuter un code qui ne modifie pas la page actuelle.
Ceci, utilisé avec void(0) signifie, ne rien faire – ne pas recharger, ne pas naviguer, ne pas exécuter de code.
Par exemple :
<a href="javascript:void(0)">Link</a>Le mot « Link » est traité comme un lien par le navigateur. Par exemple, il est focalisable, mais il ne permet pas de naviguer vers une nouvelle page.
0 est un argument passé à void qui ne fait rien, et ne renvoie rien.
Un code JavaScript (comme vu ci-dessus) peut également être passé comme argument à la méthode void. Cela fait en sorte que l’élément de lien exécute un peu de code, mais il conserve la même page.
Par exemple :
<a href="javascript:void( document.querySelector('#link').style.color = 'green')">Link</a>Lorsque le bouton est cliqué, voici le résultat :
Avec void, on indique au navigateur de ne rien retourner (ou de retourner undefined).
Un autre cas d’utilisation des liens avec la référence javascript:void(0) est que parfois, un lien peut exécuter du code JavaScript en arrière-plan, et la navigation peut être inutile. Dans ce cas, les expressions seraient utilisées comme arguments passés à void.
Conclusion
Dans cet article simplifié, nous avons appris ce qu’est l’opérateur void, comment il fonctionne et comment il est utilisé avec la pseudo URL javascript: pour les attributs href des liens.
Cela permet de s’assurer qu’une page ne navigue pas vers une autre page ou ne recharge pas la page actuelle lorsqu’on clique dessus.