Diferencia entre var, let y const

Una buena característica añadida en ES2015 (ES6) fue la introducción de let y const palabras clave para la declaración de variables. Puedes usar var, let y const palabra clave indistintamente para la declaración de variables, aunque hace una diferencia en el alcance, el uso y la elevación. Si no conoce estas diferencias, continúe...

Índice
  1. Alcance
  2. Utilizar
    1. 1. "var"
    2. 2. "salir"
    3. 3. "constante"
  3. Levantamiento
  4. Resumen

Alcance


Alcance básicamente significa la accesibilidad de una variable. Las variables pueden tener tres tipos de alcance: -

1. Alcance mundial

Cuando las variables se definen fuera de una función y son accesibles desde cualquier lugar. Todos var, let y const son de alcance mundial.

2. Ámbito de la función

Variables definidas usando var están en el ámbito de la función porque si se definen dentro de la función, su visibilidad se limita a la función o función anidada. Cuando intenta usarlo fuera de la función, obtiene un error.

function myFn() {
   var foo = 'peekaboo!';

   console.log(foo); // Prints 'peekaboo!'
}

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

3. Alcance del bloque

Variables definidas usando let Donde const están en el alcance del bloque porque si se definen dentro de un bloque de código (código entre llaves {}), su visibilidad está limitada al bloque de código, cualquier bloque anidado. Cuando intenta usarlo fuera del bloque, obtiene un error.

if (true) {
    var foo = 'peekaboo!';
    let bar = 'i see u';
    const baz = 'baby blue!';

    console.log(foo); // Prints 'peekaboo!';
    console.log(bar); // Prints 'i see u';
    console.log(baz); // Prints 'baby blue!';
}

console.log(foo); // Prints 'peekaboo!';
console.log(bar); // ReferenceError: bar is not defined
console.log(baz); // ReferenceError: baz is not defined

Utilizar


1. "var"

var era la única palabra clave para la declaración de variables antes de ES6.

var fuera de un bucle for
for (var i = 0; i < 3; i++) {
  console.log(i); // Prints 0, 1 and 2
}

console.log(i);   // Prints 3

Desde var está al alcance. La variable i accesible fuera del bucle for (bloque de código)

reasignación de variables

variable usando var se puede reasignar con un nuevo valor y también se puede redefinir.

function myFn() {
    var foo = 1;
    foo = 30;
    var foo = 101;

    console.log(foo);  // Prints 101
}

myFn();

2. "salir"

dejar fuera de un bucle for
for (let i = 0; i < 3; i++) {
  console.log(i); // Prints 0, 1 and 2
}

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

Desde let está dentro del rango de bloqueo. La variable i no es accesible fuera del bucle for (bloque de código)

vamos a reasignar y redefinir

variable usando let se puede reasignar con un nuevo valor pero no se puede redefinir.

function myFn() {
    let foo = 1;
    foo = 30;
    let foo = 101;
    console.log(foo);  
}

myFn();

Output

Uncaught SyntaxError: Identifier 'foo' has already been declared

Sin embargo, si el let variable se define en diferentes ámbitos, no habrá ningún error.

let foo = 1;

function myFn() {
  let foo = 2;
  console.log(foo);
  
  if(true){
    let foo = 3;
    console.log(foo);
  }
}

console.log(foo);
myFn();

Output

1 2 3

¿Por qué no hay error? Esto se debe a que las tres instancias se tratan como variables diferentes porque tienen ámbitos diferentes.

3. "constante"

la palabra clave const es parecido a letes un bloque de rango, sin embargo, no puede reasignarle el valor.

const PI = 3.1415;

PI = 5; // "TypeError: Assignment to constant variable.

Sin embargo, los nuevos elementos aún pueden insertarse en una constante de matriz o agregarse a un objeto. Los siguientes 2 fragmentos funcionan sin quejarse porque no estamos tratando de reasignar las variables:

const someArr = [3, 4, 5];

someArr.push(6);
const someObj = {
  dog: 'Skip',
  cat: 'Caramel',
  bird: 'Jack'
};

someObj.camel = 'Bob';

Levantamiento


Hoisting es un mecanismo de JavaScript en el que las variables y las declaraciones de funciones se mueven hacia arriba antes de la ejecución del código.

En caso de var variables, sus valores se inicializan con undefined en el proceso de levantamiento.

console.log(foo); 
var foo = 1;
console.log(foo);

console.log(bar); 
bar = 2;
console.log(bar); 

var bar;

se interpreta asi

var foo;
var bar;

console.log(foo); // undefined
foo = 1;
console.log(foo); // 1

console.log(bar); // undefined
bar = 2;
console.log(bar); // 2
¿Puedes adivinar qué salió del fragmento de código a continuación?
var foo = 1;

function myFun(){
  console.log(foo);
  
  var foo = 2;
}

myFun();

¿Adivinaste? foo = 1 Donde foo = 2?

No es ninguno. se imprimirá undefined. Veamos cómo lo interpreta el compilador en el proceso de levantamiento,

var foo;
foo = 1;

function myFun(){
  
  var foo; // var hoisted and initialized with undefined
  console.log(foo); // undefined
  
  foo = 2;
}

myFun();

al igual que var, let declaraciones también izadas a la cima, pero a diferencia de var que se inicializa como indefinido, el let la variable no se inicializa. Así que si intentas usar un let variable antes de la declaración, obtendrá un error de referencia. const las variables son similares a let variable en términos de elevación.

console.log(foo);
let foo = 1;

Output

ReferenceError: foo is not defined
¿Puedes adivinar qué salió del fragmento de código a continuación?
let foo = 1;

function myFun(){
  console.log(foo);
  
  let foo = 2;
}

myFun();

¿Adivinaste? foo = undefined?

No, no lo es. Veamos cómo lo interpreta el compilador en el proceso de levantamiento,

let foo;
foo = 1;

function myFun(){
  
  let foo; // let hoisted without initialization unlike var
  console.log(foo); // ReferenceError: Cannot access 'foo' before initialization

  foo = 2;

}

myFun();

Resumen


Entonces, en caso de que te hayas perdido las diferencias, aquí están:

Alcance Actualización de valor Redefinir variable Levantamiento
variable alcance de la función si (en marco) inicializado con indefinido
dejar alcance del bloque no (dentro del alcance del bloque) pero sí (fuera del alcance del bloque) variable no inicializada
constante alcance del bloque no no variable no inicializada
  • var las variables tienen alcance de función mientras que let y const están dentro del rango de bloqueo.
  • var las variables se pueden actualizar y volver a declarar dentro de su alcance; let las variables se pueden actualizar pero no volver a declarar; Las variables const no se pueden actualizar ni volver a declarar.
  • Todos ellos están izados a la parte superior de su gama, pero mientras var las variables se inicializan con undefined, let y const las variables no se inicializan.
  • Mientras que var y let puede ser declarado sin ser inicializado, const debe inicializarse durante la declaración.

¿Tiene alguna pregunta o una adición? Gracias por dejar un comentario.

Gracias por leer.

Si quieres conocer otros artículos parecidos a Diferencia entre var, let y const puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas