JavaScript ES6 - Var, Let And Const

Introduction and Background

Most developers who are new to the JavaScript language tend to end up writing error-prone JavaScript programs (just like me!). One probable reason is because of the belief that JavaScript variables are block-scoped. Until they realized it isn't, which results in a harder-to-read debugging nightmare. I've been there and I hate that feeling but it was a great learning experience.

In this blog post, we are going to discuss the following keywords: var, let and const. You might be thinking: I already know var, let's get straight to let and const. To give a bit more background to our reader, we will be including the var keyword to see the reason behind why let and const was added to the language. Ok, let's get started then.

The var keyword

Basically, when JavaScript reads your code all variable declarations using var are lifted to the top of local scope (if declared inside a function) or to the top of the global scope (if declared outside of a function) regardless of where the actual declaration has been made.

JavaScript scope

Local - variable declared within a JavaScript function, becomes local to the function and can be accessed only within the function.
Global - variable declared outside a function, becomes global.

Just remember, that JavaScript variables that are declared using the var keyword are called function scoped. It is accessible globally to the script if declared outside the function. Similarly, with the function scoped variables that are declared inside a function, then they become accessible throughout the function, but not outside the function.

Let us see this in action.

myVariable = 10;
console.log(myVariable); //output 10
var myVariable;

If you are going to try the example above it will output the number 10. Now, as you can see a variable can be declared after it has been used. It's kinda weird actually. But that's how JavaScript works.

Now, let see another example.

var outsideFunction = 100; //accessible globally
function myFunction(){
console.log(outsideFunction);
var variableInsideFunc = 10; //accessible throughout the function
if(true){
var variableIfBlock = 12; //accessible throughout the function
console.log(variableInsideFunc);
}
console.log(variableIfBlock); //outputs 12;
}
myFunction();

In the example above, you can see that the variableIfBlock variable is accessible outside the if statement. Now, if you are coming from a different language you wouldn't expect that to happen, right? Or probably, you'd expect something like an error or undefined. But, that's not the case when using the var keyword.

The let keyword

Variables that are declared using the let keyword are called block-scoped variables.

It actually behaves the same way as function scoped variables when declared outside a function, that is, they are accessible globally.

However, when the blocked scoped variables are declared inside a block, they are accessible inside the block that they are defined in (and also any sub-blocks) but not outside the block.

Let's see this in action.

let variableUsingLet = 12;
function myFunctionWithLet(){
console.log(variableUsingLet);
let variableInsideFuncUsingLet =10; //accessible throughtout the function block
if(true){
let variableIfBlockUsingLet = 12; //accessible throughout the "if" block
console.log(variableInsideFuncUsingLet);
}
console.log(variableIfBlockUsingLet);
}
myFunctionWithLet();
/**
output
12
10
'Reference Error'
*/

Now, the output is what we are talking about in blocked-scope. Or let's just say if you are coming from another language this is what you are expecting. Again, as you can see when we tried to access the variableIfBlockUsingLet outside the if block a Reference Error exception has been thrown.

Another good thing to mention about the var and let keyword is that they behave differently when it comes to declarations of the variables.

Let us see this in action below.

var firstVariable_1 = "hello";
var firstVariable_1 = "hello again";
console.log(firstVariable_1); //output => hello again
function myFunctionAgain(){
var functionVar = "myFunction";
var functionVar = "myFunction2";
console.log(functionVar); //output => myFunction2
}
myFunctionAgain();
/**
* Output
* hello again
* myFunction2
*/

Basically, when using the var keyword it just overrides the values when redeclared.

Now, let's see what's the behavior when using the let keyword.

let firstVariable_1 = "hello";
//Error: Uncaught SyntaxError: Identifier 'firstVariable_1' has already been declared
let firstVariable_1 = "hello again";
function myFunctionAgain(){
let functionVar = "myFunction";
//Error: Uncaught SyntaxError: Identifier 'functionVar' has already been declared
let functionVar = "myFunction2";
}
myFunctionAgain();

When using the let keyword, it basically throws an error. It doesn't give you the opportunity to redeclare the variable which is acceptable to many developers.

Why not remove the var keyword and use the let keyword as the de facto standard?

To answer this question, it's pretty easy because of backward compatibility. However; when writing the ES6 code, it is highly recommended to practice the usage of the let keyword instead of the var keyword because it prevents scoping mistakes, prevents accidental bugs that happened to me most the time and make code easier to read.

The const keyword

Using the const keyword declares a read-only variable that can't be reassigned. Now, to give you background. Before ES6, JavaSript developers usually prefix the variables that were supposed to be constant. See the example below.

var const_PI = 3.141;
function distanceWalked(circumferenceInMeters){
return Math.floor(const_PI * circumferenceInMeters);
}
console.log(distanceWalked(1000));

Based on the sample code above, we believe that PI should remain constant at all times in any case. However; there is still a chance to accidentally change its value somewhere else in the program. Prefixing isn't enough to keep track of the constant variables especially in a huge web application.

Thus, the const keyword comes to the rescue. It is introduced to provide native protection to the constant variables. So we can convert the previous example using the const keyword.

const PI = 3.141;
function distanceWalked(circumferenceInMeters){
return Math.floor(PI * circumferenceInMeters);
}
console.log(distanceWalked(1000));
PI = 3.141 +2; //Uncaught TypeError: Assignment to constant variable.

Constant variables are also block-scoped variables, just like the let variables. Therefore; both of these keywords follow the same scoping rules.

Before ending this blog, I'll be showing one more example. See it below.

const customer = {
firstName: "Jin",
lastName: "Necesario"
};
console.log(customer.firstName);
customer.firstName = "Jin Vincent";
console.log(customer.firstName);
customer = { firstName: "Jo Mariecris", lastName: "Necesario" }; //Error thrown
/**
* Output
* Jin
* Jin Vincent
* Uncaught TypeError: Assignment to constant variable
*/

The example above shows that when assigning an object to a constant variable, the reference of the object becomes constant to the variable and not to the object itself. Thus, the object is mutable (can be changed).

To explain a bit further, the variable customer stores the address (that is the reference pointer) of the object. Therefore, the address of the object is the value of the variable, and it cannot be changed. However; the object is mutable, changing the properties of the object was accepted.

However; when we tried to assign another object to the variable customer, an exception has been thrown.

Summary

In this blog post, we have discussed the var, let and const keywords. Not only that but we have shown the difference between those three when it comes to usage. I hope you have enjoyed this blog post, as I have enjoyed writing and coding the examples. Until next time, happy programming.