Variables en JavaScript sont essentielles pour stocker et traiter des données. Il est important de comprendre où ces variables sont valables et quelles parties de ton code elles peuvent accéder. Étant donné les différents types de variables – globales et locales – comprendre le « Scope » (zone de visibilité) est fondamental. Plongeons donc et découvrons ce qu'il en est des variables globales et locales.
Principales conclusions
- Les variables globales sont accessibles partout dans le code, tandis que les variables locales ne sont visibles que dans leur fonction.
- Définir une variable en dehors d'une fonction la rend globale, tandis que la définir dans une fonction la rend locale.
- Pour une structure claire et maintenable du code, il est avantageux de déclarer les variables globales au début du script.
Guide étape par étape
Définition des variables et leur visibilité
Dans un premier temps, examinons comment tu peux créer une variable et ce que signifie sa visibilité. Lorsque tu déclares une variable en dehors de toute fonction, comme dans l'exemple suivant, celle-ci est globale.
Nous définissons ici une variable globale appelée maVariable.
Création de fonctions avec des variables locales
Ensuite, nous allons créer deux fonctions. Nous appellerons une fonction localeFunktion, dans laquelle nous allons créer une variable locale. Cette variable n'est visible que dans la fonction. Définissons notre fonction.
Dans la fonction localeFunktion, tu crées une variable locale localeV avec la valeur 5 et tu la sors.
Appel des fonctions
Maintenant, nous voulons appeler la fonction localeFunktion pour afficher le nombre 5. Après avoir appelé la fonction dans le code, la sortie est la suivante:
Test de la visibilité des variables locales
Nous allons maintenant essayer d'utiliser la variable localeV dans une autre fonction. Tu verras que cela ne fonctionne pas. Faisons un appel à l'autre fonction et voyons ce qui se passe.
Nous obtenons une erreur car la variable localeV n'est visible que dans la fonction localeFunktion.
Vérification des erreurs dans la console
Pour mieux comprendre pourquoi l'erreur se produit, examinons le code dans la console. Avec un clic droit et en sélectionnant « Inspecter », tu peux ouvrir l'explorateur DOM et la console pour analyser l'erreur.
Il est affiché que localeV est undefined. Cela renforce l'idée que la variable n'existe pas en dehors de sa fonction.
Définir une variable globale
Créons maintenant une variable globale que nous pourrons utiliser dans les deux fonctions. Nous l’appellerons variableGlobale et lui donnerons une valeur textuelle simple.
Cette variable globale peut maintenant être appelée dans les deux fonctions, et la sortie sera la même. Testons cela.
Définition des variables et ordre d'appel
Il est important de noter que l'ordre des définitions de variables et de fonctions est crucial. Si tu crées une variable globale en dessous de son utilisation, cela entraînera un problème undefined.
Cela est dû au fait que la fonction ayant besoin de la variable globale l'appelle avant sa définition. Pour éviter cela, il est conseillé de définir les variables globales tout en haut du code.
En savoir plus sur les variables locales et leur utilisation
Maintenant, nous allons définir à nouveau une variable locale dans une autre fonction. Ici, nous l'appellerons variableLocale et nous lui assignerons la valeur 12.
Nous pouvons également utiliser cette variable locale, mais seulement à l'intérieur de sa propre fonction, pas dans d'autres. Si tu utilises les deux variables locales, cela peut apporter de la patience et de l’ordre dans tes programmes, selon leur complexité.
Résumé des concepts
Tu as maintenant compris les concepts fondamentaux concernant la visibilité et le champ d’application des variables en JavaScript. Les variables globales sont visibles pour toutes les fonctions, tandis que les variables locales n'existent que dans leur fonction. Il est conseillé de définir les variables globales à un endroit central dans le code pour améliorer la lisibilité et la maintenabilité.
Résumé – La visibilité des variables en JavaScript
En résumé, tu as appris que la manière dont tu définis des variables a un impact direct sur leur visibilité et leur champ d'application. Fais toujours attention à l'endroit où tu places tes variables pour éviter les erreurs.
Questions fréquentes
Qu'est-ce que les variables globales?Les variables globales sont des variables qui sont déclarées en dehors des fonctions et sont donc accessibles dans l'ensemble du script.
Qu'est-ce que les variables locales?Les variables locales sont des variables qui sont créées à l'intérieur d'une fonction et ne sont visibles que dans cette fonction.
Comment puis-je mieux utiliser les variables globales?Il est recommandé de définir les variables globales au début du script pour garantir une structure claire et une meilleure maintenabilité.
Puis-je utiliser des variables locales en dehors de leur fonction?Non, les variables locales ne sont visibles que dans la fonction dans laquelle elles ont été définies.
Comment gérer les erreurs undefined?Fais attention à l'ordre dans lequel tu définis tes variables et fonctions pour t'assurer que les variables nécessaires sont définies avant leur utilisation.
