var, let, and const

var:

Prior to 2015, the only way to declare a variable in JavaScript was by using the var keyword. One would declare a variable such as:

var someNumber = 1;

The var way of declaring variables sufficed for all use cases but it proved to be a bit confusing at times.

For instance, the var keyword allowed you to declare a variable with the same name, multiple times like:

var num;
num = 8;
num = 10;
console.log(num); // output : 10

This behavior led to unintended bugs and lots of unnecessary bug hunting.

Secondly, var is not blocked scoped. What this means is that the same variable name can be unintentionally (or intentionally) used inside and outside a code block. For instance:

var x = 5;

if (x === 5) {
var x = 7;
console.log(x); // expected output : 7
}

console.log(x); //expected output : 7

Notice here that JavaScript allowed us to create a two variables with the same identifier x but in actuality two separate variables with different values were not created, it simply reassigned the variable pointer to the new value since var does not acknowledge block scoping.

let & const:

So now that we see the pitfalls of using var we can now appreciate the introduction of the let and const variable identifiers introduced in JSES6 (ECMAScript 2015). These new keywords addressed the pitfalls associated with var and provide developers with more flexibility in terms of scoping and value assignment.

Scoping:

One of the biggest differences between let / const and var is scoping. Variables declared with let & const are block scoped. This means the following would occur:

var a = 20;
console.log(a); // Expected output: 20
{
let exe = 30;
const num = 10;
var a = 40;
console.log(exe); // Expected output: 30
console.log(num); // Expected output: 10
}
console.log(a) // Expected output: 40
console.log(exe); // Uncaught ReferenceError: exe is not defined
console.log(num); // Uncaught ReferenceError: num is not defined

As you can see here, variables declared by var can be accessed (and re-declared) inside code blocks. However, variables declared with let and const are scoped to the code block in which they were defined and cannot be accessed outside of that block. Therefore variable scoping is one of the most noticeable changes with the introduction of let and const.

const:

The second biggest difference in the new variables declared in ES6 is with how const handles value assignment. A variable declared by const MUST be initially declared and cannot be redeclared.

This means that the following would occur:

const num = 3;
num = 5; // Uncaught TypeError: Assignment to constant variable.

Besides this, variables declared with the const keyword behave the same as let variables in that they are both block (and function scoped).

These are the main differences introduced by the let and const variable declaration keywords introduced in JSES6 (ECMAScript 2015). And now with additional options you can choose your variable declarations with more strategy and thought as to their intended functionality.