ecmascript-2015 – When to use var, let and const in ECMA Script 6?

Question:

In ECMA Script 6 you can define javascript variables with let and const , in addition to using var . What would be the recommendation to choose what type of variable definition should be used?

Answer:

To answer the question:

What would be the recommendation to choose what type of variable definition should be used?

First, each type of statement must be known and its scope clarified within the javascript execution:

The let statement declares a locally let variable, which can optionally be initialized with some value.

That is, example:

 (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

In the previous example it can be clearly seen how the variables foo and bar can only be initialized, accessed and changed only within the closure but they cannot be accessed and / or changed outside of it …

NOTE: in the previous example if let is replaced by var the same results will be obtained, I just put it as an example, a better example would be to say that a let variable defined in archivo_1.js could not be accessed in archivo_2.js while a variable var in archivo_1.js if it could be accessed and changed in archivo_2.js

It should also be clarified that variables of type let unlike variables of type var CANNOT be accessed through the global window object and they cannot be re-declared unlike variables of type var , example:

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

The var statement is a simple declaration of a variable, optionally initialized to a value.

That is to say:

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);
})()

The const statement is a constant that is presented in a block scope like let variables do but cannot be changed * ( the properties of the objects assigned to the constants are not protected ) or redeclared

When acting as let type variables, it must be taken into account that they cannot be accessed through the global window object, nor can they be re-declared and / or re-assigned with a new value

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)

Finally and as a conclusion there would be some recommendations such as:

1. Use let type variables within functions , loops and other blocks of code whose execution is local, does not depend on other code and where said variables do not have to be accessed globally through the window object

2. Use variables of type var where said variable has to be accessed in other code blocks and globally through the window object, that is: var jq = $;

3. Use CONSTANTS ( const ) for information such as an API KEY , a TOKEN , a value that MUST ALWAYS BE THE SAME, that is: const my_credit_card_number = 1234567890;

NOTE: only do the above example if you are in nodejs , haha

Post Views: 7
Scroll to Top