JavaScript - Opérateur void : Un Guide Pour Débutants

Salut à toi, futurs magiciens JavaScript ! Aujourd'hui, nous allons entreprendre un voyage passionnant à la découverte de l'opérateur void en JavaScript. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant – je serai ton guide amical, et nous explorerons ce sujet pas à pas. Alors, prends ta baguette virtuelle (alias ton clavier) et plongeons dedans !

Qu'est-ce que l'Opérateur void ?

Avant de rentrer dans les détails, comprenons ce qu'est void. En JavaScript, void est un opérateur qui évalue une expression puis retourne undefined. Tu te demandes peut-être : "Pourquoi diable ferais-je ça ?" Eh bien, mes amis curieux, il a son utilité, et nous allons les découvrir !

Syntaxe

La syntaxe de l'opérateur void est assez simple :

void expression

Ici, expression peut être n'importe quelle expression JavaScript valide. L'opérateur void évaluera cette expression mais retournera toujours undefined.

Regardons un exemple simple :

console.log(void 0); // Output : undefined
console.log(void(0)); // Output : undefined
console.log(void "Hello"); // Output : undefined
console.log(void (2 + 3)); // Output : undefined

Comme tu peux le voir, peu importe l'expression que nous mettons après void, elle toujours retourne undefined. C'est comme un magicien qui peut transformer n'importe quoi en un lapin – sauf que notre magicien transforme tout en undefined !

Importance de la Prééminence de l'Opérateur void

Passons maintenant à quelque chose de plus avancé – la prééminence de l'opérateur void. En JavaScript, les opérateurs ont différents niveaux de prééminence, ce qui détermine l'ordre dans lequel ils sont évalués.

L'opérateur void a une très haute prééminence. Cela signifie qu'il sera évalué avant la plupart des autres opérateurs. Voici un exemple :

let x = 1;
console.log(void x === undefined); // Output : true
console.log(void (x = 5)); // Output : undefined
console.log(x); // Output : 5

Dans cet exemple, void x === undefined est évalué comme (void x) === undefined, pas comme void (x === undefined). L'opérateur void s'applique à x d'abord, retournant undefined, qui est ensuite comparé à undefined.

Dans la deuxième ligne, même si nous affectons 5 à x, l'opérateur void retourne toujours undefined. Cependant, l'affectation a bien lieu, comme nous le voyons dans la troisième ligne.

Qu'est-ce que javascript:void(0) ?

Tu as peut-être rencontré javascript:void(0) dans des balises HTML, en particulier dans les attributs href des balises a. Reprenons cela !

<a href="javascript:void(0);" onclick="console.log('Clicked!')">Clique-moi</a>

Dans cet exemple, javascript:void(0) est utilisé pour empêcher l'action par défaut du lien (qui serait de naviguer vers une nouvelle page). L'événement onclick se déclenchera toujours, mais le lien ne fera rien d'autre.

C'est comme dire à ton chien de "rester" avant de lancer une balle – le chien voit l'action mais ne bouge pas !

L'Opérateur void avec les Fonctions

L'opérateur void peut également être utilisé avec des fonctions. Regardons un exemple :

function greet() {
console.log("Hello, world!");
}

console.log(greet()); // Output : Hello, world! undefined
console.log(void greet()); // Output : Hello, world! undefined

Dans les deux cas, "Hello, world!" est affiché dans la console. Cependant, greet() implicite retourne undefined (comme les fonctions en JavaScript retournent undefined par défaut si aucune instruction return n'est spécifiée), tandis que void greet() retourne explicitement undefined.

L'Opérateur void avec les Expressions de Fonction Immédiatement Invocables (IIFE)

Pour finir, regardons comment void peut être utilisé avec les Expressions de Fonction Immédiatement Invocables (IIFE). Une IIFE est une fonction qui s'exécute dès qu'elle est définie.

void function() {
console.log("Je suis une IIFE !");
}();

// Output : Je suis une IIFE !

Dans ce cas, void est utilisé pour s'assurer que l'expression de fonction est traitée comme une expression, pas une déclaration. C'est comme se déguiser avant de s'introduire à une fête – la fonction s'exécute, mais elle ne reste pas après !

Résumé des Méthodes de l'Opérateur void

Voici un tableau pratique résumant les différentes façons dont nous pouvons utiliser l'opérateur void :

Méthode	Exemple	Description
Utilisation de Base	void 0	Retourne undefined
Avec des Expressions	void (2 + 3)	Évalue l'expression, retourne undefined
En HTML	<a href="javascript:void(0);">	Empêche l'action par défaut du lien
Avec des Fonctions	void greet()	Appelle la fonction, retourne undefined
Avec les IIFE	void function() {}();	Exécute l'IIFE, retourne undefined

Et voilà, les amis ! Nous avons fait le tour du pays de void, de sa syntaxe de base à ses utilisations plus avancées. Souviens-toi, comme avec n'importe quel outil en programmation, void a ses utilisations spécifiques. Il ne s'agit peut-être pas quelque chose que tu utilises tous les jours, mais comprendre le te rendra un développeur JavaScript plus complet.

Continue à pratiquer, reste curieux, et avant de t'en rendre compte, tu lanceras des sorts JavaScript comme un pro ! Jusqu'à la prochaine fois, bon codage !

Credits: Image by storyset