Uso correcto de var, let y const

Clase 4: Uso correcto de var, let y const

Notas

• ECMAScript 6 2015 -> introducjo let y const
• var -> no respeta ambitos de bloque
• let -> si respeta ambitos de bloque
• const -> valores que no cambian NUNCA pero pueden cambiar por referencia, pero la constante en sí no puede ser reasignada

// var
var age = 28;
{
  console.log("Valor dentro del bloque", age); // 28
  var age = 29;
}

console.log("Valor fuera del bloque", age); // 29
age = age * 2;
console.log("Valor cambiado", age); // 58

// let
let age = 28;
{
  console.log("Valor dentro del bloque", age); // error
  let age = 29;
}

console.log("Valor fuera del bloque", age); // 28
age = age * 2;
console.log("Valor cambiado", age); // 56

// const
const PI = 3.14159;
PI = PI * 2; // error
console.log("Valor cambiado", PI); // no se ejecuta

Recomiendo este curso breve donde se explica muy clarito también las diferencias entre “var”, “let” y “const” y las características a profundidad de c/u: https://platzi.com/cursos/javascript-closures-scope/

let age = 28
{    
    console.log('valor dentro del bloque', age);
    let age = 29;
}

// sale ReferenceError: Cannot access ‘age’ before initialization

El primer console.log no imprime el valor 28 porque ocurre un hoisting en JavaScript. El hoisting es un comportamiento donde las declaraciones de variables (pero no las asignaciones) se mueven al principio del ámbito en el que se encuentran.
Debido al hoisting, la declaración de la segunda variable age se mueve al principio del bloque, por lo que cuando se ejecuta la línea 2 del console.log dentro del bloque, la variable age todavía no ha sido asignada y su valor es undefined

var - no respeta ambitos de bloque

let - si respeta ambitos de bloque

const - valores que no cambian NUNCA

let y var, aunque parezcan muy diferentes, realmente no lo son. Son exactamente lo mismo, solo que el engine de JS las trata de manera distinta.
.
Toma en cuenta los siguientes bloques de código

{
  console.log("Value inside the block:", age); // Error ❌
  let age = 22;
}

{
  console.log("Value inside the block:", age); // undefined
  var age = 22;
}

Lo que pasa por debajo, es que cada que se crea un nuevo “bloque”, se crea un nuevo contexto de ejecución, justo como el que se crea de manera global.
Entonces, este contexto lo que hace es primero, agregar todas las variables y funciones en la memoria, por esta razón ocurre el hoisting.
.
En el ejemplo de arriba, en ambos contextos de ejecución, la variable “age” existe en memoria desde antes de que se ejecute cualquier línea de código. A esta variable se le da un valor de “undefined”. Sin embargo, el engine de JS trata a las variables de manera distinta, según si fueron declaradas con let o con var.
.
En case de que fueron declaradas con let, el engine de JS no deja que se pueda acceder a esta variable antes de que haya sido declarada explicitamente en el código, por eso nos da un error.
.
En el caso de var, si nos deja acceder a esta variable, que es “undefined”, por lo que no nos da ningún tipo de error.

Como var no tiene en cuentas los bloques o scopes, en este ejemplo imprime:
28
29
58
Primer comment en un curso 😁

//var => No respeta ámbitos de bloque y se puede volver a declarar
var age1 = 28

{
    console.log("Valor dentro del bloque ", age1); //28
    var age1 = 29
}

console.log("Valor fuera del bloque ", age1) //29
age1 = age1*2
console.log("Valor cambiado", age1);//58

//let => Respeta ámbitos de bloque y no se puede volver a declarar
let age2 = 28

{
    console.log("Valor dentro del bloque ", age2); //Cannot access 'age2' before initialization
    let age2 = 29
}

console.log("Valor fuera del bloque ", age2) //28
age2 = age2*2
console.log("Valor cambiado", age2);//56


//const => Respeta ámbitos de bloque y no puede cambiar de valor
const PI = 3.14159;
PI = PI * 2; // Assignment to constant variable.
console.log("Valor cambiado", PI); // no se ejecuta

28
29
58

La principal característica de var es que tiene un alcance de función, lo que significa que su valor puede filtrarse fuera de los bloques de código donde se declaró. Esto podría causar problemas de legibilidad y mantenimiento.

Usa let cuando quieras declarar una variable que puede cambiar su valor.
Usa const cuando quieras declarar una constante con un valor que no cambiará.
Evita usar var en favor de let y const, ya que let es más seguro y predecible.

<code> 

28
29
58

Un tips aprendido en el curso de TypeScript es qué, se puede activar el analizador de código estático en JavaScript puro colocando en el inicio del script js el siguiente código:

//@ts-check

Esto nos permitirá detectar errores comunes y dificiles de visualizar a simple vista antes de subir nuestro código al server.

En el ejercicio se imprime:

Valor dentro del bloque 28
Valor fuera del bloque 29
Valor cambiado 58

Como recomendaciones:

• Nunca usen var.
• Usen let cuando vayan a redeclarar el valor en la variable.
• Usen const para constantes, cuando no es necesario redeclarar la variable. Por ejemplo: Al usar librerías, al crear funciones u objetos, etc.

Vaya no sabia que usando clg directamente imprimia el console.log en Vscode… el dia ya valio la pena.

28
29
58

Valor dento del bloque 28
Valor fuera del bloque 29
Valor cambbiado 58

CodeRunner

Imprime:

• Valor dentro del bloque 28
• Valor fuera del bloque 29
• Valor cambiado 58