ES6 - Variables

UNE variable, par définition, est «un espace nommé dans la mémoire» qui stocke des valeurs. En d'autres termes, il agit comme un conteneur pour les valeurs d'un programme. Les noms de variables sont appelésidentifiers. Voici les règles de dénomination d'un identifiant -

Les identificateurs ne peuvent pas être des mots-clés.
Les identificateurs peuvent contenir des alphabets et des nombres.
Les identificateurs ne peuvent pas contenir d'espaces et de caractères spéciaux, à l'exception du trait de soulignement (_) et du signe dollar ($).
Les noms de variable ne peuvent pas commencer par un nombre.

Syntaxe de type

Une variable doit être déclarée avant d'être utilisée. La syntaxe ES5 utilisait levarmot-clé pour atteindre le même. La syntaxe ES5 pour déclarer une variable est la suivante.

//Declaration using var keyword 
var  variable_name

ES6 introduit la syntaxe de déclaration de variable suivante -

Utilisation du let.
En utilisant le const.

Variable initializationfait référence au processus de stockage d'une valeur dans la variable. Une variable peut être initialisée soit au moment de sa déclaration, soit à un moment ultérieur.

La syntaxe de type ES5 traditionnelle pour déclarer et initialiser une variable est la suivante -

//Declaration using var keyword 
var variable_name = value

Exemple: utilisation de variables

var name = "Tom" 
console.log("The value in the variable is: "+name)

L'exemple ci-dessus déclare une variable et imprime sa valeur.

La sortie suivante s'affiche en cas d'exécution réussie.

The value in the variable is Tom

JavaScript et saisie dynamique

JavaScript est un langage non typé. Cela signifie qu'une variable JavaScript peut contenir une valeur de n'importe quel type de données. Contrairement à de nombreux autres langages, vous n'avez pas à indiquer à JavaScript lors de la déclaration de variable le type de valeur que la variable contiendra. Le type de valeur d'une variable peut changer lors de l'exécution d'un programme et JavaScript s'en charge automatiquement. Cette fonctionnalité est appeléedynamic typing.

Portée JavaScriptVariable

La portée d'une variable est la région de votre programme dans laquelle elle est définie. Traditionnellement, JavaScript ne définit que deux portées: globale et locale.

Global Scope - Une variable de portée globale est accessible depuis n'importe quelle partie du code JavaScript.
Local Scope - Une variable avec une portée locale est accessible depuis une fonction où elle est déclarée.

Exemple: variable globale vs variable locale

L'exemple suivant déclare deux variables par le nom num - un en dehors de la fonction (portée globale) et l'autre au sein de la fonction (portée locale).

var num = 10 
function test() { 
   var num = 100 
   console.log("value of num in test() "+num) 
} 
console.log("value of num outside test() "+num) 
test()

La variable référencée dans la fonction affiche la valeur de la variable à portée locale. Cependant, la variablenum lorsqu'il est accédé en dehors de la fonction, renvoie l'instance à portée globale.

La sortie suivante s'affiche en cas d'exécution réussie.

value of num outside test() 10
value of num in test() 100

ES6 définit une nouvelle portée de variable - La portée de bloc.

La portée Let and Block

La portée du bloc restreint l'accès d'une variable au bloc dans lequel elle est déclarée. levarLe mot-clé attribue une portée de fonction à la variable. Contrairement au mot-clé var, lelet Le mot clé permet au script de restreindre l'accès à la variable au bloc englobant le plus proche.

"use strict" 
function test() { 
   var num = 100 
   console.log("value of num in test() "+num) { 
      console.log("Inner Block begins") 
      let num = 200 
      console.log("value of num : "+num)  
   } 
} 
test()

Le script déclare une variable numdans la portée locale d'une fonction et la re-déclare dans un bloc à l'aide du mot-clé let. La valeur de la variable à portée locale est imprimée lorsque la variable est accédée à l'extérieur du bloc interne, tandis que la variable à portée de bloc est référencée dans le bloc interne.

Note - Le mode strict est un moyen d'accepter une variante restreinte de JavaScript.

La sortie suivante s'affiche en cas d'exécution réussie.

value of num in test() 100 
Inner Block begins 
value of num : 200

Exemple: let v / s var

var no = 10; 
var no = 20; 
console.log(no);

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Réécrivons le même code en utilisant le let mot-clé.

let no = 10; 
let no = 20; 
console.log(no);

Le code ci-dessus générera une erreur: l'identifiant «non» a déjà été déclaré. Toute variable déclarée à l'aide du mot clé let reçoit la portée du bloc.

laisser et bloquer la sécurité de niveau

Si nous essayons de déclarer un letvariable deux fois dans le même bloc, cela lancera une erreur. Prenons l'exemple suivant -

<script>
   let balance = 5000 // number type
   console.log(typeof balance)
   let balance = {message:"hello"} // changing number to object type
   console.log(typeof balance)
</script>

Le code ci-dessus entraînera l'erreur suivante -

Uncaught SyntaxError: Identifier 'balance' has already been declared

let et plusieurs blocs

Cependant, le même let variable peut être utilisée dans différentes portées de niveau bloc sans aucune erreur de syntaxe.

Exemple

<script>
   let count = 100
   for (let count = 1;count <= 10;count++){
      //inside for loop brackets ,count value starts from 1
      console.log("count value inside loop is ",count);
   }
   //outside for loop brackets ,count value is 100
   console.log("count value after loop is",count);

   if(count == 100){
      //inside if brackets ,count value is 50
      let count = 50;
      console.log("count inside if block",count);
   }
   console.log(count);
</script>

La sortie du code ci-dessus sera la suivante -

count value inside loop is 1
count value inside loop is 2
count value inside loop is 3
count value inside loop is 4
count value inside loop is 5
count value inside loop is 6
count value inside loop is 7
count value inside loop is 8
count value inside loop is 9
count value inside loop is 10
count value after loop is 100
count inside if block 50
100

Le const

le constdéclaration crée une référence en lecture seule à une valeur. Cela ne signifie pas que la valeur qu'il contient est immuable, mais simplement que l'identificateur de variable ne peut pas être réaffecté. Les constantes ont une portée de bloc, tout comme les variables définies à l'aide de l'instruction let. La valeur d'une constante ne peut pas changer par la réattribution et elle ne peut pas être déclarée à nouveau.

Les règles suivantes sont valables pour une variable déclarée à l'aide de const mot-clé -

Les constantes ne peuvent pas être réaffectées à une valeur.
Une constante ne peut pas être déclarée à nouveau.
Une constante nécessite un initialiseur. Cela signifie que les constantes doivent être initialisées lors de sa déclaration.
La valeur attribuée à un const variable est mutable.

Exemple

const x = 10
x = 12 // will result in an error!!

Le code ci-dessus renverra une erreur car les constantes ne peuvent pas être réaffectées à une valeur. Les constantes variables sont immuables.

Les constantes sont immuables

Contrairement aux variables déclarées en utilisant let mot-clé, constantssont immuables. Cela signifie que sa valeur ne peut pas être modifiée. Par exemple, si nous essayons de changer la valeur de la variable constante, une erreur sera affichée.

<script>
   let income = 100000
   const INTEREST_RATE = 0.08
   income += 50000 // mutable
   console.log("changed income value is ",income)
   INTEREST_RATE += 0.01
   console.log("changed rate is ",INTEREST_RATE) //Error: not mutable
</script>

La sortie du code ci-dessus sera la suivante -

changed income value is 150000
Uncaught TypeError: Assignment to constant variable

const et tableaux

L'exemple suivant montre comment créer un tableau immuable. De nouveaux éléments peuvent être ajoutés au tableau. Cependant, la réinitialisation du tableau entraînera une erreur comme indiqué ci-dessous -

<script>
   const DEPT_NOS = [10,20,30,50]
   DEPT_NOS.push(40)
   console.log('dept numbers is ',DEPT_NOS)

   const EMP_IDS = [1001,1002,1003]
   console.log('employee ids',EMP_IDS)
   //re assigning variable employee ids
   EMP_IDS = [2001,2002,2003]
   console.log('employee ids after changing',EMP_IDS)
</script>

La sortie du code ci-dessus sera comme indiqué ci-dessous -

dept numbers is (5) [10, 20, 30, 50, 40]
employee ids (3) [1001, 1002, 1003]
Uncaught TypeError: Assignment to constant variable.

Le mot-clé var

Avant ES6, le varLe mot clé a été utilisé pour déclarer une variable en JavaScript. Variables déclarées avecvarne prend pas en charge la portée de niveau bloc. Cela signifie que si une variable est déclarée dans une boucle ouif block il est accessible en dehors de la boucle ou du if block. En effet, les variables déclarées à l'aide duvar levage de support de mot-clé.

var et levage

Variable hoistingpermet l'utilisation d'une variable dans un programme JavaScript, avant même qu'elle ne soit déclarée. Ces variables seront initialisées àundefinedpar défaut. Le moteur d'exécution JavaScript recherchera les déclarations de variables et les placera en haut de la fonction ou du script. Variables déclarées avecvarLe mot-clé est hissé au sommet. Prenons l'exemple suivant -

<script>
   variable company is hoisted to top , var company = undefined
   console.log(company); // using variable before declaring
   var company = "TutorialsPoint"; // declare and initialized here
   console.log(company);
</script>

La sortie du code ci-dessus sera comme indiqué ci-dessous -

undefined
TutorialsPoint

var et block scope

le block scoperestreint l'accès d'une variable au bloc dans lequel elle est déclarée. levarLe mot-clé attribue une portée de fonction à la variable. Variables déclarées à l'aide duvarLe mot clé n'a pas de portée de bloc. Prenons l'exemple suivant -

<script>
   //hoisted to top ; var i = undefined
   for (var i = 1;i <= 5;i++){
      console.log(i);
   }
   console.log("after the loop i value is "+i);
</script>

La sortie du code ci-dessus sera la suivante -

1
2
3
4
5
after the loop i value is 6

La variable i est déclaré à l'intérieur de la boucle for en utilisant le varmot-clé. La variable i est accessible en dehors de la boucle. Cependant, il peut parfois être nécessaire de restreindre l'accès d'une variable dans un bloc. Nous ne pouvons pas utiliser levarmot-clé dans ce scénario. ES6 présente lelet mot-clé pour surmonter cette limitation.

sécurité de niveau var et bloc

Si nous déclarons la même chose variable deux fois en utilisant le var keyworddans un bloc, le compilateur ne lèvera pas d'erreur. Cependant, cela peut entraîner des erreurs logiques inattendues lors de l'exécution.

<script>
   var balance = 5000
   console.log(typeof balance)
   var balance = {message:"hello"}
   console.log(typeof balance)
</script>

La sortie du code ci-dessus est comme indiqué ci-dessous -

number
object

↰ Previous page Next page ↱

ES6 - Variables

Syntaxe de type

Exemple: utilisation de variables

JavaScript et saisie dynamique

Portée JavaScriptVariable

Exemple: variable globale vs variable locale

La portée Let and Block

Exemple: let v / s var

laisser et bloquer la sécurité de niveau

let et plusieurs blocs

Exemple

Le const

Exemple

Les constantes sont immuables

const et tableaux

Le mot-clé var

var et levage

var et block scope

sécurité de niveau var et bloc

Tutoriel ES6