Scope et Closures en JavaScript Expliqué avec des exemples

Le scope et les closures sont deux concepts fondamentaux en JavaScript qui permettent de comprendre comment les variables et les fonctions interagissent les unes avec les autres. Dans cet article, nous allons explorer ces notions en détail, avec des exemples concrets pour illustrer leur fonctionnement.

Présentation de Scope en JavaScript

La portée d’une variable est la partie du programme dans laquelle elle est disponible pour être utilisée. Les variables JavaScript ont une portée lexicale, ce qui signifie que nous pouvons déterminer la portée d’une variable à partir de l’endroit où elle est déclarée dans le code source.

Il existe plusieurs types de portées en JavaScript, notamment la portée globale, la portée des modules et la portée des fonctions. La portée globale est la portée la plus large, elle est partagée par tout le code. La portée des modules est spécifique à chaque module et la portée des fonctions est spécifique à chaque fonction.

Portées et fonctions imbriquées

Les fonctions imbriquées sont des fonctions qui sont définies à l’intérieur d’autres fonctions. Les variables déclarées dans une fonction imbriquée sont accessibles uniquement à l’intérieur de cette fonction.

Voici un exemple de fonction imbriquée :

function externe() { var x = 10; function interne() { var y = 20; console.log(x); // 10 console.log(y); // 20 } interne(); } externe();

Dans cet exemple, la variable x est déclarée dans la fonction externe et est accessible à l’intérieur de la fonction interne. La variable y est déclarée dans la fonction interne et est accessible uniquement à l’intérieur de cette fonction.

Portée de let, const et var en JavaScript

Les mots-clés let, const et var sont utilisés pour déclarer des variables en JavaScript. La portée de ces variables est différente en fonction du mot-clé utilisé.

Les variables déclarées avec var ont une portée fonctionnelle, ce qui signifie qu’elles sont accessibles à l’intérieur de la fonction dans laquelle elles sont déclarées.

Les variables déclarées avec let et const ont une portée de bloc, ce qui signifie qu’elles sont accessibles uniquement à l’intérieur du bloc dans lequel elles sont déclarées.

Voici un exemple de la différence entre var et let :

if (true) { var x = 10; let y = 20; } console.log(x); // 10 console.log(y); // ReferenceError: y is not defined

Dans cet exemple, la variable x est déclarée avec var et est accessible à l’extérieur du bloc if. La variable y est déclarée avec let et est inaccessible à l’extérieur du bloc if.

Les fermetures en JavaScript

Une fermeture est une fonction qui a accès à son environnement lexical, même lorsque la fonction est appelée à l’extérieur de cet environnement.

Voici un exemple de fermeture :

function externe() { var x = 10; return function interne() { console.log(x); // 10 } } var f = externe(); f();

Dans cet exemple, la fonction interne a accès à la variable x, même lorsque la fonction externe a terminé son exécution.

Exemples de fermetures en JavaScript

Les fermetures sont utilisées dans de nombreux cas en JavaScript, notamment pour :

• Les callbacks
• Le stockage de l’état
• Les méthodes privées
• Les gestionnaires d’événements

Voici un exemple de callback :

function externe() { var x = 10; return function interne() { console.log(x); // 10 } } var f = externe(); setTimeout(f, 1000);

Dans cet exemple, la fonction interne est appelée après 1 seconde, mais elle a toujours accès à la variable x.

Conclusion

Le scope et les closures sont des concepts fondamentaux en JavaScript qui permettent de comprendre comment les variables et les fonctions interagissent les unes avec les autres. Les fermetures sont des fonctions qui ont accès à leur environnement lexical, même lorsque la fonction est appelée à l’extérieur de cet environnement.

En comprenant ces notions, vous pourrez écrire des codes plus efficaces et plus robustes.

FAQ

Qu’est-ce que le scope en JavaScript ?

Le scope est la partie du programme dans laquelle une variable est disponible pour être utilisée.

Qu’est-ce qu’une fermeture en JavaScript ?

Une fermeture est une fonction qui a accès à son environnement lexical, même lorsque la fonction est appelée à l’extérieur de cet environnement.

Quels sont les différents types de scope en JavaScript ?

Il existe plusieurs types de scope en JavaScript, notamment la portée globale, la portée des modules et la portée des fonctions.

Quelle est la différence entre var et let en JavaScript ?

Les variables déclarées avec var ont une portée fonctionnelle, tandis que les variables déclarées avec let ont une portée de bloc.

Quels sont les cas d’utilisation des fermetures en JavaScript ?

Les fermetures sont utilisées dans de nombreux cas en JavaScript, notamment pour les callbacks, le stockage de l’état, les méthodes privées et les gestionnaires d’événements.

À lire aussi sur le site

• Avec Muse Spark, Meta ambitionne de rattraper son retard face à OpenAI et Anthropic
• Veo 3.1 : Google Vids innove avec la création automatique de clips vidéo et d’avatars IA
• Gemini ambitionne d’accéder à vos échanges réalisés avec ChatGPT et Claude