JavaScript laisse

Table des matières

Afficher la table des matières

Le mot clé let a été introduit dans ES6 (2015)

Les variables définies avec let ne peuvent pas être redéclarées

Les variables définies avec let doivent être Déclarées avant utilisation

Les variables définies avec let ont Portée du bloc

Ne peut pas être redéclaré

Les variables définies avec let ne peuvent pas être redéclarées.

Vous ne pouvez pas redéclarer accidentellement une variable déclarée avec let.

Avec let vous ne pouvez pas faire ceci :

let x = "John Doe";

let x = 0;

Avec var vous pouvez :

var x = "John Doe";

var x = 0;

Portée du bloc

Avant ES6 (2015), JavaScript avait une portée globale et une portée de fonction.

ES6 a introduit deux nouveaux mots-clés JavaScript importants : let et const.

Ces deux mots-clés fournissent la Portée du bloc en JavaScript.

Les variables déclarées à l'intérieur d'un bloc { } ne sont pas accessibles de l'extérieur du bloc :

Exemple

{ 
  let x = 2;
  }
// x can NOT be used here

Les variables déclarées avec le mot-clé var ne peuvent PAS avoir une portée de bloc.

Les variables déclarées à l'intérieur d'un bloc { } sont accessibles depuis à l'extérieur du bloc.

Exemple

{ 
  var x = 2; 
  }
// x CAN be used here

Redéclarer des variables

Redéclarer une variable à l'aide du mot-clé var peut poser des problèmes.

Redéclarer une variable à l'intérieur d'un bloc redéclarera également la variable à l'extérieur du bloc :

Exemple

var x = 10;
// Here x is 10

{ 
var x = 2;
// Here x is 2
}

// Here x is 2

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using var</h2>

<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10

{  
var x = 2;
// Here x is 2
}

// Here x is 2
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Redéclarer une variable à l'aide du mot-clé let peut résoudre ce problème.

Redéclarer une variable à l'intérieur d'un bloc ne redéclarera pas la variable à l'extérieur le bloc:

Exemple

let x = 10;
// Here x is 10

{
let x = 2;
// Here x is 2
}

// Here x is 10

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using let</h2>

<p id="demo"></p>

<script>
let  x = 10;
// Here x is 10

{  
  let x = 2;
  // Here x is 2
}

// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Différence entre var, let et const

	Scope	Redeclare	Reassign	Hoisted	Binds this
var	No	Yes	Yes	Yes	Yes
let	Yes	No	Yes	No	No
const	Yes	No	No	No	No

Ce qui est bon?

let et const avoir une portée de bloc.

let et const ne peut pas être redéclaré.

let et const doit être déclaré avant utilisation.

let et const ne ne se lie pas à ce.

let et const ne sont pas hissés.

Qu'est-ce qui n'est pas bon ?

var n'a pas besoin d'être déclaré.

var est levé.

var se lie à cela.

Prise en charge du navigateur

Les mots-clés let et const sont non pris en charge dans Internet Explorer 11 ou version antérieure.

Le tableau suivant définit les premières versions du navigateur avec une prise en charge complète :


Chrome 49	Edge 12	Firefox 36	Safari 11	Opera 36
Mar, 2016	Jul, 2015	Jan, 2015	Sep, 2017	Mar, 2016

Redéclarer

La redéclaration d'une variable JavaScript avec var est autorisée n'importe où dans un programme :

Exemple

var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p>Redeclaring a JavaScript variable with <b>var</b> is allowed anywhere in a program:</p>

<p id="demo"></p>

<script>
var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Avec let, redéclarer une variable dans le même bloc n'est PAS autorisé :

Exemple

var x = 2;   // Allowed
let x = 3;   // Not allowed

{
let x = 2;   // Allowed
let x = 3;   // Not allowed
}

{
let x = 2;   // Allowed
var x = 3;   // Not allowed
}

Redéclarer une variable avec let, dans un autre bloc, EST autorisé :

Exemple

let x = 2;   // Allowed
{
let x = 3;   // Allowed
  }
  
  {
let x = 4;    // Allowed
  }

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p>Redeclaring a variable with <b>let</b>, in another scope, or in another block, is allowed:</p>

<p id="demo"></p>

<script>
let x = 2;   // Allowed

{
  let x = 3;   // Allowed
}

{
  let x = 4;   // Allowed
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Laissez le levage

Les variables définies avec var sont hissées en haut et peut être initialisé à tout moment. <p>Signification : Vous pouvez utiliser la variable avant qu'elle ne soit déclarée :

Exemple

C'est acceptable:

 carName = "Volvo";
  var carName;

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>

<p>With <b>var</b>, you can use a variable before it is declared:</p>

<p id="demo"></p>

<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>

</body>
</html>

Si vous souhaitez en savoir plus sur le levage, étudiez le chapitre JavaScript Hoisting. <p>Les variables définies avec let sont également hissées en haut du bloc, mais non initialisé.

Signification : L'utilisation d'une variable let avant qu'elle ne soit déclarée entraînera un Erreur de référence :

Exemple

carName = "Saab";
let carName = "Volvo";

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>

<script>
try {
  carName = "Saab";
  let carName = "Volvo";
}
catch(err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>