la diferencia entre var, let, y const

var, let, y const son formas para declarar variables.

Cada uno trabajan differente. es importante a usar las declaraciones correctas para ayudar el desarrollador y hacer el codigo mas facil para leer.

JavaScript

se declaran y definen así

// estan Block scoped
// solamente usar cunado el valor es constante
// no se puede reasignar or redeclara
const nombre = "Brian";

// estan Block scoped
// se puede reasignar y redeclara
let anos = 18;

// estan Function scoped
// se puede reasignar y redeclara
var estado = "California";

que es scope

Scope es como JavaScript encontra declaraciones.

Hay Block scope y Function scope.

que es block scope

Puedes definir un Block scope con “curly braces”.

El uso de let o const en Block scope evitar que las variables sean accesibles fuera de él.

Cuando usas var en un Block scope si puedes usarlo afurea.

JavaScript

{
  var varDeclaracion = "soy var en Block Scoped";
  console.log(varDeclaracion); // soy var en Block Scoped
}
console.log(varDeclaracion); // soy var en Block Scoped

{
  let letDeclaracion = "soy let en Block scoped";
  console.log(letDeclaracion); // soy let en Block scoped
}
console.log(letDeclaracion); // Uncaught ReferenceError: letDeclaracion is not defined

{
  const constDeclaracion = "soy const en Block scoped";
  console.log(constDeclaracion); // soy const en Block scoped
}
console.log(constDeclaracion); // Uncaught ReferenceError: constDeclaracion is not defined

“curly braces” crea un Block scope.

Otro ejemplos son if-else declaraciones y for-loops.

que es Function Scope

Function scope es cualquier cosa dentro una function. Todo lo declarado dentro de una función no es accesible afuera.

JavaScript

const diManzanas = "manzanas de global scope";

function decirFruta () {
  let diManzanas = "manzanas de decirFruta()";
  const diPlatanos = "platanos de decirFruta()";
  var diNaranjas = "Naranjas de decirFruta()";
  console.log(diManzanas);
}

decirFruta(); // manzanas de decirFruta()

console.log(diManzanas); // manzanas de global scope

console.log(diPlatanos);
// Uncaught ReferenceError: diPlatanos is not defined

console.log(diNaranjas);
// Uncaught ReferenceError: diNaranjas is not defined

Cunando ejecutar decirFruta() se imprime “manzanas de decirFruta()” en lugar de “manzanas de global scope” porque diManzanas en la función se define en el mismo scope que donde se ejecuta console.log().

Cunando buscando variables comienza donde se hace referencia y sube el scope hasta llegue global scope

el significado de var

var puedes redeclarado y reasignado.

JavaScript

var fruta = "Naranjas";
fruta = "Manzanas";
var fruta = "Platanos";

console.log(fruta); // Platanos

var esta hoisted y inicializado a undefined.

JavaScript

console.log(hoisted) // undefined
var hoisted = "hola";

var no le importa block scope.

si no hay var declaración JavaScript asume tú querías hacer un variable y pone el variable dentro el global scope.

JavaScript

if (true) {
  var fruta = "Naranjas";
}

if (true) {
  vegetal = "Zanahoria";
}

console.log(fruta); // Naranjas
console.log(vegetal); // Carrot

por qué var es malo

var contamina el global scope.

JavaScript

for (var i = 0; i < 10; i++) {
  // code
}

// i está en el "scope" global, ya no lo necesitamos el variable i
console.log(i); // 10

var se puede redeclara.

JavaScript

var tarea = "mira las estrellas.";
if (true) {
  var tarea = "ve al zoológico.";
}

console.log(tarea); // ve al zoológico.

El global scope versión de el variable se cambia.

el significante de let

let es usualmente el variable declaración que se usa sobre var porque tiene mejores características que var tiene.

no se puedes redeclarado, pero se puede redefinir.

JavaScript

let jugoFavorito = "jugo de naranja";

jugoFavorito = "jugo de manzana";

console.log(jugoFavorito); // jugo de manzana

let jugoFavorito = "jugo de arándano";
// Uncaught SyntaxError: Identifier 'jugoFavorito' has already been declared

let esta hoisted pero no inicializado.

JavaScript

console.log(hoisted);
// Uncaught ReferenceError: hoisted is not defined

let hoisted = "estoy hoisted pero no inicializado";

let usa Block scope, lo que significa que solo se puede acceder en el scope en el que se definió.

JavaScript

let frutaFavorita = "Naranjas";
if (true) {
  let frutaFavorita = "Platanos";
  console.log(frutaFavorita); // Platanos
}

console.log(frutaFavorita); // Naranjas

Por que usar let over var

let no contamina el global scope.

JavaScript

for (let i = 0; i < 10; i++) {
  // code
}

console.log(i)
// Uncaught ReferenceError: i is not defined

let es block scope el problema que tuvimos with var no se aplica con let.

el significante de const

Las variables declaradas con const deben contener valores que sean constantes

const no puede ser redeclarado o reasignar.

JavaScript

const colorFavorito = "verde";
colorFavorito = "rojo";
// Uncaught TypeError: Assignment to constant variable.

const colorFavorito = "amarillo";
// Uncaught SyntaxError: Identifier 'colorFavorito' has already been declared

const debe ser inicializado cuando se declara.

Al igual que let const es hoisted pero no se inicializa.

JavaScript

console.log(hoisted);
// Uncaught ReferenceError: hoisted is not defined

const hoisted = "estoy hoisted pero no inicializado";

const variable declaraciones son Block scoped como let

JavaScript

if (true) {
  const eresBrillante = true;
  console.log(eresBrillante); // true
}

console.log(eresBrillante);
// Uncaught ReferenceError: eresBrillante is not defined

const no es constante

Algunos valores se pueden cambiar con const variable declaración.

los valores se pueden cambiar en los objetos.

const recetaBurritoFrijoles = {
  tortilla: "harina",
  frijoles: "pintos"
};

recetaBurritoFrijoles.tortilla = "maiz";

console.log(recetaBurritoFrijoles);
// { tortilla: 'maiz', frijoles: 'pintos' }

poner, modifique y quitar elementos de una array.

const numeros = [1, 2, 3];

numeros.pop();
console.log(numeros); // [1, 2]

numeros.push(5);
console.log(numeros); // [1, 2, 5]

numeros[1] = 10;
console.log(numeros); // [1, 10, 5]

resumen de las diferencias

La mayoría, si no todo el tiempo, usa let y const.

  1. let y var no tiene que ser inicializado cuando se declara. const Tiene que ser inicializado cuando se declara.

  2. var Se puede redefinir y redeclara, let se puede redfinir pero no redeclarado, const no se puede redefinido o redeclarado.

  3. vardeclaraciones estans Function scoped mientras let y const estan Block scoped.

  4. usar const cuando querer declarar una variable que no debería cambiar.

javascript
the difference between var, let, and const

an explanation of var, let, and const variable declarations in JavaScript.