En esta entrada, vamos a ver las nuevas formas que provee ECMAScript 6 (ES6 o ES2015), estándar de JavaScript publicado en 2015, para declararar variables.
Para saber más sobre los últimos estándares publicados, su historia, las novedades que presentan, etc. puedes visitar este enlace y/o este otro.
ES6 presenta muchísimos cambios en JavaScript, los cuales iremos viendo en siguientes entradas. Aunque como adelanto, alguna de las cosas que añade son: clases, nuevas formas de declarar variables, definir valores por defecto en los argumentos de las funciones, funciones arrow, template literals, entre otras cosas.
ES6 nos permite declarar variables de dos nuevas formas: let y const. Aunque primero, para comparar, vamos a explicar la forma clásica de declarar variables: var.
Para que se vea fácilmente el funcionamiento de cada una, he creado varios snippets en Repl.it. En los que se pueden ver el código y ejecutarlos para ver los resultados que se comentan.
var
var es la forma clásica de declarar una variable en JS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var x = 'test'; // var. global function testFunction() { var y = 'test-2'; // var. local console.log(y); // test-2 console.log(x); // test x = 'test-3'; // sobreescribir } testFunction(); if (x == 'test-3') { var z = 'test-4'; // var. global, aunque esté en un if } console.log(x); // test-3 porque se sobreescribió console.log(z); // test-4 porque var tiene ámbito de función o global console.log(y); // error |
Ver el código anterior en vivo: https://repl.it/@vreaxe/JS-var
Si creamos una variable local dentro de una función. En este caso, se ha declarado la variable y en la función testFunction, por tanto, solamente se podrá acceder a ella dentro de dicha función, fuera de está función, nos lanzará un error, como podemos ver en la consola.
El ámbito de var es de función (como hemos visto con la variable y anteriormente) o global como podemos ver con la variable z. Se ha declarado dentro de un if y se puede acceder a nivel global.
let
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
let x = 1; function testFunction() { let y = 2; console.log(y); // 2 y = 3; console.log(y); // 3 console.log(x); // 1 x = 4 // se sobreescribe console.log(x); // 4 } testFunction(); if (x != 1) { let z = 5; console.log(z); // 5 } console.log(x); // 4, porque se sobreescribió console.log(y); // error porque está declarada dentro de function console.log(z); // error porque está declarada dentro de if |
Ver el código anterior en vivo: https://repl.it/@vreaxe/ES6-let
let es parecido a var, pero la difencia es que su ámbito es de bloque ({}). Esto quiere decir, que cualquier variable declarada con let dentro de cualquier bloque ({}), su acceso estará limitado a ese bloque.
Como podemos ver, declaramos una variable x, la cual se puede acceder dentro de la función creada y la podemos sobreescribir.
Declaramos otra variable y dentro de la función, la cual solo se puede acceder dentro de la función (declarada dentro de un bloque {}).
Con la variable z, a diferencia de la declarada con var, no está disponible a nivel global porque está declarada dentro de un bloque if ({}).
const
Las variables const tienen el mismo ámbito que las variables let. La diferencia, es que las variables const son variables que no se les puede reasignar un valor, el valor que tienen al inicializarla será su valor para siempre. Viene a ser como cualquier constante en otros lenguajes de programación.
|
1 2 3 4 5 6 |
const x = 1; console.log(x); // 1 x = 2; // error, no se puede reasignar un valor const y; // error, hay que inicializarla al declararla |
Ver el código anterior en vivo: https://repl.it/@vreaxe/ES6-const-1
Como hemos visto no se puede ni reasignar, ni cambiar el valor a un tipo de variable const, pero hay una manera de hacerlo y es inicializandola como un objeto. Al inicializarla como un objeto, podremos cambiar los valores de éste y añadirle propiedades.
|
1 2 3 4 5 6 7 8 9 |
const x = {test: 1, num: 2}; console.log(x); x.test = 4; x.num = 'string'; console.log(x); x.something = 'another string'; console.log(x); |
Ver el código anterior en vivo: https://repl.it/@vreaxe/ES6-const-2
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR