¿Cuál es la diferencia entre VAR, LET y CONST?

Variable VAR

Alcance:

'var' tiene un alcance global o de función, lo que significa que si se declara dentro de una función, no puede ser accedida fuera de esa función. Sin embargo, si se declara fuera de una función, es accesible en cualquier parte del código.

    function alcanceVar() {
    var mensaje = "Dentro de la función";
    if (true) {
        var mensaje = "Dentro del bloque if"; // redeclara y reasigna la misma variable
        console.log(mensaje); // "Dentro del bloque if"
    }
    console.log(mensaje); // "Dentro del bloque if" - la misma variable que en el if
}

alcanceVar();
console.log(mensaje); // Error: mensaje is not defined

Explicación

• Dentro de la función alcanceVar, var mensaje se declara y se asigna el valor "Dentro de la función".
• Dentro del bloque if, la variable mensaje se redeclara y reasigna a "Dentro del bloque if". Como var tiene alcance de función, esta declaración afecta a la misma variable mensaje.
• Fuera del if pero dentro de la función, la variable mensaje muestra "Dentro del bloque if", ya que fue reasignada dentro del if.
• Fuera de la función, intentar acceder a mensaje produce un error porque mensaje tiene alcance de función y no es accesible fuera de alcanceVar.

Hoisting:

Las declaraciones de var son "elevadas" al inicio del contexto de ejecución, lo que significa que puedes usar la variable antes de declararla (aunque su valor será undefined hasta que se asigne explícitamente).

function hoistingVar() {
    console.log(mensaje); // undefined (debido al hoisting)
    var mensaje = "Hola, Mundo!";
    console.log(mensaje); // "Hola, Mundo!"
}

hoistingVar();

Explicación

• En el contexto de la función hoistingVar, la declaración var mensaje es elevada al inicio.
• Antes de la inicialización de mensaje, su valor es undefined.
• Después de la inicialización, mensaje tiene el valor "Hola, Mundo!".

Reasignación y Redeclaración

Puedes reasignar y redeclarar una variable declarada con var en el mismo ámbito sin errores.

function reasignacionRedeclaracionVar() {
    var mensaje = "Primera declaración";
    console.log(mensaje); // "Primera declaración"
    
    mensaje = "Reasignación"; // reasignación permitida
    console.log(mensaje); // "Reasignación"
    
    var mensaje = "Redeclaración"; // redeclaración permitida
    console.log(mensaje); // "Redeclaración"
}

reasignacionRedeclaracionVar();

function calcularInteresSimple() {
    var principal = 1000; // cantidad principal
    var tasaInteres = 0.05; // tasa de interés anual
    var tiempo = 2; // tiempo en años
    
    var interes = principal * tasaInteres * tiempo;
    console.log("Interés simple: " + interes); // "Interés simple: 100"
}

calcularInteresSimple();

ECMAScript 2015 (ES6) Y la introcucción a las variables LET y CONST

Las variables let y const se introdujeron en la especificación ECMAScript 6 (ES6), también conocida como ECMAScript 2015. La especificación fue finalizada en junio de 2015.

La introducción de let y const en ES6 tenía como objetivo solucionar varios problemas y limitaciones asociadas con el uso de var en JavaScript, mejorando así la legibilidad, mantenimiento y seguridad del código.

Variable LET

Alcance:

'var' tiene un alcance global o de función, lo que significa que si se declara dentro de una función, no puede ser accedida fuera de esa función. Sin embargo, si se declara fuera de una función, es accesible en cualquier parte del código.

function ejemploAlcance() {
  let mensaje = "Fuera del bloque if";
  if (true) {
    let mensaje = "Dentro del bloque if"; // nueva variable con el mismo nombre dentro del bloque
    console.log(mensaje); // "Dentro del bloque if"
  }
  console.log(mensaje); // "Fuera del bloque if"
}

ejemploAlcance();

Explicación

• Dentro de la función ejemploAlcance, se declara let mensaje con el valor "Fuera del bloque if"
• Dentro del bloque if, se declara otra let mensaje con el valor "Dentro del bloque if". Esta variable es diferente a la de fuera del bloque if porque let tiene alcance de bloque
• Cuando se imprime mensaje dentro del bloque if, el valor es "Dentro del bloque if"
• Cuando se imprime mensaje fuera del bloque if pero dentro de la función, el valor sigue siendo "Fuera del bloque if" porque las dos variables mensaje son distintas

Hoisting:

Las declaraciones de var son "elevadas" al inicio del contexto de ejecución, lo que significa que puedes usar la variable antes de declararla (aunque su valor será undefined hasta que se asigne explícitamente).

function ejemploHoisting() {
  console.log(mensaje); // Error: Cannot access 'mensaje' before initialization
  let mensaje = "Hola, Mundo!";
  console.log(mensaje); // "Hola, Mundo!"
}

ejemploHoisting();

Explicación

• En el contexto de la función ejemploHoisting, la declaración let mensaje no es accesible antes de su inicialización, lo que causa un error
• A diferencia de var, las variables declaradas con let no se pueden usar antes de su declaración debido al hoisting temporal
• El primer console.log lanza un error porque mensaje no está inicializada
• El segundo console.log imprime "Hola, Mundo!" porque la variable mensaje ha sido inicializada

Reasignación y Redeclaración

Puedes reasignar y redeclarar una variable declarada con var en el mismo ámbito sin errores.

function ejemploReasignacionRedeclaracion() {
  let mensaje = "Primera declaración";
  console.log(mensaje); // "Primera declaración"
  
  mensaje = "Reasignación"; // reasignación permitida
  console.log(mensaje); // "Reasignación"
  
  let mensaje = "Redeclaración"; // Error: Identifier 'mensaje' has already been declared
  console.log(mensaje); // Este código no se ejecuta
}

ejemploReasignacionRedeclaracion();

Explicación

• Se declara la variable mensaje con el valor "Primera declaración"
• La variable mensaje se reasigna con el valor "Reasignación", lo cual es permitido con let
• Intentar redeclarar mensaje dentro del mismo ámbito con let causa un error: "Identifier 'mensaje' has already been declared
• La reasignación es permitida, pero la redeclaración dentro del mismo ámbito no lo es con let

function actualizarInventario() {
  let inventario = 100; // Inventario inicial
  console.log(`Inventario inicial: ${inventario}`);

  // Simulación de ventas
  for (let i = 0; i < 5; i++) {
    let venta = Math.floor(Math.random() * 10) + 1; // Ventas aleatorias entre 1 y 10
    inventario -= venta; // Actualizamos el inventario
    console.log(`Venta: ${venta} unidades, Inventario restante: ${inventario}`);
  }
}

actualizarInventario();

Variable CONST

Alcance:

'const' también tiene un alcance de bloque, similar a let.

function ejemploAlcance() {
  const mensaje = "Fuera del bloque if";
  if (true) {
    const mensaje = "Dentro del bloque if"; // nueva variable con el mismo nombre dentro del bloque
    console.log(mensaje); // "Dentro del bloque if"
  }
  console.log(mensaje); // "Fuera del bloque if"
}

ejemploAlcance();
    

• Se declara la variable mensaje con el valor "Primera declaración"
• La variable mensaje se reasigna con el valor "Reasignación", lo cual es permitido con let
• Intentar redeclarar mensaje dentro del mismo ámbito con let causa un error: "Identifier 'mensaje' has already been declared
• La reasignación es permitida, pero la redeclaración dentro del mismo ámbito no lo es con let

Hoisting:

Al igual que let, las declaraciones de const son elevadas pero no inicializadas, resultando en un error si se accede a ellas antes de la declaración.

function ejemploHoisting() {
  console.log(mensaje); // Error: Cannot access 'mensaje' before initialization
  const mensaje = "Hola, Mundo!";
  console.log(mensaje); // "Hola, Mundo!"
}

ejemploHoisting();

• Se declara la variable mensaje con el valor "Primera declaración"
• La variable mensaje se reasigna con el valor "Reasignación", lo cual es permitido con let
• Intentar redeclarar mensaje dentro del mismo ámbito con let causa un error: "Identifier 'mensaje' has already been declared
• La reasignación es permitida, pero la redeclaración dentro del mismo ámbito no lo es con let

Reasignación y Redeclaración

No puedes reasignar ni redeclarar una variable declarada con const. Debe ser inicializada en el momento de su declaración y su valor no puede cambiar. Sin embargo, si el valor es un objeto o un array, puedes modificar sus propiedades o elementos.

function ejemploReasignacionRedeclaracion() {
  const mensaje = "Primera declaración";
  console.log(mensaje); // "Primera declaración"
  
  mensaje = "Reasignación"; // Error: Assignment to constant variable
  console.log(mensaje); // Este código no se ejecuta
  
  const mensaje = "Redeclaración"; // Error: Identifier 'mensaje' has already been declared
  console.log(mensaje); // Este código no se ejecuta
}

ejemploReasignacionRedeclaracion();
    

• Se declara la variable mensaje con el valor "Primera declaración"
• La variable mensaje se reasigna con el valor "Reasignación", lo cual es permitido con let
• Intentar redeclarar mensaje dentro del mismo ámbito con let causa un error: "Identifier 'mensaje' has already been declared
• La reasignación es permitida, pero la redeclaración dentro del mismo ámbito no lo es con let

function gestionarInventario() {
  const capacidadMaxima = 500; // Capacidad máxima del almacén
  let inventario = 300; // Inventario inicial

  console.log(`Capacidad máxima: ${capacidadMaxima}`);
  console.log(`Inventario inicial: ${inventario}`);

  // Intentar cambiar la capacidad máxima causará un error
  // capacidadMaxima = 600; // Error: Assignment to constant variable

  // Simulación de entradas de inventario
  let entrada = 50; // Nuevas unidades ingresadas
  inventario += entrada;
  console.log(`Inventario después de entrada: ${inventario}`);
}

gestionarInventario();