Variables y Constantes en JavaScript ES6

Variables y Constantes en JavaScript ES6

Veíamos en el apartado anterior que al declarar una variable usando la palabra reservada var esta puede tener un alcance global si la declara fuera de una función o puede tener un alcance de función en caso de que se declare dentro de una función. En la especificación ES6 se introdujeron nuevas formas para declarar variables en JavaScript. Estas son let y const :

  • let permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
  • const nos permite establecer constantes en los programas, esta crea una referencia de solo lectura sobre el valor declarado.

Cuando usamos const y let para declarar variables hacemos que estas tengan un (scope) ámbito de bloque, por lo que su valor solo existe dentro del bloque en el que están declaradas.

El scope o alcance es un concepto importante en la programación. Esta hace referencia al acceso que tendremos sobre una variable dentro del el programa. Hay dos ámbitos comunes a los que a menudo se hace referencia en los programas: alcance global y alcance local.
  • Global Scope: Significa alcance o acceso global, es decir las variables definidas en este ámbito serán accesible en todas partes del programa. (no se considera una buena práctica)
  • Local Scope: Significa alcance local, es decir, las variables definidas dentro de un bloque usando let o const solo estarán disponibles dentro de ese bloque y no serán accesibles fuera de ese bloque.
En JavaScript un bloque es un conjunto de declaraciones delimitadas por un par de llaves {...}

Let: variables con ámbito de bloque

La palabra reservada let la usamos para declarar una variable con ámbito limitado a su bloque, es decir, esta solo existirá en el bloque en el cual es declarada. funciona de forma similar a var, excepto que las variables que declara tienen un ámbito de bloque.

let variable_name = value;

Veamos un ejemplo:

let miValor = 10;

if (miValor == 10) {
   let miValor = 20;
   console.log(miValor);
}

console.log(miValor);
20
10

Como puedes notar en el ejemplo anterior las variables miValor junto con su valor almacenado son totalmente diferentes aunque estén declaradas bajo el mismo nombre pues ambas han sido declaradas en ámbitos diferentes. La variable miValor dentro del bloque if es una nueva variable y sombrea la variable miValor declarada fuera del bloque.

Las variables declaradas con let son mutuas. Significa que podemos cambiar sus valores en cualquier momento.

let a = 50;
    a = 100;
    a = a + 1;

console.log(a);
101

Como puedes notar en el ejemplo anterior el valor final almacenado en la variable a es 100, ultimo valor asignado.

Let y objeto global

Cuando declaramos una variable global utilizando la palabra reservada var, esta se agrega a la lista de propiedades del objeto global, que en el caso del navegador web es el objeto window. Sin embargo, cuando usamos let esta no se adjunta al objeto global como una propiedad.

var x = 10;
console.log(window.x);

let y = 20;
console.log(window.y);
10
undefined

Let y el hoisting

Las variables declaradas con let no se elevan a la parte superior del bloque a diferencia de las variables declaradas con var Elevación de variables (hoisting). Si hacemos referencia a variables declaradas con let antes de su declaración generaría un ReferenceError (al contrario de la variable declarada con var, que tendrá el valor undefined). Veamos un ejemplo:

function izar() {
   console.log(x);
   console.log(y);
   var x = 1;
   let y = 2;
}
izar();
undefined
"ReferenceError: y is not defined"

Algo curioso es que el motor de JavaScript alzará las variables declaradas con let en la parte superior del bloque. Sin embargo, al hacer referencia a esta antes de la declaración de la variable, obtendremos a ReferenceError.

Const: declarar constantes en JavaScript

Como mencionamos anteriormente ES6 proporciona una forma de declarar constante mediante el uso de la palabra reservada const. Estas presentan un ámbito de bloque (block scope) tal y como lo hacen las variables definidas usando la instrucción let, con la particularidad de que el valor de una constante no puede cambiarse a través de la reasignación. Las constantes no se pueden redeclarar.

const VARIABLE_NAME = value;
Por convención, los identificadores de constantes en JavaScript son declarados en mayúsculas, aunque esto no es requerido ni obligatorio.

Una variable declarada con const debe inicializarse inmediatamente a un valor cuando es declarada. de no ser así obtendremos un error de sintaxis.

const EDAD;
EDAD = 25;
"SyntaxError: Missing initializer in const declaration"

Las variables declaradas con const son inmutables, por ende estas no pueden ser cambiadas, alteradas ni su valor puede ser reasignado, al intentar reasignar una variable constante dará como resultado un TypeError

const EDAD = 25;
EDAD = 26;
"TypeError: Assignment to constant variable"

Const y los objetos en JavaScript

Aunque la instrucción const garantiza que la variable creada es solo de lectura, no significa que el valor real al cual esta hace referencia sea inmutable. Esto pasa con los objetos de JavaScript, que aunque estos estén referenciados es una constante vamos a poder cambiar el valor de sus propiedad.

const persona = { 
  edad: 25
};
persona.edad = 30;
console.log(persona.edad);
30

Lo que no podemos hacer es reasignar un valor diferente a la constante que lo referencia.

persona = {
  edad: 40
};
"TypeError: Assignment to constant variable"

Si deseamos que los valores del objeto sea inmutable, debemos congelarlos con el método Object.freeze(). Este método solo congela las propiedades del objeto, no los objetos a los que hacen referencia sus propiedades.

const persona = Object.freeze({
  edad: 20
});
persona.edad = 30;
console.log(persona.edad);
20


Ahora, ¿Cuál usar, const o Let? :

Bueno, todo depende, pero ten presente que siempre debemos de usar let cuando sepamos que el valor de las variables pueden ser alteradas o modificadas. Y const cuando sepamos que nuestro elemento no va a sufrir ninguna alteración.