JavaScript est un langage de script polyvalent, employé aussi bien pour le développement côté client (front-end) que côté serveur (back-end). Il permet de générer des contenus dynamiques, d’animer des éléments graphiques et de contrôler la lecture de contenus multimédias.
Ce langage bénéficie d’un écosystème riche, comprenant des centaines de frameworks et de bibliothèques. Il est également, d’après Statista, le langage de programmation le plus répandu parmi les développeurs.
JavaScript intègre divers opérateurs, chacun ayant un rôle spécifique. Cet article se concentre sur l’opérateur `void(0)`, en expliquant sa fonction, son importance, ses utilisations pratiques, ses avantages, les risques potentiels en matière de sécurité et les alternatives disponibles.
Qu’est-ce que l’opérateur `void(0)` ?
Dans le langage courant, le terme « void » signifie « nul » ou « vide ». L’opérateur `void(0)` en JavaScript évalue une expression donnée et retourne la valeur `undefined`. Une fonction qui ne retourne aucune valeur est considérée comme une fonction « void ». L’opérateur `void(0)` est applicable dans de nombreux contextes.
Par exemple, il peut être utilisé pour empêcher un lien de déclencher une navigation, en retournant `undefined` lors d’un clic sur une balise d’ancrage. Dans ce cas, la page ne se recharge pas et aucune action n’est effectuée suite au clic.
Pourquoi utiliser l’opérateur `void` avec `0` ?
L’opérateur `void` peut être utilisé avec toute expression, mais en JavaScript, il est fréquemment associé à la valeur `0`. Voici quelques cas d’utilisation courants de `void(0)` :
Bloquer la navigation
Habituellement, un clic sur un lien entraîne le chargement d’une nouvelle page. Pour illustrer cela, nous allons créer un exemple avec deux fichiers : `index.html` et `nextPage.html`.
Voici le contenu de ces fichiers:
Index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page d'accueil</title>
</head>
<body>
<h2>Bienvenue sur la page d'accueil</h2>
<a href="nextPage.html">Aller à la page suivante (sans `void`)</a>
</body>
</html>
nextPage.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page suivante</title>
</head>
<body>
<h2>Vous êtes sur la page suivante</h2>
<a href="index.html">Retour à la page d'accueil (sans `void`)</a>
</body>
</html>
Dans cet exemple, en cliquant sur le lien, vous passez de la page d’accueil à la page suivante, et inversement.
Maintenant, introduisons l’opérateur `void(0)` pour empêcher cette navigation. Modifiez le fichier `index.html` comme suit :
<!-- Avec l'opérateur `void` -->
<a href="javascript:void(0);" onclick="doSomething()">Cliquez ici</a>
<script>
function doSomething() {
alert("Bouton cliqué, mais pas de navigation !");
}
</script>
En cliquant sur le bouton « Cliquez ici », une alerte « Bouton cliqué, mais pas de navigation ! » s’affiche, mais la navigation vers une autre page n’a pas lieu.
Fonctions anonymes auto-exécutables
Une fonction anonyme auto-exécutable, également appelée expression de fonction immédiatement invoquée (IIFE), est une fonction définie et exécutée immédiatement après sa création. Elle permet de créer une portée privée pour les variables, les protégeant ainsi d’une éventuelle pollution de la portée globale.
Voici un exemple :
void function() {
// Fonction pour calculer la somme des nombres de 1 à n
const calculateSum = () => {
let sum = 0;
for (let i = 1; i <= 10; i++) {
sum += i;
}
return sum;
};
// Appeler la fonction et afficher le résultat dans la console
const result = calculateSum();
console.log("La somme des nombres de 1 à 10 est :", result);
}();
Cette fonction auto-exécutable calcule la somme des entiers de 1 à 10 et affiche le résultat.
L’exécution de ce code produira le résultat suivant : « La somme des nombres de 1 à 10 est : 55 ».
Comment combiner JavaScript et `void(0)`
L’opérateur `void` n’est pas exclusif à JavaScript, il est aussi présent dans d’autres langages comme C et C++. Cependant, son utilisation varie selon le langage. En C et C++, `void` est un type de données, alors qu’en JavaScript, c’est un opérateur.
JavaScript emploie le mot-clé `void` suivi de la valeur numérique zéro. Vous pouvez utiliser `void(0)` pour annuler un comportement par défaut, comme une navigation vers une autre URL. Voici un exemple de code combinant JavaScript et l’opérateur `void()` :
<a href="javascript:void(0);" onclick="maFonction()">Cliquez ici</a>
Vous pouvez également utiliser `void()` pour obtenir la valeur primitive `undefined`. Par exemple :
const resultat = void(0);
Dans ce cas, `resultat` prendra la valeur `undefined`.
Quels sont les avantages de `void(0)` ?
En JavaScript, on utilise `void()` pour créer des valeurs « vides » ou « non définies ». Voici quelques avantages de son utilisation :
- Empêcher la navigation : `void(0)` dans l’attribut `href` empêche le navigateur de changer de page lors d’un clic sur un lien ou un bouton. Exemple :
<a href="javascript:void(0);" onclick="maFonction();">Cliquez ici</a>
- Retourner `undefined` depuis une fonction : Un développeur peut utiliser `void()` pour renvoyer explicitement `undefined`, afin de maintenir la cohérence du code. Exemple :
function maFonction() {
// ...
return void(0);
}
- Éviter l’assignation de `undefined`: `void()` permet d’obtenir la valeur `undefined` et peut être utilisé comme un choix de style. Exemple :
let resultat = void(0);
- Améliorer la lisibilité du code : La clarté du code est essentielle, surtout dans les applications complexes. `void()` peut être utilisé pour signaler qu’une fonction ne renvoie aucune valeur, ce qui améliore la compréhension du code pour les autres développeurs. Exemple :
function maFonction() {
// Faire quelque chose...
return void(0);
}
Risques potentiels de sécurité de `void(0)`
Bien que `void(0)` soit utile dans de nombreux contextes JavaScript, il peut aussi être source de problèmes de sécurité s’il est mal utilisé. Voici quelques scénarios où `void(0)` peut être utilisé de manière malveillante :
- Vulnérabilités d’injection de script : Si la valeur passée à `void()` n’est pas correctement nettoyée et validée, il existe un risque d’injection de code malveillant, surtout si cette valeur est générée dynamiquement à partir de données fournies par l’utilisateur.
<a href="javascript:void(alert('Ceci pourrait être malveillant !'));">Cliquez ici</a>
Ce type de code permet aux utilisateurs d’injecter des scripts malveillants.
- Détournement de clic : Des attaquants peuvent utiliser `void` pour créer des couches transparentes et invisibles sur une page web. Ces couches sont ensuite utilisées pour inciter les utilisateurs à cliquer sur des liens ou des boutons malveillants.
- Contournement de la Politique de Sécurité du Contenu (CSP): La CSP permet de limiter les sources autorisées pour les scripts et ressources chargées par une page web. L’utilisation de `void()` peut contourner ces restrictions en chargeant des scripts non autorisés.
Alternatives à `void(0)`
La technologie évolue constamment, y compris la programmation. Certains considèrent `void(0)` comme un opérateur obsolète. Voici quelques alternatives utilisées par les développeurs modernes :
- Utiliser `event.preventDefault()` : Cette méthode empêche l’action par défaut d’un événement, comme la soumission d’un formulaire ou la navigation vers une autre page.
Voici des exemples d’utilisation de `event.preventDefault` :
#html <a href="#" onclick="event.preventDefault()">Mon Lien</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
- Utiliser `#` comme valeur de `href`: L’utilisation de `#` comme valeur `href` permet de rester sur la même page. Combiné avec `event.preventDefault()`, cela empêche également la page de remonter au sommet.
#html <a href="#">Mon Lien</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
event.preventDefault();
window.scrollTo(0, 0);
});
- Utiliser `null`: Vous pouvez renvoyer `null` au lieu de `undefined`. Exemple :
let resultat = null;
FAQ
Qu’est-ce que JavaScript ?
JavaScript est un langage de programmation principalement utilisé dans le développement front-end. Il est également employé pour le développement back-end avec des environnements comme Node.js. JavaScript permet d’ajouter de l’interactivité aux pages web, en complément du HTML et du CSS.
Qu’est-ce que `void(0)` en JavaScript ?
`void(0)` est un opérateur qui empêche l’exécution d’une action par défaut. Par exemple, il permet d’empêcher la navigation lorsqu’un utilisateur clique sur un lien ou un bouton. Le résultat de l’opération `void(0)` est `undefined`.
Existe-t-il des alternatives à `void(0)` ?
Oui. Les développeurs modernes privilégient l’utilisation d’écouteurs d’événements plutôt que `void(0)`. Cette approche facilite la gestion des différentes actions et évite les comportements par défaut du code source.
L’utilisation de `void(0)` est-elle sécurisée ?
`void(0)` est utile pour empêcher des comportements par défaut et pour les fonctions auto-exécutables. Cependant, il peut être dangereux s’il est mal utilisé, car il peut notamment être exploité pour injecter du code malveillant.
Conclusion
JavaScript est un langage de programmation très vaste qui demande du temps pour être maîtrisé.
Nous avons abordé l’opérateur `void(0)`, son rôle, son importance, ses cas d’utilisation et ses alternatives. Vous comprenez maintenant comment combiner JavaScript et `void(0)`, ainsi que les risques potentiels liés à son utilisation.
Vous pouvez également explorer des environnements d’exécution JavaScript pour optimiser l’exécution de votre code.