Comment déclarer des variables en JavaScript

Added 2020-01-28

Divulgation des affiliés: En achetant les produits que nous recommandons, vous contribuez à maintenir le site en vie. Lire la suite.

Travailler avec des variables est l'une des premières choses que vous apprenez en tant que programmeur JavaScript. JavaScript est largement utilisé dans le développement Web, il est donc important de bâtir une bonne base de connaissances.

Déclarer une variable en JavaScript est facile car c'est un langage convivial pour les développeurs. Le défi vient avec les mots-clés utilisés pour créer des variables. Il existe trois de ces mots clés et chacun vous donnera un résultat différent.

Si vous connaissez les trois façons de déclarer une variable, vous pouvez prendre les bonnes décisions pour votre application. Examinons ces trois mots clés, comment ils fonctionnent et quand ils sont utilisés.

Trois façons de déclarer une variable JavaScript

Trois mots clés sont utilisés pour déclarer une variable en JavaScript:

• var
• laisser
• const

Il est facile de coder une variable en JavaScript. Par exemple, voici comment le faire en utilisant levar mot-clé:

var myVariable = 15;

Mots clés

Portée

La portée de la variable correspond aux parties de votre programme qui peuvent voir la variable. Certaines variables auront une portée limitée, d'autres sont disponibles pour l'ensemble de votre programme. Les variables disponibles pour l'ensemble de votre programme ont unportée mondiale.

Vous devez connaître les règles de portée. Au fur et à mesure que les programmes grossissent, vous utiliserez plus de variables. La perte de la portée peut entraîner des erreurs dans vos programmes.

Bloquer

Les fonctions créées en JavaScript utilisent des accolades. Le code à l'intérieur des accolades est connu sous le nom debloqueret vous pouvez imbriquer autant de blocs que vous le souhaitez dans une fonction.

Connaître les blocs de code est essentiel pour comprendre le fonctionnement de chaque type de variable. Voici un exemple visuel de blocs utilisant une fonction JavaScript.

function blockTest () {
// Ceci est un bloc
     {
       // Ceci est un bloc imbriqué
     }
};

Dans cet esprit, découvrons les variables JavaScript!

1. Variable JavaScript: var

Lorsque vous déclarez une variable avecvar, la portée de la variable est soit:

• Si déclaré à l'intérieur d'une fonction: la fonction englobante
• Si déclaré en dehors d'une fonction: portée globale

Il s'agit d'une déclaration de variable de base avecvar. Il y a quelques commentaires dans le code pour vous guider à travers ces définitions.

test var = 5; // Déclaration de variable
fonction varTest () {
console.log (test); // Ceci imprime la variable
};
varTest ();
> > 5

Dans cet exemple, la variabletestera été déclaré avecvaret attribué la valeur 5. La fonctionvarTest () imprime la variable dans la console. La sortie de la fonction est 5.

La variable a été déclarée en dehors de la fonction, elle a donc une portée globale. Même si la variabletestern'a pas été déclaré à l'intérieur de la fonction, cela fonctionne très bien.

Si vous modifiez la variable à l'intérieur de la fonction, le programme produit un résultat différent.

test var = 5;
fonction varTest () {
test var = 10;
console.log (test);
};
varTest ();
> > dix

La fonction mise à jour déclare une variabletesterà l'intérieur de la fonction, et la console lit la nouvelle valeur (10). La variable a été déclarée dans une fonction, donc la portée du bloc remplace la portée globale.

Si vous imprimez la variable seule sans exécuter la fonction:

console.log (test);
> > 5

Vous obtenez le résultat de la variable globale.

2. Variable JavaScript: Soit

En utilisantlaisser déclarer des variables leur donne une portée plus spécifique. Variables déclarées à l'aidelaisser sont étendues au bloc dans lequel elles sont déclarées.

Ceci est une fonction avec plusieurs blocs, et cela aidera à montrer la différence entrevar etlaisser.

Voici une fonction qui utilisevar à l'intérieur de plusieurs blocs. Jetez un œil au code et voyez si vous pouvez comprendre ce qui se passe.

fonction varTest () {
test var = 5;
     {
       test var = 10;
       console.log (test);
     }
console.log (test);
};

varTest ();
> > dix
> > dix

Les deux sorties sont 10.

Variables déclarées avecvar sont disponibles pour l'ensemble de la fonction. Le test variable a été déclaré comme 5 dans le premier bloc. Dans le deuxième bloc, la variable a été changée à 10.

Cela a changé la variable pour la fonction entière. Au moment où le programme arrive à la secondeconsole.log ()la variable a été modifiée.

Voici le même exemple avec des commentaires pour suivre la variable:

fonction varTest () {
test var = 5; // Variable créée
     {
       test var = 10; // Variable modifiée, 5 est remplacée
       console.log (test); // dix
     }
console.log (test); // 10, la variable est maintenant 10 pour la fonction entière
};

Voici le même exemple aveclaisser, regardez ce qui se passe à l'intérieur des blocs.

fonction letTest () {
soit test = 5;
     {
       soit test = 10;
       console.log (test);
     }
console.log (test);
};

letTest ();
> > dix
> > 5

Le résultat a changé. Voici le même code avec des commentaires. Appelons le premier bloc "Bloc A" et le deuxième "Bloc B".

fonction letTest () {
soit test = 5; // Variable créée dans le bloc A
     {
       soit test = 10; // Variable créée dans le bloc B, c'est une nouvelle variable
       console.log (test); // Tirages 10
     }
console.log (test); // Imprime 5, puisque nous sommes de retour au bloc A
};

letTest ();
> > dix
> > 5

3. Variable JavaScript: Const

En utilisantconstdéclarer une variable a une portée de bloc commelaisser.

Lorsque vous utilisezconst pour déclarer une variable, la valeur ne peut pas être réaffectée. La variable ne peut pas non plus être redéclarée. Cela devrait être réservé aux variables importantes de votre programme qui ne changent jamais.

Penser àconst comme raccourci pour constant. C'est permanent et ça ne change pas. Si vous venez d'un autre langage de programmation comme Java, vous connaissez peut-être déjà ce concept.

Déclarons unconst variable et l'essayer.

const permanent = 10;

Essayons maintenant d'apporter des modifications à la variable et voyons ce qui se passe. Essayez de changer la valeur de la variable:

const permanent = 20;
> > SyntaxError non interceptée: l'identifiant «permanent» a déjà été déclaré

La valeur ne peut pas être modifiée, JavaScript génère une erreur dans la console. Soyons intelligents et essayons d'utiliser un nouveau mot-clé variable pour changer la valeur:

laissez permanent = 20;
> > SyntaxError non interceptée: l'identifiant «permanent» a déjà été déclaré

Pourtant, pas de chance de changer la variable. Que diriez-vous de la même valeur, avec un nouveau mot-clé?

laissez permanent = 10;
> > SyntaxError non interceptée: l'identifiant «permanent» a déjà été déclaré

Cela ne fonctionne toujours pas. Même si la valeur est la même, essayer de changer le mot-clé générera une erreur.

C'est tout ce qu'il y a à utiliser leconst mot-clé. Enregistrez-le pour les variables spéciales que vous devez protéger dans le programme.

Devenir un expert JavaScript

Ce didacticiel a décomposé les trois mots clés utilisés pour déclarer les variables JavaScript. Vous verrez ces trois types tout au long de votre carrière en développement Web, il est donc important de vous familiariser.