La plupart du temps, une application JavaScript doit travailler avec des informations. Voici deux exemples :
Une boutique en ligne – les informations peuvent inclure des produits vendus et un panier.
Une application de chat : les informations peuvent inclure des utilisateurs, des messages et bien plus encore.
Les variables sont utilisées pour stocker ces informations.
Une variable est un « stockage nommé » pour les données. Nous pouvons utiliser des variables pour stocker des cadeaux, des visiteurs et d'autres données.
Pour créer une variable en JavaScript, utilisez le mot-clé let .
L'instruction ci-dessous crée (en d'autres termes : déclare ) une variable portant le nom « message » :
laisser un message ;
Maintenant, nous pouvons y insérer des données en utilisant l'opérateur d'affectation = :
laisser un message ; message = 'Bonjour'; // stocke la chaîne 'Bonjour' dans la variable nommée message
La chaîne est désormais enregistrée dans la zone mémoire associée à la variable. Nous pouvons y accéder en utilisant le nom de la variable :
laisser un message ; message = 'Bonjour !'; alerte (message); // affiche le contenu de la variable
Pour être concis, nous pouvons combiner la déclaration et l'affectation des variables en une seule ligne :
let message = 'Bonjour !'; // définit la variable et attribue la valeur alerte (message); // Bonjour!
Nous pouvons également déclarer plusieurs variables sur une seule ligne :
laissez l'utilisateur = 'John', âge = 25, message = 'Bonjour' ;
Cela peut paraître plus court, mais nous ne le recommandons pas. Pour une meilleure lisibilité, veuillez utiliser une seule ligne par variable.
La variante multiligne est un peu plus longue, mais plus facile à lire :
laissez l'utilisateur = 'John'; soit âge = 25 ; let message = 'Bonjour';
Certaines personnes définissent également plusieurs variables dans ce style multiligne :
laissez l'utilisateur = 'John', âge = 25, message = 'Bonjour';
…Ou même dans le style « virgule d’abord » :
laissez l'utilisateur = 'John' , âge = 25 , message = 'Bonjour';
Techniquement, toutes ces variantes font la même chose. C'est donc une question de goût personnel et d'esthétique.
var au lieu de let
Dans les scripts plus anciens, vous pouvez également trouver un autre mot-clé : var au lieu de let :
var message = 'Bonjour';
Le mot-clé var est presque le même que let . Il déclare également une variable mais d'une manière légèrement différente, « à l'ancienne ».
Il existe des différences subtiles entre let et var , mais elles ne nous importent pas encore. Nous les aborderons en détail dans le chapitre Le vieux "var".
Nous pouvons facilement comprendre le concept de « variable » si nous l’imaginons comme une « boîte » pour les données, avec un autocollant portant un nom unique.
Par exemple, la variable message peut être imaginée comme une boîte intitulée "message" avec la valeur "Hello!" dedans :
Nous pouvons mettre n’importe quelle valeur dans la case.
On peut également le changer autant de fois que l'on veut :
laisser un message ; message = 'Bonjour !'; message = 'Monde !'; // valeur modifiée alerte (message);
Lorsque la valeur est modifiée, les anciennes données sont supprimées de la variable :
Nous pouvons également déclarer deux variables et copier les données de l'une dans l'autre.
let hello = 'Bonjour tout le monde !'; laisser un message ; // copie 'Bonjour tout le monde' de bonjour dans le message message = bonjour ; // maintenant deux variables contiennent les mêmes données alerte (bonjour); // Bonjour le monde! alerte (message); // Bonjour le monde!
Déclarer deux fois déclenche une erreur
Une variable ne doit être déclarée qu'une seule fois.
Une déclaration répétée de la même variable est une erreur :
let message = "Ceci" ; // la répétition de 'let' conduit à une erreur let message = "Ça" ; // SyntaxError : 'message' a déjà été déclaré
Nous devrions donc déclarer une variable une fois, puis y faire référence sans let .
Langages fonctionnels
Il est intéressant de noter qu'il existe des langages de programmation dits purement fonctionnels, comme Haskell, qui interdisent de modifier les valeurs des variables.
Dans de tels langages, une fois la valeur stockée « dans la boîte », elle y est pour toujours. Si nous avons besoin de stocker autre chose, le langage nous oblige à créer une nouvelle boîte (déclarer une nouvelle variable). Nous ne pouvons pas réutiliser l'ancien.
Même si cela peut paraître un peu étrange à première vue, ces langages sont tout à fait capables de se développer sérieusement. De plus, il existe des domaines comme les calculs parallèles où cette limitation confère certains avantages.
Il existe deux limitations sur les noms de variables en JavaScript :
Le nom doit contenir uniquement des lettres, des chiffres ou les symboles $ et _ .
Le premier caractère ne doit pas être un chiffre.
Exemples de noms valides :
laissez userName ; laissez test123 ;
Lorsque le nom contient plusieurs mots, camelCase est couramment utilisé. Autrement dit : les mots se succèdent, chaque mot sauf le premier commençant par une lettre majuscule : myVeryLongName .
Ce qui est intéressant, c'est que le signe dollar '$' et le trait de soulignement '_' peuvent également être utilisés dans les noms. Ce sont des symboles réguliers, tout comme les lettres, sans signification particulière.
Ces noms sont valides :
soit $ = 1 ; // déclare une variable avec le nom "$" soit _ = 2; // et maintenant une variable avec le nom "_" alerte ($ + _); // 3
Exemples de noms de variables incorrects :
soit 1a ; // ne peut pas commencer par un chiffre laissez mon nom; // Les tirets '-' ne sont pas autorisés dans le nom
L'affaire compte
Les variables nommées apple et APPLE sont deux variables différentes.
Les lettres non latines sont autorisées, mais déconseillées
Il est possible d'utiliser n'importe quelle langue, y compris les lettres cyrilliques, les logogrammes chinois, etc., comme ceci :
soit имя = '...'; soit 我 = '...';
Techniquement, il n’y a aucune erreur ici. De tels noms sont autorisés, mais il existe une convention internationale préconisant l'utilisation de l'anglais dans les noms de variables. Même si nous écrivons un petit scénario, il peut avoir une longue vie devant lui. Les gens d’autres pays auront peut-être besoin de le lire un jour.
Noms réservés
Il existe une liste de mots réservés qui ne peuvent pas être utilisés comme noms de variables car ils sont utilisés par le langage lui-même.
Par exemple : let , class , return et function sont réservés.
Le code ci-dessous donne une erreur de syntaxe :
soit let = 5 ; // impossible de nommer une variable "let", erreur ! soit retour = 5 ; // Je ne peux pas non plus l'appeler "retour", erreur !
Une affectation sans use strict
Normalement, nous devons définir une variable avant de l'utiliser. Mais autrefois, il était techniquement possible de créer une variable par une simple affectation de valeur sans utiliser let . Cela fonctionne toujours maintenant si nous n'utilisons pas use strict dans nos scripts pour maintenir la compatibilité avec les anciens scripts.
// remarque : pas de "use strict" dans cet exemple nombre = 5 ; // la variable "num" est créée si elle n'existait pas alerte(num); // 5
C'est une mauvaise pratique et provoquerait une erreur en mode strict :
« utiliser strict » ; nombre = 5 ; // erreur : num n'est pas défini
Pour déclarer une variable constante (immuable), utilisez const au lieu de let :
const monAnniversaire = '18.04.1982';
Les variables déclarées à l'aide const sont appelées « constantes ». Ils ne peuvent pas être réaffectés. Une tentative de le faire provoquerait une erreur :
const monAnniversaire = '18.04.1982'; monAnniversaire = '01.01.2001'; // erreur, impossible de réaffecter la constante !
Lorsqu'un programmeur est sûr qu'une variable ne changera jamais, il peut la déclarer avec const pour garantir et communiquer ce fait à tout le monde.
Il existe une pratique répandue consistant à utiliser des constantes comme alias pour les valeurs difficiles à mémoriser et connues avant l'exécution.
Ces constantes sont nommées en majuscules et en traits de soulignement.
Par exemple, créons des constantes pour les couleurs au format dit « web » (hexadécimal) :
constCOULEUR_ROUGE = "#F00" ; const COULEUR_GREEN = "#0F0"; const COULEUR_BLUE = "#00F" ; const COULEUR_ORANGE = "#FF7F00"; // ...quand nous devons choisir une couleur laissez color = COLOR_ORANGE; alerte (couleur); // #FF7F00
Avantages:
COLOR_ORANGE est beaucoup plus facile à retenir que "#FF7F00" .
Il est beaucoup plus facile de mal saisir "#FF7F00" que COLOR_ORANGE .
Lors de la lecture du code, COLOR_ORANGE est bien plus significatif que #FF7F00 .
Quand doit-on utiliser des majuscules pour une constante et quand doit-on la nommer normalement ? Soyons clairs.
Être une « constante » signifie simplement que la valeur d'une variable ne change jamais. Mais certaines constantes sont connues avant l'exécution (comme une valeur hexadécimale pour le rouge) et certaines constantes sont calculées au moment de l'exécution, pendant l'exécution, mais ne changent pas après leur affectation initiale.
Par exemple:
const pageLoadTime = /* temps nécessaire au chargement d'une page Web */;
La valeur de pageLoadTime n'est pas connue avant le chargement de la page, elle est donc nommée normalement. Mais cela reste une constante car cela ne change pas après la mission.
En d’autres termes, les constantes nommées en majuscules ne sont utilisées que comme alias pour les valeurs « codées en dur ».
En parlant de variables, il y a encore une chose extrêmement importante.
Un nom de variable doit avoir une signification claire et évidente, décrivant les données qu'elle stocke.
La dénomination des variables est l’une des compétences les plus importantes et les plus complexes de la programmation. Un coup d'œil aux noms de variables peut révéler quel code a été écrit par un débutant ou par un développeur expérimenté.
Dans un projet réel, la plupart du temps est consacré à modifier et à étendre une base de code existante plutôt qu'à écrire quelque chose de complètement séparé à partir de zéro. Lorsque nous revenons à du code après avoir fait autre chose pendant un certain temps, il est beaucoup plus facile de trouver des informations bien étiquetées. Ou, en d’autres termes, lorsque les variables portent de bons noms.
Veuillez prendre le temps de réfléchir au bon nom pour une variable avant de la déclarer. Cela vous récompensera généreusement.
Voici quelques règles à suivre :
Utilisez des noms lisibles par l'homme comme userName ou shoppingCart .
Éloignez-vous des abréviations ou des noms courts comme a , b et c , à moins que vous ne sachiez ce que vous faites.
Donnez des noms aussi descriptifs et concis. Des exemples de mauvais noms sont data et value . De tels noms ne disent rien. Vous ne pouvez les utiliser que si le contexte du code rend exceptionnellement évident les données ou la valeur auxquelles la variable fait référence.
Mettez-vous d’accord sur les conditions au sein de votre équipe et dans votre esprit. Si un visiteur du site est appelé « utilisateur », nous devrions alors nommer les variables associées currentUser ou newUser au lieu de currentVisitor ou newManInTown .
Cela semble simple ? C’est effectivement le cas, mais créer des noms de variables descriptifs et concis ne l’est pas dans la pratique. Allez-y.
Réutiliser ou créer ?
Et la dernière note. Il existe des programmeurs paresseux qui, au lieu de déclarer de nouvelles variables, ont tendance à réutiliser celles existantes.
En conséquence, leurs variables sont comme des boîtes dans lesquelles les gens jettent différentes choses sans changer leurs autocollants. Qu'y a-t-il à l'intérieur de la boîte maintenant ? Qui sait ? Nous devons nous rapprocher et vérifier.
De tels programmeurs économisent un peu sur la déclaration des variables mais perdent dix fois plus sur le débogage.
Une variable supplémentaire est bonne, pas mauvaise.
Les minificateurs et navigateurs JavaScript modernes optimisent suffisamment le code pour ne pas créer de problèmes de performances. L'utilisation de différentes variables pour différentes valeurs peut même aider le moteur à optimiser votre code.
Nous pouvons déclarer des variables pour stocker des données en utilisant les mots-clés var , let ou const .
let – est une déclaration de variable moderne.
var – est une déclaration de variable à l’ancienne. Normalement, nous ne l'utilisons pas du tout, mais nous aborderons les différences subtiles par rapport à let dans le chapitre L'ancien "var", juste au cas où vous en auriez besoin.
const – est comme let , mais la valeur de la variable ne peut pas être modifiée.
Les variables doivent être nommées de manière à nous permettre de comprendre facilement ce qu'elles contiennent.
importance : 2
Déclarez deux variables : admin et name .
Attribuez la valeur "John" à name .
Copiez la valeur de name vers admin .
Afficher la valeur de admin à l’aide alert (doit afficher « John »).
Dans le code ci-dessous, chaque ligne correspond à l'élément de la liste des tâches.
laissez l'administrateur, le nom ; // peut déclarer deux variables à la fois nom = "Jean" ; administrateur = nom ; alerte( administrateur ); // "John"
importance : 3
Créez une variable avec le nom de notre planète. Comment nommeriez-vous une telle variable ?
Créez une variable pour stocker le nom d'un visiteur actuel d'un site Web. Comment nommeriez-vous cette variable ?
C'est simple :
laissez ourPlanetName = "Terre" ;
Notez que nous pourrions utiliser un nom planet plus court, mais il n'est peut-être pas évident de savoir à quelle planète il fait référence. C'est bien d'être plus verbeux. Au moins jusqu'à ce que la variable soitNotTooLong.
laissez currentUserName = "John";
Encore une fois, nous pourrions raccourcir cela en userName si nous savons avec certitude que l'utilisateur est actuel.
Les éditeurs modernes et la saisie semi-automatique facilitent l'écriture de noms de variables longs. N'économisez pas sur eux. Un nom contenant 3 mots est très bien.
Et si votre éditeur ne dispose pas d'une fonction de saisie semi-automatique appropriée, procurez-vous-en un nouveau.
importance : 4
Examinez le code suivant :
const anniversaire = '18.04.1982'; const âge = someCode (anniversaire);
Ici, nous avons un birthday constant pour la date, ainsi que l' age constant.
L' age est calculé à partir de birthday en utilisant someCode() , ce qui signifie un appel de fonction que nous n'avons pas encore expliqué (nous le ferons bientôt !), mais les détails n'ont pas d'importance ici, le fait est que age est calculé d'une manière ou d'une autre en fonction de l'âge. birthday .
Serait-il correct d'utiliser des majuscules pour birthday ? Pour age ? Ou même pour les deux ?
const ANNIVERSAIRE = '18.04.1982'; // mettre l'anniversaire en majuscule ? const ÂGE = unCode(ANNIVERSAIRE); // mettre l'âge en majuscule ?
Nous utilisons généralement des majuscules pour les constantes « codées en dur ». Ou, en d’autres termes, lorsque la valeur est connue avant l’exécution et directement écrite dans le code.
Dans ce code, birthday est exactement comme ça. Nous pourrions donc utiliser les majuscules pour cela.
En revanche, age est évalué au moment de l’exécution. Aujourd'hui nous avons un âge, un an après nous en aurons un autre. Il est constant dans le sens où il ne change pas lors de l’exécution du code. Mais c'est un peu « moins constant » que birthday : il est calculé, donc il faut garder les minuscules pour cela.