JavaScript Moderno #1 | Variables y Constantes.

En esta serie de posts, voy a compartir y ejemplificar algunas características "modernas" de JavaScript; ya que desde mi punto de vista, el conocer las features modernas de este lenguaje te hacen la vida mucho más fácil.

En esta primera entrega vamos a ver un tema básico: Variables y Constantes.

Variables

JavaScript fue creado en un mundo completamente distinto al que vivimos actualmente (tecnológicamente hablando), tenía otros propósitos y no fue inicialmente diseñado para soportar todo lo que actualmente le delegamos. Es por eso que JavaScript ha ido evolucionando con el tiempo y naturalmente en esa "evolución" han ido quedando vestigios de su antiguo yo, un ejemplo de esto es el uso de la palabra reservada var.

var se utiliza en JavaScript para declarar una variable (un espacio en memoria para almacenar un dato), pero no respeta las nuevas características del nuevo JavaScript, como el scope de variables, o la declaración estricta de las mismas. Entonces, ¿cómo declaramos variables sin var? Javascript permite declarar variables a través de la palabra reservadas let.

var nombre = "Joseph" // ❌ Manera incorrecta y anticuada 😫
// ---
let nombre = "Joseph León" // ✅ Forma correcta y moderna 😎

Esto significa que la variable identificada como "nombre" tiene un espacio en memoria reservado para el dato que le queramos asignar, y no vamos a poder declarar otra variable con el mismo identificador.

let nombre = "Joseph" // ✅ Declaro una variable "nombre"

let nombre = "Joseph León" // ❌
// Declaro otra variable con el mismo identificador 
//(Esto produce un error de JavaScript).

Es importante entender que una "variable" representa a un dato que va a mutar con el tiempo; o sea, en algún momento, en tiempo de ejecución de nuestro programa, este va a cambiar con respecto a su valor inicial.

let nombre = "Joseph" // ✅ Declaración de variable "nombre".

// -- Mucho código---

if (necesitaApellido) { // Alguna condición.
    nombre = "Joseph León" // ✅ Modificación del valor de la variable.
}
console.log(nombre) // Joseph León.

Ahora, ¿qué pasa con los datos que no se modificación durante toda la ejecución de mi programa? Estaremos tentados a seguir usando var; es más, esto funcionaría sin problemas, pero no es lo mejor...

Constantes

Las constantes en JavaScript con técnicamente variables con una particularidad: Su valor no pues cambiarse a través de la reasignación.
Esto es muy útil, su uso permite al intérprete de JavaScript optimizar memoria y ayuda al desarrollador a identificar errores lógicos.

const nombre = "Joseph" // ✅ Declaración de una constante.
nombre = "Joseph León" // ❌ Reasignación de una constante.
//(Esto produce un error de JavaScript).

Es necesario inicializar la constante, no es posible declararla sin asignar ningún valor.

const nombre // ❌ Costante no inicializada.
//(Esto produce un error de JavaScript).

Scope de variables o constantes

Si declaramos variables con let o const podemos disfrutar de una magnífica característica añadida a JavaScript que otros lenguajes ya tienen: el scope.

El scope de variables permiten que podamos declarar una variable o constante que exista dentro de un bloque de código (dentro de un for, while, if, etc.).

Veamos un ejemplo utilizando var

var texto = "Hola mundo..." // Declaramos una variable y la inicializamos.

// -- Mucho código---

if (tieneComentarios) {
   var texto = "Me gusta el texto" // Declaramos otra variable para guardar el comentario.
   console.log(texto) // Imprimimos el comentario.
}

console.log(texto) // Imprimimos el texto.

/* Output:
   Me gusta el texto (✅ Se imprime el comentario. correctamente).
   Me gusta el texto (❌ Se imprime el comentario nuevamente.
   Pero qué rayos! 🤬.
*/

Como puedes ver, las variables declaradas con var no respetan el scope de un determinado bloque (en este caso if) modificando la variable text global.

Veamos el mismo caso utilizando const.

const texto = "Hola mundo..." // Declaramos una constante y la inicializamos.

// -- Mucho código---

if (tieneComentarios) {
   const texto = "Me gusta el texto" // Declaramos otra constante para guardar el comentario.
   console.log(texto) // Imprimimos el comentario.
}

console.log(texto) // Imprimimos el texto.

/* Output:
   Me gusta el texto (✅ Se imprime el comentario. correctamente).
   Hola mundo... (✅ Se imprime el texto)
*/

Ahora el programa funciona como queremos, ya que la constante texto que se encuentra dentro de la estructura de control if solo existe en ese ámbito y no modifica a la variable global del mismo nombre. Cabe resaltar que esto funcionaría de la misma manera su hubiésemos utilizado let, utilizar const o let depende exclusivamente de la mutabilidad o inmutabilidad del dato.

Conclusiones

• No utilices var.
• const para constantes.
• letpara variables.
• Ahora disfruta del scope!