Lorsque nous apprenons un langage de programmation, plusieurs concepts de base apparaissent, tels que la déclaration de variables, et ils sont si simples que nous pouvons commencer à les utiliser sans aucune connaissance de leur fonctionnement.
Je sais ce que vous avez pensé: "Pourquoi perdez-vous du temps à nous écrire à ce sujet?"
Parce que je pense que cela vaut la peine de consacrer quelques minutes à mieux comprendre ces éléments, quelle est leur signification et comment les utiliser. Cela vous aidera à éviter certaines erreurs courantes et à mieux écrire le code.
Dans cet article, nous nous concentrerons sur la façon de stocker des données en JavaScript.
Var
"Il était une fois dans une galaxie lointaine ..." la seule option pour définir des variables en JavaScript était d'utiliser le mot-clé var, et c'était suffisant pour manipuler les données dans le code. Mais avec l'introduction de la norme ES6, certaines des bizarreries et des faiblesses de l'ancien JS sont devenues assez évidentes:
- Portée: le mot-clé var vous permet de définir des variables uniquement dans la portée globale et locale (ou dans la portée d'une fonction). Peu importe le nombre de blocs de code imbriqués dont vous disposez, il n'y a que ces deux possibilités.
- Constantes: si vous voulez définir quelque chose qui ne changera pas pendant l'exécution du code, vous ne pouvez compter que sur le bon sens des développeurs. Nous pouvons utiliser certaines conventions utiles pour clarifier le sens (par exemple, les majuscules), mais rien ne garantit que le sens ne change pas.
- Remplacement des variables: vous pouvez répéter la déclaration de la même variable autant de fois que vous le souhaitez (dans la même étendue), ce qui est un peu déroutant si vous souhaitez conserver les variables uniques.
Définitions
Avant de commencer avec les éléments techniques, introduisons quelques définitions générales:
Une variable est un «conteneur» dans lequel des données réutilisables sont stockées (très trivial).
Les identificateurs sont des noms de variables (également très triviaux).
Un bloc est un morceau de code séparé par une paire d'accolades (
ccskrf ), par exemple: if, for, function et. etc.
Portée , détermine la visibilité des variables dans le code. Si vous avez des doutes, demandez-vous: "Où est ma variable visible dans le code?"
REMARQUE Veuillez ne pas confondre la portée avec le contexte d'exécution , qui est différent.** Contexte (ou contexte d'exécution) ** est l'environnement dans lequel le code JavaScript est exécuté. Pour simplifier, on peut dire que le
contexte est l'objet auquel appartient le code, et c'est le mot-clé qui s'y réfère. Alors demandez-vous: «À quel objet cela fait-il référence?»
Supposons maintenant que notre développeur soit très passionné par Star Wars (ce qui est bien), mais se méfie des nouvelles normes telles que ES6 (qui est mauvais), bien qu'il existe depuis un certain temps. Par conséquent, il préfère écrire son code dans l'ancien style ES5, et cela ressemblera à ceci:
console.log("I am a %s", jedi); var jedi = "Ani";
Comme vous pouvez le voir, il existe trois blocs de code (y compris global), mais seulement deux étendues. Cela est dû au fait que le code entre crochets ne crée pas de portée. La console émettra "Je suis Dark Vador" deux fois, puis "Je suis Ani" globalement.
Notez également que la même variable est déclarée deux fois de suite à l'intérieur de la fonction, puis à nouveau dans l'instruction if. Cela signifie que nous avons la déclaration de la même variable dans la même portée trois fois, ce qui lève une exception.
Enfin et surtout, la sortie du premier journal est: nous imprimons la valeur de notre variable avant de la définir. Ceci est tout à fait légal avec var et est appelé "levage".
La "montée" suppose que les variables et fonctions déclarées sont physiquement déplacées au début de votre code. Techniquement, il existe des déclarations de variables et de fonctions qui sont stockées en mémoire au stade de la compilation, mais restent dans le code exactement là où vous les avez écrites. L'importance fondamentale d'un ascenseur est qu'il vous permet d'utiliser des fonctions avant de les déclarer dans votre code.
Vous pouvez en lire plus
ici .
Dans notre exemple, la déclaration de la variable "jedi" est placée en mémoire et initialisée à la valeur par défaut (non définie).
Soit
Pour le moment, notre développeur comprend qu'ES6 n'est pas si mal, et il décide de laisser une chance:
console.log("I am a %s", jedi); let jedi = "Ani";
Mais il se rend vite compte qu'il ne peut pas simplement changer le mot-clé var pour le laisser, pour cela, vous devez apporter quelques corrections:
L'augmentation ne fonctionne pas de la même manière: une
variable est placée dans un état appelé Temporal Dead Zone * * et n'est pas initialisée tant que la définition n'est pas évaluée. Dans notre exemple, il renvoie une erreur: erreur de référence.
la réaffectation est interdite, la définition d'une variable de portée doit être unique. Lorsque vous essayez d'obtenir une erreur: SyntaxError.
L'instruction if est une portée de bloc valide, donc la déclaration jedi qu'elle contient est unique.
Maintenant, le code devrait être comme ceci:
let jedi = "Ani"; console.log("I am a %s", jedi);
Const
Maintenant que vous savez tout sur let, il vous sera facile de vous présenter
const . En substance, nous pouvons dire que const est similaire à let, mais vous ne pouvez pas réaffecter une autre valeur. Vous devez également savoir que l'affectation n'est autorisée que lors des déclarations const.
function useTheForce(comeToTheDarkSide) { const jedi = "Yoda"; if (true) { jedi = "Darth Yoda"; console.log("I am %s", jedi);
Supposons que dans notre exemple, "jedi" soit une constante avec la valeur "Yoda", si nous essayons de changer la valeur à l'intérieur de l'instruction if, cela nous donnera une erreur TypeError, et cela est compréhensible car Yoda ne rejoindra jamais le côté obscur.
Conclusion
Lorsqu'il est impossible d'exprimer un concept avec des mots dans des langues, un nouveau concept est introduit pour combler le vide. Ceci est correct pour l'anglais (
lien. ), L'italien, l'espéranto, l'ewokese (je suppose), etc. Ceci est encore plus vrai pour les langages de programmation tels que JavaScript.
Vous savez maintenant que vous pouvez:
- Déclarez les variables dans la portée du bloc et allouez-leur de la mémoire uniquement lors de l'évaluation du bloc
- Gardez les déclarations de variables uniques dans la portée, en évitant que le développeur ne remplace par erreur la variable utilisée dans une autre partie du code (avec une valeur différente)
- Nous pouvons nous assurer que la variable stockée dans const ne changera à aucun moment.
Mon dernier conseil est d'utiliser const comme choix par défaut. Lorsque vous devez réaffecter une variable, utilisez ** let ** (comme dans les boucles). Et utilisez var quand ... non, vous n'avez plus besoin de var, vraiment
Merci de votre attention.
Questions Javascript rapides
Je suis sur
twitter et
vk