JavaScript deja

Tabla de contenido

Mostrar tabla de contenidos

La palabra clave let se introdujo en ES6 (2015)

Las variables definidas con let no se pueden volver a declarar

Las variables definidas con let deben declararse antes de su uso.

Las variables definidas con let tienen alcance del bloque

No se puede volver a declarar

Las variables definidas con let no se pueden volver a declarar.

No puedes redeclarar accidentalmente una variable declarada con let.

Con let puedes no hacer esto:

let x = "John Doe";

let x = 0;

Con var puedes:

var x = "John Doe";

var x = 0;

Alcance del bloque

Antes de ES6 (2015), JavaScript tenía alcance global y alcance de función.

ES6 introdujo dos nuevas palabras clave JavaScript importantes: let y const.

Estas dos palabras clave proporcionan Alcance del bloque en JavaScript.

No se puede acceder a las variables declaradas dentro de un bloque {} desde fuera del bloque:

Ejemplo

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

Las variables declaradas con la palabra clave var NO pueden tener alcance de bloque.

Se puede acceder a las variables declaradas dentro de un bloque { } desde fuera del bloque.

Ejemplo

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

Redeclaración de variables

Redeclarar una variable usando la palabra clave var puede imponer problemas.

Redeclarar una variable dentro de un bloque también redeclarará la variable fuera del bloque:

Ejemplo

var x = 10;
// Here x is 10

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

// Here x is 2

Pruébelo usted mismo →

<!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>

Redeclarar una variable usando la palabra clave let puede resolver este problema.

Redeclarar una variable dentro de un bloque no redeclarará la variable fuera el bloque:

Ejemplo

let x = 10;
// Here x is 10

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

// Here x is 10

Pruébelo usted mismo →

<!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>

Diferencia entre var, let y 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

¿Lo que es bueno?

let y const tener alcance de bloque.

let y const no se puede volver a declarar.

let y const debe declararse antes de su uso.

let y const no se vincula a este.

let y const no están izados.

¿Qué no es bueno?

No es necesario declarar var.

Se iza var.

var se vincula a esto.

Soporte del navegador

Las palabras clave let y const son no es compatible con Internet Explorer 11 o versiones anteriores.

La siguiente tabla define las primeras versiones del navegador con soporte completo:


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

Redeclaración

Se permite redeclarar una variable JavaScript con var en cualquier lugar de un programa:

Ejemplo

var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

Pruébelo usted mismo →

<!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>

Con let, NO se permite redeclarar una variable en el mismo bloque:

Ejemplo

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
}

Redeclarar una variable con let, en otro bloque, ESTÁ permitido:

Ejemplo

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

Pruébelo usted mismo →

<!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>

dejar izar

Las variables definidas con var se elevan a la parte superior y se puede inicializar en cualquier momento. <p>Significado: Puede utilizar la variable antes de declararla:

Ejemplo

Esto esta bien:

 carName = "Volvo";
  var carName;

Pruébelo usted mismo →

<!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 desea obtener más información sobre elevación, estudie el capítulo JavaScript Hoisting. <p>Las variables definidas con let también se elevan a la parte superior del bloque, pero no inicializado.

Significado: El uso de una variable let antes de declararla dará como resultado una Error de referencia:

Ejemplo

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

Pruébelo usted mismo →

<!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>