VAR, LET Y CONST 🧑‍🚀

Astro Coding — Wed, 13 Oct 2021 17:40:40 +0000

Hello world! El día de hoy te explicaré acerca de la importancia de la declaración de variables en Javascript!

Si eres un programador nuevo en javascript, quizás habrás leído algún trozo de código donde se usan las palabras reservadas: var, let y const

Y es que en el estándar ES5 sólo existía una forma de declarar variables: con var. No obstante con la llegada del ES6 trajo consigo las 3 opciones antes mencionadas.

¿Pero por qué esta nueva forma de declarar? 🤔

Esa pregunta se te vino a la cabeza, ya que debe haber alguna necesidad que esté cubriendo. Y efectivamente, el problema era la llamada mutabilidad/inmutabilidad. Déjame te explico.

Variables mutables 💻

Cuando una variable es mutable estas permiten que sus valores puedan ser sobreescritos; es decir, están en constante cambio:

// Declaramos una variable con let
let name = "Astro"
// Imprimimos la variable para ver el valor en consola
console.log(name) // Astro
// Ahora reasignamos la variable
name = "Coding"
console.log(name) // Coding

Entonces vimos cómo nuestra variable sin ningún error cambio de valor. El problema que surge a partir de esto es que si nosotros en algún momento quisiésemos recibir información de una API o de cualquier otro origen, obtaríamos por que esa información no pueda ser sobreescrita.

Variables inmutables 🔒

Son aquellas variables que se van a resistir al cambio; es decir, no pueden ser sobreescritas. Las usamos mayormente para trabajar con información sensible estática (que no debe ser modificadaa).

// Declaramos una variable con const
const name = "Astro"
// Imprimimos la variable para ver el valor en consola
console.log(name) // Astro
// Ahora reasignamos la variable
name = "Coding" // ERROR - No se puede reasignar una constante!
console.log(name) // Astro

DIFERENCIA ENTRE DECLARACIÓN DE VARIABLES 🧑‍💻

VAR: Cuando trabajamos con var, definimos el valor de manera global; es decir:

var name = "Astro"
console.log(name) // Astro

// Hacemos un if true sólo para tener un diferente scope
if (true) {
    name = "Coding"
    console.log(name) // Coding
}

// Vemos si el valor cambió de manera global
console.log(name) // Coding - Sí cambió de manera global!

Pero por qué ocurre esto? Bueno tienes que entender que en Javascript las declaraciones de variables (var, let, const.) son procesadas antes de cualquier otro trozo de código, sin importar en que parte del script se encuentre. Es así que cuando declaramos con var estamos trabajando sobre el contexto global.

LET: Frente a esto, en ES6 nace "let" y consigo "block scope".

// Función de ejemplo
function ejemplo() {
    // Declaramos con let dentro del scope función
    let name = "Astro";
    console.log(name);
    if (true) {
        // Declaramos let dentro del scope if
        let name = "Coding";
        console.log(name);
    }
    // Obtenemos el valor que se declaró en el scope función
    console.log(name);
}

Entonces si nos damos cuenta, tenemos que la variable let respeta el scope donde se encuentra, y puede ser sobreescrita dentro del mismo, mientras que cuando está fuera termina su alcance.

CONST: Por otro lado respeta su scope al igual que let, pero esta no puede ser sobreescrita sobre el mismo.

// Asignamos con const
const name = "Astro"
console.log(name) // Astro
if (true) {
    const name = "Coding"
    console.log(name) // Coding
}
name = "Astro 2.0" // ERROR - No se puede sobreescribir una constante
console.log(name) // Astro

Entonces cuando nosotros trabajemos con información que NO DEBE SER SOBREESCRITA pues const será nuestra mejor amiga, no te olvides practicar para dominar este tema! 🐱‍🏍

DEV Community: Astro Coding

VAR, LET Y CONST 🧑‍🚀

¿Pero por qué esta nueva forma de declarar? 🤔

Variables mutables 💻

Variables inmutables 🔒

DIFERENCIA ENTRE DECLARACIÓN DE VARIABLES 🧑‍💻