Sunday, December 11, 2016

JavaScript: Stop Using var with ES6

Want to learn more about JavaScript? Get the Eloquent JavaScript.

With the advent of ES6, two new keywords for the definition of variables have come forth: const and let. Now, whenever you need to define a variable, don't use var -- start off with const.

// The old way
var name = "Angela";

// The new way
const name = "Angela";

Once you assign the value of a const variable once, it can not be changed later. In case you are going to modify the variable's value again, you can use let. This is very common with, say, a for loop:

for (let i = 0; i < someArray.length; i++) {
  // do something
}

In the loop above, the index variable i will have to be changed at every iteration, so we cannot just use const.

Keep in mind things like an array can be added elements even though you use const:

const pets = [];

pets.push("cat");
pets.push("dog");

console.log(pets); // => ["cat", "dog"]

The above is totally fine using const because the array reference was assigned only once. Adding elements to the array does not change the location of that reference. However, reassigning pets to a totally new array would give you an error using const. In that case, you would need to use let:

const pets = [];
pets = ["hamster"]; // error: Assignment to constant variable

let pets = [];
pets = ["hamster"]; // fine because pets was declared with let

Another very interesting aspect of using let in a for loop is that the variable declared within the loop header will only be available to the instructions in the loop body. To illustrate that, consider the following example, using var:

for (var j = 0; j < 3; j++) {
  console.log(j);

}

console.log('-----'); // separator


console.log(j); // no problem here!

The code output will be the numbers 0, 1, 2; then the console.log will print 3. Note that the value of j was available even outside of the loop body that is between the curly braces for the for loop. Now, if you use let, things change:

for (let i = 0; i < 3; i++) {
  console.log(i);
}

console.log('-----'); // separator

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

The output will be 0, 1, 2, and then an error will occur. That is because i is not defined outside the loop body. Using the let keyword, your variable will have local block scope, but not outside the area defined by the curly braces!

In conclusion, you should always start off declaring your variables with const. Then, if you later need to modify its value more than once, you can easily change the keyword const to let and everything will be fine! Also watch out for the scope rules regarding the new ES6 keywords, since they have block-level scope and will not be available anywhere outside the block. :)

For further reference, see:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

Learn more about JavaScript with the Eloquent JavaScript.