Variable Keywords in JavaScript: var, let, and const

There are three keywords in JavaScript that are used to declare variables. These are var, let, and const. This article will show the main differences between the three of them.

var

the var keyword is the oldest of the three in JavaScript. Unlike const and let, it is globally scoped, not block scoped. The one exception to this rule is if the var is declared within a function. We can refer to the var keyword as "function scoped" for this reason. Here is an example:

if(5 === 5){
var some = 6;
};

function test(){
  var thing = 5;
};
console.log(some);
//prints 6 to the console

console.log(thing);
//Console throws ref error: thing is not defined;

The var keyword is also unique in that its declaration is hoisted to the top of the global scope as long as it is not declared within a function. The var is initialized with a default value of undefined until it reaches the point in code where it the author initialized it. For example:


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

Outputs:

undefined
bar


let

The let keyword shares a couple similarities to the var keyword in that it can be reassigned and can not be accessed when declared within a function. Unlike var, a let variable is scoped to if blocks and loop blocks. It is scoped to whatever set of curly braces contains it. We can more simply call lets "block scoped" because it is confined to whatever code block encapsulates it. It should be mentioned that the let variable is hoisted to the top of the scope, but unlike var, the let variable is not initialized as undefined until it reaches the point code where the let was first initialized. The console will instead throw a reference error. An example will provide more detail:

`
if (2 + 2 === 4){
let town = 'car';
console.log(town); // prints 'car'
};
console.log(town);
//throws reference error: town is not defined

console.log(babe); ref error: babe is not defined;
let babe = 'pig'
console.log(babe); // prints 'pig';
`

const

The const keyword is very similar to let. It is block scoped. It also is hoisted in the same fashion as let. The major difference is that it can not be reassigned. Also const variable can not be declared without initiation. However you can perform functions on const variables. Let's take a look:


const TOP = 'hat';
TOP = 'dog'; //Type Error: assignment to constant variable;

`
const NUMBERS = [1, 2, 3]
NUMBERS.pop();
console.log(NUMBERS); // prints [1,2];

Conclusion

It is generally best practice to use const by default when declaring/initializing variables. Because let and const are block scoped, it keeps the global object from being cluttered with many undefined variable at the top. Another reason is that it acts as a security measure to keep developers from making mistakes when defining variables. If one decides that they are going to need to change the value of a const, one can always go back and change the initial const to a let. If a developer knows that they will need to change the value of a variable later on, they can use let instead of const.

`