🌱 Diferencias entre var, let y const

Introducción

En JavaScript, una de las características que lo hace único es su flexibilidad para definir variables, que son una parte fundamental en la programación. Es importante que sepamos distinguir las diferencias entre estos tipos de variables y cuándo usarlos adecuadamente. En este artículo, discutiremos las diferencias entre var, let y const. Aunque todos son similares en su función, difieren en su alcance, valor predeterminado y capacidad de reasignación y re-declaración.

Ámbito

Var

La variable "var" se introdujo en JavaScript en su primera versión. En ese entonces, era la única forma de declarar variables en el lenguaje. La principal característica de la variable "var" es que es una variable global en el alcance, lo que significa que su valor puede ser accedido desde cualquier lugar dentro del código. También puede ser declarada dentro de una función y su valor sólo será accesible dentro de esa función. Si se declara var dentro de un bloque (por ejemplo, un if o un bucle), su alcance será global.

function miFunc(){
    var x = "Esto es una variable var";

  if(true){
    var x = "Esto también lo es";
    console.log(x); 
  }
  console.log(x) 
}

miFunc();//Esto también lo es
                 //Esto también lo es

En el ejemplo anterior, la variable "x" se declara dos veces, primero con un valor de 5 y luego con un valor de 10 dentro del bloque if. Sin embargo, en ambas ocasiones, la variable "x" tiene un alcance global, por lo que su valor se sobrescribe en ambas instancias.

Let

La variable "let" fue introducida en ES6 (ECMAScript 2015) y su objetivo es reemplazar la variable "var". La principal diferencia entre "let" y "var" es que además, "let" tiene un alcance de bloque. Esto significa que la variable "let" solo es accesible dentro del bloque donde se declara. Si se declara "let" dentro de una función, su alcance será limitado a esa función. Además, no se puede declarar la misma variable "let" dos veces dentro del mismo bloque.

Un bloque es un trozo de código delimitado por {}. Un bloque vive entre llaves. Todo lo que está dentro de llaves es un bloque.

function miFunc(){
    let x = "Esto es una variable let";

  if(true){
    let x = "Esto también lo es";
    console.log(x);
  }
    console.log(x);

}

miFunc();// Esto también lo es
                 // Esto es una variable let

En el ejemplo anterior, la variable "x" se declara dos veces, pero como "let" tiene un alcance de bloque, la variable "x" dentro del bloque if no afecta al valor de "x" fuera del bloque.

Const

La variable "const" también fue introducida en ES6 y su objetivo es declarar variables que no cambian su valor después de ser inicializadas. Como su nombre indica, una vez que se asigna un valor a una variable "const", ese valor no puede ser modificado. Además, "const" también tiene un alcance de bloque.

 function miFunc(){
    const constante = "Esto es una constante";

  if(true){
    const constante = "Esto también lo es";
    console.log(constante);    
  }
    console.log(constante);

}

miFunc();//Esto también lo es
                 // Esto es una constante

Como podemos observar, al tratarse de dos ámbitos diferentes, su valor no se sobrescribe, y se tratan como dos constantes diferentes.

Uso

Var

Las variables declaradas con var se pueden volver a declarar y reasignar dentro de su ámbito, esto significa que podemos hacer esto dentro del ámbito en el que esté y no obtendremos un error.

function miFunc(){
    var x = "Esto es una variable var";
    console.log(x)

  var x = "Esto es una re-declaración de x"
    console.log(x)

    x = "Esto es una reasignación de x";
  console.log(x)
}

miFunc();//Esto es una variable var
                 //Esto es una re-declaración de x
                 //Esto es una reasignación de x

Let

Dentro de un mismo ámbito, podremos volver a reasignarlas pero no re-declararlas. Cuando se crea una variable conlet, su rango de uso se queda restricto dependiendo de las características de su ámbito. Por ejemplo si declaramos una variable let en ámbito de función podremos usarlas en los ámbitos inferiores pero no lo contrario. Si la misma variable se define en diferentes ámbitos, no habrá ningún error.

// 1. Redeclaración de let en el mismo ámbito
function miFunc(){
    let x = "Esto es una variable let";
    console.log(x)

  let x = "Esto es una re-declaración de x" 
    console.log(x)
}

miFunc(); //Uncaught SyntaxError: Identifier 'x' has already been declared

// 2. Reasignación de let en el mismo ámbito
function miFunc(){
    let x = "Esto es una variable let";
    console.log(x) 

  x = "Esto es una reasignación de x"
    console.log(x) 
}

miFunc();  //Esto es una variable let
                     //Esto es una reasignación de x

Const

No se puede ni re-declarar ni reasignar, el valor de una variable const es fijo, constante dentro de su ámbito.

// 1. Re-declaración de const en un mismo ámbito
function miFunc(){
    const x = "Esto es una constante";
    console.log(x) 

  const x = "Esto es una re-declaración de la constante"
    console.log(x)
}
miFunc() //Uncaught SyntaxError: Identifier 'x' has already been declared

// 2. Reasignación de const en un mismo ámbito
function miFunc(){
    const x = "Esto es una constante";

  x = "Esto es una re-declaración de la constante"
    console.log(x)
}
miFunc() //Uncaught TypeError: Assignment to constant variable.

El alcance de una variable const es similar al de una variable let: el bloque en el que se declara. Si se declara una variable const dentro de un bloque, solo estará disponible dentro de ese bloque. Si se declara una variable const fuera de un bloque, estará disponible globalmente.

Hoisting

Var

Es un mecanismo de JavaScript en el que las variables y declaraciones de funciones se mueven a la parte superior de su ámbito antes de la ejecución del programa y se inicien como undefined en un primer momento.

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

Let

Al igual que var, las declaraciones let se izan a la parte superior del código pero no se inicializan. Esto significa que el ámbito en el que vive la variable está “cociente” de ella pero no se puede usar hasta que haya sido declarada. La variable se encontrará en una “zona temporal muerta” desde el principio del bloque hasta que es declarada.

console.log(miLet);
let miLet = "hola"; //Uncaught ReferenceError: Cannot access 'miLet' before initialization"

Const

Al igual que let, las declaraciones constse elevan a la parte superior, pero no se inicializan.

console.log(constante
const constante = "Esto es una constante"; //Uncaught ReferenceError: Cannot access 'constante' before initialization

Resumen

• Las declaraciones var tienen un ámbito global o un ámbito función/local, mientras que let y const además de estos, tienen un ámbito de bloque.

• Las variables var pueden ser modificadas y re-declaradas dentro de su ámbito; las variables let pueden ser modificadas, pero no re-declaradas; las variables const no pueden ser modificadas ni re-declaradas.

• Todas ellas se elevan a la parte superior de su ámbito. Pero mientras que las variables var se inicializan con undefined, let y const no se inicializan.

• Mientras que var y let pueden ser declaradas sin ser inicializadas, const debe ser inicializada durante la declaración.