Comment déclarer, interagir et étendre des variables en JavaScript

0
232

Les variables sont l’un des blocs fondamentaux de tout langage de programmation, la façon dont chaque langage définit la façon dont nous déclarons et interagissons avec les variables peut faire ou défaire un langage de programmation. Cela signifie que chaque développeur doit être capable de comprendre comment travailler efficacement avec les variables, leurs règles et leurs particularités. Dans le didacticiel d’aujourd’hui, nous allons apprendre à déclarer, interagir et définir des variables dans JavaScript. Nous présenterons de nouveaux concepts et des mots clés JavaScript importants tels que var, let et const. Alors, commençons.

Déclaration des variables

De nos jours, JavaScript a trois mots-clés différents pour déclarer une variable – var, let et, const. Chacun a ses propres propriétés et particularités. Commençons par faire un simple tableau de comparaison des trois mots-clés, puis plongeons dans les détails.

Ne vous inquiétez pas si pour le moment vous n’êtes pas tout à fait sûr de ce que nous entendons par portée, levage ou l’un des autres attributs. Nous allons les couvrir en détail ensuite.

Portée variable

La portée en JavaScript fait référence au contexte (ou à une partie) du code qui détermine l’accessibilité (visibilité) des variables. En JavaScript, nous avons deux types de portée, local , et global. Bien que la portée locale puisse avoir des significations différentes.

Passons en revue les définitions en donnant des exemples du fonctionnement de la portée. Disons que vous définissez une variable message:

Comme vous pouvez vous y attendre, la variable message utilisé dans le console.log existerait et aurait la valeur Hello World. Pas de doute là-bas, mais que se passe-t-il si on change un peu où l’on déclare la variable:

Oups, on dirait que nous l’avons cassé, mais pourquoi? Eh bien, le if crée une portée de bloc locale, et comme nous avons utilisé «const», la variable n’est déclarée que pour cette portée de bloc et n’est pas accessible de l’extérieur.

Parlons un peu plus des étendues de bloc et de fonction.

Bloquer la portée

Un bloc est essentiellement une section de code (zéro ou plusieurs instructions) qui est délimitée par une paire d’accolades et peut éventuellement être étiquetée.

Comme nous l’avons déjà discuté de l’utilisation de let et const nous permet de définir des variables qui vivent dans la portée du bloc. Ensuite, nous allons créer des exemples très similaires en utilisant différents mots clés pour générer de nouveaux champs d’application:

Expliquons celui-ci car il peut sembler un peu étrange au début. Dans notre périmètre externe, nous définissions la variablex1avec une valeur de1. Ensuite, nous avons créé une nouvelle portée de bloc en utilisant simplement des accolades, c’est étrange, mais totalement légal dans JavaScript, et dans cette nouvelle portée, nous avons créé une nouvelle variable (distincte de celle de la portée externe) également nomméex1. Mais ne vous y trompez pas, il s’agit d’une toute nouvelle variable, qui ne sera disponible que dans cette étendue.

Même exemple maintenant avec une portée nommée:

L’exemple «while», mais n’exécutez pas ce code ci-dessous. Je vous expliquerai pourquoi bientôt.

Pouvez-vous deviner ce qui ne va pas avec le code ci-dessus? Et que se passerait-il si vous l’exécutiez? Laisse-moi expliquer, x3 comme déclaré dans la portée externe est utilisé pour la comparaison while x3 === 1, normalement dans l’instruction while, je pourrai réattribuer x3 une nouvelle valeur et quittez la boucle. Cependant, alors que nous déclarons un nouveaux3 dans la portée du bloc, nous ne pouvons pas changer x3 de la portée extérieure, et donc la condition «while» sera toujours évaluée à true produire une boucle infinie qui bloquera votre navigateur, ou si vous utilisez un terminal pour l’exécuter sur NodeJS imprimera beaucoup de2.

La correction de ce code particulier peut être délicate à moins que vous ne renommiez réellement l’une ou l’autre des variables.

Jusqu’à présent, dans notre exemple, nous avons utilisé const, mais exactement le même comportement se produirait avec let. Cependant, comme nous l’avons vu dans notre tableau de comparaison, le mot clévar est en fait la portée de la fonction, alors qu’est-ce que cela signifie pour nos exemples? Eh bien, jetons un œil:

Incroyable! Même si nous avons re-déclaré x4 à l’intérieur de la portée, il a changé la valeur en2sur la lunette intérieure ainsi que sur la lunette extérieure. Et c’est l’une des différences les plus importantes entre let,const, etvar et fait généralement l’objet (d’une manière ou d’une autre) de questions d’entrevue.

Portée de la fonction

Une portée de fonction est en quelque sorte également une portée de bloc, donc let et constse comporterait de la même manière que dans nos exemples précédents. Cependant, les étendues de fonction encapsulent également les variables déclarées avec var. Mais voyons que continuer avec notre xn exemples:

const ou let exemple:

Exactement comme nous nous y attendions, et maintenant avec var:

Dans ce scénario, «var» fonctionnait de la même manière que let et const. Aussi:

Comme on peut le voir, var les déclarations n’existent que dans la fonction dans laquelle elles ont été créées et ne sont pas accessibles de l’extérieur. Mais il y a plus à cela, comme toujours JS a évolué et de nouveaux types de portées ont été créés.

Portée du module

Avec l’introduction de modules dans ES6, il était important que les variables d’un module n’affectent pas directement les variables d’autres modules. Pouvez-vous imaginer un monde où l’importation de modules à partir d’une bibliothèque entrerait en conflit avec vos variables? Même JS n’est pas si compliqué. Ainsi, par définition, les modules créent leur propre portée qui encapsule toutes les variables créées avec var,let ou const, similaire à la portée de la fonction.

Il existe cependant des moyens que les modules fournissent pour exporter des variables afin qu’elles soient accessibles depuis l’extérieur du module, et que j’ai déjà abordé dans un article précédent: Une introduction aux modules JavaScript.

Jusqu’à présent, nous avons parlé de différents types de portées locales, plongeons maintenant dans les globalscopes.

Portée mondiale

Une variable définie en dehors de toute fonction, bloc ou portée de module a une portée globale. Les variables de portée globale sont accessibles de partout dans l’application.

La portée globale peut parfois être confondue avec la portée du module, mais ce n’est pas le cas. Une variable de portée globale peut être utilisée dans les modules, bien que cela soit considéré comme une mauvaise pratique et pour de bonnes raisons.

Comment feriez-vous pour déclarer une variable globale? Cela dépend du contexte, c’est différent sur un navigateur d’une application NodeJS. Dans le contexte du navigateur, vous pouvez faire quelque chose d’aussi simple que:

Ou en utilisant l’objet window:

Il y a certaines raisons pour lesquelles vous voulez faire quelque chose comme ça, cependant, soyez toujours prudent lorsque vous le faites.

Lunettes de nidification

Comme vous l’avez probablement deviné, il est possible d’imbriquer des étendues, ce qui signifie que vous pouvez créer une étendue dans une autre étendue, et c’est une pratique très courante. Ajoutez simplement un if déclaration à l’intérieur d’une fonction. Alors, voyons un exemple:

Portée lexicale

D’une certaine manière, nous utilisions déjà la portée lexicale, même si nous n’en savions pas grand-chose. La portée lexicale signifie simplement que les autres portées ont accès aux variables définies dans les portées externes.

Voyons cela avec un exemple:

Cela semble plus étrange que ce que c’est, alors expliquons-le. La fonctionouterScope déclare une variablenameavec valeurJuan et une fonction nommée innerScope. Ce dernier ne déclare aucune variable pour sa propre portée mais utilise la variable name déclaré dans la portée de la fonction externe.

Quand outerScope()est appelé, il renvoie une référence au innerScope function, qui est appelée ultérieurement à partir de la portée la plus externe. Lorsque vous lisez ce code pour la première fois, vous ne savez peut-être pas pourquoi innerScope aurait console.log la valeur Juan comme nous l’appelons à partir de la portée globale, ou portée du module, où name n’est pas déclaré.

La raison pour laquelle cela fonctionne est grâce aux fermetures JavaScript. Les fermetures sont un sujet à part entière et vous pouvez en savoir plus à ce sujet dans la documentation MDN.

Levage

Le levage en termes de JavaScript signifie qu’une variable est créée en mémoire pendant la phase de compilation, et qu’elle peut donc être utilisée avant d’être déclarée. Cela semble très déroutant, voyons mieux cela dans le code.

Voici à quoi ressemblerait un flux normal:

Comme prévu, cela fonctionne, mais que pensez-vous de ce qui suit:

Attends attends…. quoi? Aussi fou que cela puisse paraître, puisque la fonction est affectée à la mémoire avant que le code ne s’exécute réellement, la fonction hoistedDisplayName est disponible avant sa définition réelle, au moins en termes de lignes de code.

Les fonctions ont cette propriété particulière, mais font également des variables déclarées avecvar. Voyons un exemple:

Le fait que la variable soit « créée » avant sa définition réelle dans le code ne signifie pas que sa valeur est déjà affectée, c’est pourquoi lorsque nous faisons le console.log(x8) nous n’obtenons pas d’erreur indiquant que la variable n’est pas déclarée, mais que la variable a une valeur undefined. Très intéressant, mais que se passe-t-il si nous utilisons let ou const? Souvenez-vous que dans notre tableau, ils ne partagent pas cette propriété.

Cela a jeté une erreur.

Le levage est une propriété moins connue des variables JavaScript, mais c’est aussi une propriété importante. Assurez-vous de bien comprendre les différences, c’est important pour votre code, et cela peut être un sujet pour une question d’entretien.

Réaffectation des variables

Cette rubrique couvre spécifiquement les variables déclarées avec le mot-clé const. Une variable déclarée avec const ne peut pas être réaffecté, ce qui signifie que nous ne pouvons pas changer sa valeur pour une nouvelle, mais il y a une astuce. Voyons quelques exemples:

Comme nous nous y attendions, nous ne pouvons pas changer la valeur d’une constante, ou pouvons-nous?

Avons-nous juste changé la valeur d’un const valeur? La réponse courte est non. Notre constante c2 fait référence à un objet avec une propriété name. c2 est une référence à cet objet, c’est sa valeur. Quand nous faisons c2.name nous prenons vraiment le pointeur vers le c2 objet et accéder à la propriété à partir de là. Ce que nous changeons lorsque nous le faisons c2.name est la valeur de la propriété name dans l’objet, mais pas la référence stockée dans c2, Et ainsi c2 est resté constant bien que la valeur de la propriété soit maintenant différente.

Voyez ce qui se passe lorsque nous essayons de mettre à jour la valeur différemment:

Même si l’objet a le même aspect, nous créons en fait un nouvel objet { name: 'Gera' } et en essayant d’attribuer ce nouvel objet à c3, mais nous ne pouvons pas car il a été déclaré comme constant.

Aujourd’hui, j’ai couvert le sujet des déclarations de variables et de la portée en JavaScript. C’est un sujet très important qui peut expliquer de nombreuses situations étranges dans notre code. C’est une compétence incontournable pour tous les développeurs JavaScript.

Ce article a été initialement publié le Flux de code en direct par Juan Cruz Martinez (Twitter: @bajcmartinez), fondateur et éditeur de Live Code Stream, entrepreneur, développeur, auteur, conférencier et faiseur de choses.

Flux de code en direct est également disponible sous forme de newsletter hebdomadaire gratuite. Inscrivez-vous pour recevoir des mises à jour sur tout ce qui concerne la programmation, l’IA et l’informatique en général.

Pssst, hé toi!

Souhaitez-vous recevoir GRATUITEMENT la newsletter technologique quotidienne la plus impertinente, dans votre boîte de réception? Bien sûr que vous faites: inscrivez-vous à Big Spam ici.