- Notifications
You must be signed in to change notification settings - Fork230
The old "var"#312
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Merged
Uh oh!
There was an error while loading.Please reload this page.
Merged
The old "var"#312
Changes fromall commits
Commits
Show all changes
29 commits Select commitHold shift + click to select a range
0e5b7e4
The old "var"
joaquinelioc5533f6
esencia ortograf
joaquinelioc346db9
sep palabras
joaquinelio5419f98
ortogr 3
joaquinelio91a7304
ortogr 4
joaquineliob7ad468
Update 1-js/06-advanced-functions/04-var/article.md
joaquineliod87f753
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelioef691eb
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelio924e9cb
Update 1-js/06-advanced-functions/04-var/article.md
joaquineliodee39a7
Update 1-js/06-advanced-functions/04-var/article.md
joaquineliod758e11
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelio3a9f23b
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelioe02c4f6
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelio46bd6d0
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelioa29e338
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelio84cbbe2
article mejorado
joaquineliob0fa6c0
Merge branch 'master' into oldvar
joaquineliof1ec4e8
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelio051f388
update line108- better I hope
joaquinelioa87a5dd
108 v3
joaquinelio169cc2b
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelio4490827
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelioa32ebdd
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelioaa2bd34
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelioce56e75
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelio4afadec
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelioa55388e
Update 1-js/06-advanced-functions/04-var/article.md
joaquineliob4d86cc
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelio0645882
Update 1-js/06-advanced-functions/04-var/article.md
joaquinelioFile filter
Filter by extension
Conversations
Failed to load comments.
Loading
Uh oh!
There was an error while loading.Please reload this page.
Jump to
Jump to file
Failed to load files.
Loading
Uh oh!
There was an error while loading.Please reload this page.
Diff view
Diff view
There are no files selected for viewing
148 changes: 74 additions & 74 deletions1-js/06-advanced-functions/04-var/article.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,117 +1,117 @@ | ||
#La vieja "var" | ||
```smart header="Este artículo es para entender código antiguo" | ||
La información en este artículo es útil para entender código antiguo. | ||
Así no es como escribimos código moderno. | ||
``` | ||
En el primer capítulo acerca de [variables](info:variables),mencionamos tres formas de declarar una variable: | ||
1. `let` | ||
2. `const` | ||
3. `var` | ||
La declaración`var`essimilara `let`.Casi siempre podemos reemplazar`let`por `var`o viceversa y esperar que las cosas funcionen: | ||
```js run | ||
var message = "Hola"; | ||
alert(message); //Hola | ||
``` | ||
Pero internamente `var`es una bestia diferente, originaria de muy viejas épocas. Generalmente no se usa en código moderno pero aún habita en el antiguo. | ||
Si no planeas encontrarte con tal código bien puedes saltar este capítulo o posponerlo, pero hay posibilidades de que esta bestia pueda morderte más tarde. | ||
Por otro lado, es importante entender las diferencias cuando se migra antiguo código de`var`a `let` para evitar extraños errores. | ||
## "var" notiene alcance (visibilidad) de bloque. | ||
Las variables declaradas con`var` pueden: tener a la función como entorno de visibilidad, o bien ser globales. Su visibilidad atraviesa los bloques. | ||
Por ejemplo: | ||
```js run | ||
if (true) { | ||
var test = true; //uso de"var"en lugar de "let" | ||
} | ||
*!* | ||
alert(test); // true,la variablevive después del if | ||
*/!* | ||
``` | ||
Como `var`ignora los bloques de código, tenemos una variableglobal`test`. | ||
Si usáramos`let test`en vez de`var test`,lavariablesería visible solamente dentro del `if`: | ||
```js run | ||
if (true) { | ||
let test = true; //uso de "let" | ||
} | ||
*!* | ||
alert(test); // Error: testno está definido | ||
*/!* | ||
``` | ||
Lo mismo para los bucles: `var`no puede serlocal en los bloques ni en los bucles: | ||
```js | ||
for (var i = 0; i < 10; i++) { | ||
// ... | ||
} | ||
*!* | ||
alert(i); // 10, "i"es visibledespués del bucle, es unavariable global | ||
*/!* | ||
``` | ||
Si un bloque de código está dentro de una función,`var`se vuelve una variable a nivel de función: | ||
```js run | ||
function sayHi() { | ||
if (true) { | ||
var phrase = "Hello"; | ||
} | ||
alert(phrase); //funciona | ||
} | ||
sayHi(); | ||
alert(phrase); // Error: phraseno está definida (Revise consola de desarrollador) | ||
``` | ||
Como podemos ver, `var`atraviesa`if`, `for`u otros bloques. Esto es porque mucho tiempo atrás los bloques en JavaScript notenían ambientes léxicos. Y `var`es un remanente de aquello. | ||
joaquinelio marked this conversation as resolved. Show resolvedHide resolvedUh oh!There was an error while loading.Please reload this page. | ||
## "var"tolera redeclaraciones | ||
joaquinelio marked this conversation as resolved. Show resolvedHide resolvedUh oh!There was an error while loading.Please reload this page. | ||
Declarar la mismavariablecon `let`dos veces en el mismo entorno es un error: | ||
```js run | ||
let user; | ||
let user; // SyntaxError: 'user'ya fue declarado | ||
``` | ||
Con `var` podemos redeclarar unavariablemuchas veces. Si usamos`var`con unavariable ya declarada, simplemente se ignora: | ||
```js run | ||
var user = "Pete"; | ||
var user = "John"; //este "var"no hace nada (ya estaba declarado) | ||
// ...no dispara ningún error | ||
alert(user); // John | ||
``` | ||
##Las variables"var"pueden ser declaradas debajo del lugar en donde se usan | ||
Las declaraciones`var`son procesadas cuando se inicia la función (o se inicia elscriptpara las globales). | ||
En otras palabras, las variables`var`son definidas desde el inicio de la función, noimporta dónde esté tal definición (asumiendo que la definición no está en una función anidada). | ||
Entonces el código: | ||
```js run | ||
function sayHi() { | ||
@@ -126,7 +126,7 @@ function sayHi() { | ||
sayHi(); | ||
``` | ||
...es técnicamente lo mismo que esto (se movió`var phrase`hacia arriba): | ||
```js run | ||
function sayHi() { | ||
@@ -141,7 +141,7 @@ function sayHi() { | ||
sayHi(); | ||
``` | ||
...O incluso esto (recuerda, los códigos de bloque son ignorados): | ||
```js run | ||
function sayHi() { | ||
@@ -158,13 +158,13 @@ function sayHi() { | ||
sayHi(); | ||
``` | ||
Este comportamiento también se llama "hoisting" (elevamiento),porque todos los`var`son "hoisted" (elevados) hacia el tope de la función. | ||
Entonces, en el ejemplo anterior, la rama`if (false)`nunca se ejecuta pero eso no tiene importancia. El `var`dentro es procesado al iniciar la función, entonces al momento de`(*)`la variableexiste. | ||
**Las declaraciones son "hoisted" (elevadas), pero las asignaciones no lo son.** | ||
Es mejor demostrarlo con un ejemplo: | ||
```js run | ||
function sayHi() { | ||
@@ -178,40 +178,40 @@ function sayHi() { | ||
sayHi(); | ||
``` | ||
La línea `var phrase = "Hello"`tiene dentro dos acciones: | ||
1.La declaración `var` | ||
2.La asignación `=`. | ||
La declaración es procesada al inicio de la ejecución de la función("hoisted"),pero la asignación siempre se hace en el lugar donde aparece. Entonces lo que en esencia hace el código es: | ||
```js run | ||
function sayHi() { | ||
*!* | ||
var phrase; //la declaración se hace en el inicio... | ||
*/!* | ||
alert(phrase); // undefined | ||
*!* | ||
phrase = "Hello"; // ...asignación -cuando la ejecución la alcanza. | ||
*/!* | ||
} | ||
sayHi(); | ||
``` | ||
Como todas las declaraciones`var`son procesadas al inicio de la función, podemos referenciarlas en cualquier lugar. Pero lasvariablesserán indefinidas hasta que alcancen su asignación. | ||
En ambos ejemplos de arriba`alert`se ejecuta sin unerror,porque la variable `phrase`existe. Pero su valor no fue asignado aún, entonces muestra `undefined`. | ||
### IIFE | ||
Como en el pasado solo existía`var`,y no había visibilidad a nivel de bloque, los programadores inventaron una manera de emularla. Lo que hicieron fue el llamado "expresiones de función inmediatamente invocadas (abreviadoIIFE en inglés). | ||
No es algo que debiéramos usar estos días, pero puedes encontrarlas en código antiguo. | ||
Un IIFEse ve así: | ||
```js run | ||
(function() { | ||
@@ -223,13 +223,13 @@ An IIFE looks like this: | ||
})(); | ||
``` | ||
Aquí la expresión de función es creada e inmediatamente llamada. Entonces el código se ejecuta enseguida y con sus variables privadas propias. | ||
La expresión de función es encerrada entre paréntesis`(function {...})`,porque cuando JavaScriptse encuentra con`"function"`en el flujo de código principal lo entiende como el principio de una declaración de función. Pero una declaración de función debe tener un nombre, entonces ese código daría error: | ||
```js run | ||
//Trata de declarar e inmediatamente llamar una función | ||
function() { // <-- Error:la instrucción de función requiere un nombre de función | ||
let message = "Hello"; | ||
@@ -238,48 +238,48 @@ function() { // <-- Error: Function statements require a function name | ||
}(); | ||
``` | ||
Incluso si decimos: "okay,agreguémosle un nombre",no funcionaría, porque JavaScriptno permite que las declaraciones de función sean llamadas inmediatamente: | ||
```js run | ||
// errorde sintaxis por causa de los paréntesis debajo | ||
function go() { | ||
}(); // <--no puede llamarse una declaración de función inmediatamente | ||
``` | ||
Entonces, los paréntesis alrededor de la función es un truco para mostrarle aJavaScriptque la función es creada en el contexto de otra expresión, y de allí lo de "expresión de función", quenonecesita un nombre y puede ser llamada inmediatamente. | ||
Existen otras maneras además de los paréntesis para decirle aJavaScriptque queremos una expresión de función: | ||
```js run | ||
//Formas de crear IIFE | ||
(function() { | ||
alert("Paréntesis alrededor de la función"); | ||
}*!*)*/!*(); | ||
(function() { | ||
alert("Paréntesis alrededor de todo"); | ||
}()*!*)*/!*; | ||
*!*!*/!*function() { | ||
alert("Operador 'Bitwise NOT' como comienzo de la expresión"); | ||
}(); | ||
*!*+*/!*function() { | ||
alert("'más unario' como comienzo de la expresión"); | ||
}(); | ||
``` | ||
En todos los casos de arriba declaramos una expresión de función y la ejecutamos inmediatamente. Tomemos nota de nuevo: Ahoranohay motivo para escribir semejante código. | ||
##Resumen | ||
Hay dos diferencias principales entre`var`y `let/const`: | ||
1.Las variables`var`no tienen alcance de bloque, su mínimo de alcance es a nivel de función. | ||
2.Las declaraciones`var`son procesadas al inicio de la función (o delscriptpara las globales). | ||
Hay otra diferencia menor relacionada al objetoglobalque cubriremos en el siguiente capítulo. | ||
Estas diferencias casi siempre hacen a`var`peor que `let`. Las variablesa nivel de bloque son mejores. Es por ello que`let`fue presentado en el estándar mucho tiempo atrás, y es ahora la forma principal (junto con `const`)de declarar una variable. |
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.