76 lines
2.9 KiB
Markdown
76 lines
2.9 KiB
Markdown
|
---
|
||
|
|
id: 587d7b87367417b2b2512b3f
|
||
|
|
title: Explore Differences Between the var and let Keywords
|
||
|
|
localeTitle: Explora las diferencias entre la var y deja palabras clave
|
||
|
|
challengeType: 1
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id='description'>
|
||
|
|
Uno de los mayores problemas con la declaración de variables con la palabra clave <code>var</code> es que puede sobrescribir las declaraciones de variables sin un error.
|
||
|
|
<blockquote>var camper = 'James';<br>var camper = 'David';<br>console.log(camper);<br>// logs 'David'</blockquote>
|
||
|
|
Como puede ver en el código anterior, la variable <code>camper</code> se declaró originalmente como <code>James</code> y luego se anuló para ser <code>David</code> .
|
||
|
|
En una aplicación pequeña, es posible que no tenga este tipo de problema, pero cuando su código se hace más grande, puede sobrescribir accidentalmente una variable que no pretendía sobrescribir.
|
||
|
|
Debido a que este comportamiento no produce un error, la búsqueda y solución de errores se vuelve más difícil. <br>
|
||
|
|
Se introdujo una nueva palabra clave llamada <code>let</code> en ES6 para resolver este problema potencial con la palabra clave <code>var</code> .
|
||
|
|
Si tuviera que reemplazar <code>var</code> por <code>let</code> en las declaraciones de variables del código anterior, el resultado sería un error.
|
||
|
|
<blockquote>let camper = 'James';<br>let camper = 'David'; // throws an error</blockquote>
|
||
|
|
Este error se puede ver en la consola de su navegador.
|
||
|
|
Entonces, a diferencia de <code>var</code> , cuando se usa <code>let</code> , una variable con el mismo nombre solo se puede declarar una vez.
|
||
|
|
Tenga en cuenta el <code>"use strict"</code> . Esto habilita el modo estricto, que detecta errores comunes de codificación y acciones "inseguras". Por ejemplo:
|
||
|
|
<blockquote>"use strict";<br>x = 3.14; // throws an error because x is not declared</blockquote>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id='instructions'>
|
||
|
|
Actualizar el código para que solo use la palabra clave <code>let</code> .
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests:
|
||
|
|
- text: <code>var</code> no existe en el código.
|
||
|
|
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g),"<code>var</code> does not exist in code.");'
|
||
|
|
- text: <code>catName</code> debe ser <code>Oliver</code> .
|
||
|
|
testString: 'assert(catName === "Oliver", "<code>catName</code> should be <code>Oliver</code>.");'
|
||
|
|
- text: <code>quote</code> debe ser <code>"Oliver says Meow!"</code>
|
||
|
|
testString: 'assert(quote === "Oliver says Meow!", "<code>quote</code> should be <code>"Oliver says Meow!"</code>");'
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
|
||
|
|
<div id='js-seed'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
var catName;
|
||
|
|
var quote;
|
||
|
|
function catTalk() {
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
catName = "Oliver";
|
||
|
|
quote = catName + " says Meow!";
|
||
|
|
|
||
|
|
}
|
||
|
|
catTalk();
|
||
|
|
```
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
// solution required
|
||
|
|
```
|
||
|
|
</section>
|