Var vs Let vs Const
Tags: javascript, hoisting, es6
Published: 2018-05-28 00:13:04

---
title: Var vs Let vs Const
published: true
description: It's all about hoisting
tags: Javascript, js, hoisting, es6,
cover_image: https://thepracticaldev.s3.amazonaws.com/i/u6crelrbwgal1r0xiwfv.png
---
#Var (Variable) 
Var has been with us since the beginning. You might be thinking, "brah this is too basic", but we got to understand how var's work **completely** and what happens behind the scenes in order to understand the use cases of Const & Let. 

##Scope 
The major differentiating factor from the other ways of declaring variables in js is the fact that vars have a function scope. For example:
{% runkit %}
(function(){
console.log(i);
//Var's value is undefined, this means the var is declared (but how?)
if("5"==="5"){
var i = 100;
}
console.log(i); //Var's value is 100, but i'm out of the if statement!
})();
{% endrunkit %} 

Why didn't the code break? Because js has a property called "hoisting". It tries to bring any sort of declaration (including __named__ functions)on the topmost scope as possible. Since Vars use function scope, it brings it to the first line of the function. Keep in mind the Var is just being declared, not being assigned a value. That's why we are getting the string 'undefined' instead of 'error:var i is not defined'. Here is an example of what exactly is happening behind the scenes: 
{% runkit %}
(function(){
var i;
//Var is declared but the value is not defined, so it automatically inherits the string 'undefined'
console.log(i);
if("5"==="5"){
i = 100;
//^ its changing var i's value from 'undefined' to the integer 100.
}
console.log(i); //Var's value is 100 like expected
})();
{% endrunkit %} 
Note: The variable's value can be accessed outside the if statement. 

#Let
Since we understand var's we can now take a deep look into let.
##Scope
Here's the twist. the scope for all let declarations is the fact that let statements use block scope similar to other OOPS programming languages such as Java or when 'use strict' in js. Block scope means that it can only be used within the whatever is being declared a.k.a the block. Let's (pun intended) take us old example and replace it with let:
{% runkit %}
(function(){
console.log(i); //Error: i not defined
if("5"==="5"){
console.log(i); //Error: i not defined
let i = 100;
console.log(i); //Should print '100' (delete the first two logs)
}
console.log(i);//Error: i not defined
})();
{% endrunkit %} 
As runkit suggests, i can only be accessed in the if statement after the line of the declaration. Hoisting has no power when we declare statements with let. 

#Const
Const is a very easy to understand, because it's essentially the same thing as var & let (aren't all of them).
##Scope
Const just like let uses block scope, so it has all the properties of let besides the ability to prevent redeclaration of the variable. Let's take a look at a few examples: 
{% runkit %}
(function(){
const message ="what up";
console.log(message);
message = "bye"; //Error: Message is already declared
console.log(message);
})();
{% endrunkit %} 
As you can see above, there are a few exceptions. If you have declared a string or a number the value can't be changed either. But when you are declaring as an object, it gets a bit interesting. 
{% runkit %}
(function(){
var message = {body:"what up", title:"rcs"};
//Runkit is being weird please fix the obvious syntax error
//If you know why this is happening please comment below!
console.log(message);
message.body = "bye";
message.send = true;
console.log(message);
message = 100; //Error: message is already declared
})();
{% endrunkit %} 
Message's properties can be modified, or added but message cannot be redeclared into a integer with a value of 100.

Here is a tiny chart I made:
![Js object dec chart](https://thepracticaldev.s3.amazonaws.com/i/808rhhq4f2ebwc9bp719.jpeg)