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 construire une bonne base de connaissances.
Déclarer une variable en JavaScript est facile car il s'agit d'un langage convivial pour les développeurs. Le défi vient avec les mots-clés utilisés pour créer des variables. Il y a 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.
Il existe trois mots clés utilisés pour déclarer une variable en JavaScript :
Il est facile de coder une variable en JavaScript. Par exemple, voici comment le faire en utilisant la var mot-clé :
var maVariable =15 ; Ces nouvelles méthodes ont été établies avec JavaScript ES6. Avant d'apprendre comment ils fonctionnent, il est utile d'avoir des connaissances sur certains termes de programmation courants.
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 une portée globale .
Vous devez connaître les règles de portée. Au fur et à mesure que les programmes grossissent, vous utiliserez plus de variables. Perdre le fil de la portée peut entraîner des erreurs dans vos programmes.
Les fonctions créées en JavaScript utilisent des accolades. Le code à l'intérieur des accolades est connu sous le nom de bloc , et 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.
fonction blockTest(){
// Ceci est un bloc
{
// Ceci est un bloc imbriqué
}
} ; Dans cet esprit, découvrons les variables JavaScript !
Lorsque vous déclarez une variable avec var , la portée de la variable est soit :
Il s'agit d'une déclaration de variable de base avec var . Il y a quelques commentaires dans le code pour vous guider à travers ces définitions.
var test =5 ; //Déclaration des variables
fonction varTest(){
console.log(test); // Cela imprime la variable
} ;
varTest();
>> 5
Dans cet exemple, la variable test a été déclaré avec var et attribué la valeur 5. La fonction varTest() 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 variable test n'a pas été déclaré dans 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.
var test =5 ;
fonction varTest(){
test var =10 ;
console.log(test);
} ;
varTest();
>> 10
La fonction mise à jour déclare une variable test à 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.
Utiliser let déclarer des variables leur donne une portée plus précise. Variables déclarées avec let sont limités au bloc dans lequel ils sont déclarés.
Il s'agit d'une fonction avec plusieurs blocs, et cela aidera à montrer la différence entre var et laissez .
Voici une fonction qui utilise var à 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();
>> 10
>> 10 Les deux sorties sont 10.
Variables déclarées avec var sont disponibles pour l'ensemble de la fonction. La variable test a été déclarée comme 5 dans le premier bloc. Dans le deuxième bloc, la variable a été changée en 10.
Cela a changé la variable pour toute la fonction. Au moment où le programme arrive à la seconde console.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é
console.log(test); // dix
}
console.log(test); // 10, La variable vaut maintenant 10 pour toute la fonction
} ; Voici le même exemple avec let , regardez ce qui se passe à l'intérieur des blocs.
fonction letTest(){
laissez test =5;
{
laissez test =10;
console.log(test);
}
console.log(test);
} ; letTest();
>> 10
>> 5 Le résultat a changé. Voici le même code avec des commentaires. Appelons le premier bloc "Bloc A" et le second "Bloc B".
fonction letTest(){
laissez test =5; // Variable créée dans le bloc A
{
laissez test =10; // Variable créée dans le bloc B, c'est une nouvelle variable
console.log(test); // Impressions 10
}
console.log(test); // Imprime 5, puisque nous sommes de retour au bloc A
} ; letTest();
>> 10
>> 5 Utiliser const pour déclarer qu'une variable a une portée de bloc, tout comme let .
Lorsque vous utilisez const 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.
Pensez à 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 un const variable et essayez-la.
const permanent =10 ; Essayons maintenant d'apporter quelques modifications à la variable et voyons ce qui se passe. Essayez de modifier la valeur de la variable :
const permanente =20 ;
>> Erreur de syntaxe 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 astucieux et essayons d'utiliser un nouveau mot-clé variable pour modifier la valeur :
let permanent =20 ;
>> Erreur de syntaxe non interceptée :l'identifiant 'permanent' a déjà été déclaré Toujours pas de chance de changer la variable. Que diriez-vous de la même valeur, avec un nouveau mot-clé ?
let permanent =10 ;
>> Erreur de syntaxe 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 modifier le mot-clé générera une erreur.
C'est tout ce qu'il y a à faire avec const mot-clé. Enregistrez-le pour les variables spéciales que vous devez protéger dans le programme.
Ce tutoriel a décomposé les trois mots-clés utilisés pour déclarer des variables JavaScript. Vous verrez ces trois types tout au long de votre carrière de développeur Web, il est donc important de vous familiariser.
Il y a tellement plus à apprendre. Apprendre ce qu'est JavaScript et comment il fonctionne vous préparera au développement Web moderne. Maintenant que vous êtes à l'aise avec les variables, découvrez comment JavaScript interagit avec le modèle d'objet de document et essayez un projet pratique comme la création d'un diaporama JavaScript.