37

En ECMA Script 6 se pueden definir las variables de javascript con let y const, además de utilizar var. ¿Cual sería la recomendación para elegir que tipo de definición de variables debería utilizarse?

1

2 respuestas 2

32
+450

Para responder a la pregunta:

¿Cual sería la recomendación para elegir que tipo de definición de variables debería utilizarse?

Primero se debe conocer cada tipo de sentencia y aclarar su alcance dentro de la ejecución de javascript:

La sentencia let declara una variable de alcance local, la cual, opcionalmente puede ser inicializada con algún valor.

Es decir, ejemplo:

(function(){
  let foo = 'bar'; // Se crea y se le da un valor
  let bar = 'foo'; // Se crea y se le da un valor
  
  console.log('foo: ' + foo); 
  console.log('bar: ' + bar);
  
  foo = 'foo'; // Se le asigna un nuevo valor
  bar = 'bar'; // Se le asigna un nuevo valor
  
  console.log('foo: ' + foo);
  console.log('bar: ' + bar);
})()

console.log('foo: ' + foo); // foo is not defined
console.log('bar: ' + bar); // bar is not defined

En el ejemplo anterior se puede apreciar con claridad como las variables foo y bar solo pueden ser inicializadas, accedidas y cambiadas únicamente dentro del closure pero no pueden ser accedidas y/o cambiadas por fuera de este...

NOTA: en el ejemplo anterior si se reemplaza a let por var se obtendrán los mismos resultados, solo lo puse como ejemplo, un mejor ejemplo sería decir que una variable let definida en archivo_1.js no podría ser accedida en archivo_2.js mientras que una variable var en archivo_1.js si podría ser accedida y cambiada en archivo_2.js

Además hay que aclarar que las variables de tipo let a diferencia de las variables de tipo var NO PUEDEN ser accedidas mediante el objeto global window y tampoco pueden ser re declaradas a diferencia de las variables tipo var, ejemplo:

var bar = 'foo';
let foo = 'bar';

console.log('bar: ' + bar);
console.log('window bar: ' + window.bar);
console.log('foo: ' + foo);
console.log('window foo: ' + window.foo); // undefined

var bar = 'new foo'; // bar puede ser RE DECLARADA
// let foo = 'new bar'; // foo NO PUEDE ser RE DECLARADA

console.log('bar: ' + bar);
console.log('window bar: ' + window.bar);
console.log('foo: ' + foo);
console.log('window foo: ' + window.foo); // undefined

La sentencia var es una simple declaración de una variable, opcionalmente inicializada a un valor.

Es decir:

var foo = 'bar';
console.log(foo);
console.log(window.foo);
foo = 'foo';
console.log(foo);
console.log(window.foo);

(function(){
  console.log('closure foo: ' + foo);
  console.log('closure window foo: ' + window.foo);
})()

La sentencia const es una constante que se presenta en un ámbito de bloque como lo hacen las variables de tipo let pero que no puede ser cambiadas*(las propiedades de los objetos asignados a las constantes no están protegidas) ni redeclaradas

Al actuar como variables de tipo let se debe tener en cuenta que tampoco pueden ser accededidas a través del objeto global window, tampoco pueden ser re declaradas y/o re asignadas con un nuevo valor

const KEY = '0123456780';
console.log(KEY);
console.log(window.KEY); // undefined
// KEY = '0876543210'; // KEY' has already been declared
// const KEY = '0876543210'; // KEY' has already been declared
console.log(KEY);
console.log(window.KEY); // undefined

const data = {
           id : 1, 
           name : "top secret"
           }
 console.log(data) 
 
 data.id = 9 //the reference does not change it
 data.name = "Nine";
 console.log(data)

Por último y como conclusión quedarían algunas recomendaciones como:

1. Usa variables de tipo let dentro de funciones, ciclos y demás bloques de código que su ejecución sea local, no dependa de otro código y donde dichas variables no tengan porque ser accedidas de manera global mediante el objeto window

2. Usa variables de tipo var donde dicha variable tenga que ser accedida en otros bloques de código y de manera global mediante el objeto window, es decir: var jq = $;

3. Usa CONSTANTES (const) para información como lo puede ser una API KEY, un TOKEN, un valor que SIEMPRE TENGA QUE SER EL MISMO, es decir: const my_credit_card_number = 1234567890;

NOTA: solo haz el ejemplo anterior si estás en nodejs, jaja

8
  • 1
    En el ejemplo del closure var y let tienen el mismo efecto. Commented el 17 mar. 2017 a las 19:02
  • 1
    @JoseHermosillaRodrigo tienes razón, estoy editando aún mi pregunta, de todas maneras quería poner un ejemplo y me pareció sencillo utilizar un closure para ello, gracias por la observación
    – Jorius
    Commented el 17 mar. 2017 a las 19:05
  • De nada!! Eso de que no se puedan acceder mediante window si que me parece interesante. No lo sabía. Saludos!! Commented el 17 mar. 2017 a las 19:15
  • @JoseHermosillaRodrigo Añadí una breve nota a la descripción del ejemplo para que sea más claro todo
    – Jorius
    Commented el 17 mar. 2017 a las 19:16
  • 1
    @Jorius las variables let no pueden ser redeclaradas como lo hace var
    – JuankGlezz
    Commented el 17 mar. 2017 a las 19:16
9

La diferencia entre let y var más importante es el alcance (o scope). var hará que estén definidas las variables dentro de la función más cercana. let hará solo está definido en el bloque cerrado más cercano. A parte var declara las variables en la parte superior de la función más cercana sin importar donde la declaremos, lo que se conoce como hoisting (+info).

let tampoco permite que creemos una variable con el mismo nombre, aunque si permite modificarla (al contrario que const). Digamos que const tiene el mismo efecto que let con la diferencia de que no podemos modificar el valor primitivo que almacene. Si que podríamos modificar las propiedades de un objeto con const.

//console.log(letvariable); //--> esto da error
console.log(varvariable);  // undefined -> Esto no ya que var hace que estén visibles en su función más próxima 

let letvariable = '';
var varvariable = '';

// De igual forma
(function(){
  //console.log(x); // -> error
  console.log(y); // undefined
  let x = 'x';
  var y = 'y'
})()


for(let a = 0; a < 9; a++){
}
//console.log(a); // a no esta definida
for(var b = 0; b < 9; b++){
}

console.log(b);

{
  let c = 'hello';
  var d = 'hello';
}
//console.log(c) // error

console.log(d);

let xx = '';
//let xx = 'xx'; //-> error

var yy = '';
var yy = 'aaaa';

console.log(yy);

const zz = 'aa';
//zz = 'bb'; // error

const objeto = {};

objeto.a = 'aa';
console.log(objeto);

Teniendo en cuenta esto, el uso de una o de otra depende de la funcionalidad que quieras tener en tu programa.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.