Difference Between var, let, and const 
Tags: javascript, beginners, tutorial
Published: 2020-11-07 13:10:26

With the introduction of ES6 we were given the ability to declare variables in a couple of different ways. Vanilla JavaScript uses var for all its declarations, but now we also have let and const. Do you know what the difference between them and how they are scoped?

**Scope**
Before digging deeper into the different types of declaring variables let’s take a quick look at the meaning of scope. Scope just means the location where variables are available.

```javascript
var global = "I am in the global scope";
```
A variable not inside a function is said to be of global scope.
```javascript
function funkyFunction(){
    var local = "I am in a local scope"
}
```
A variable inside a function has a local scope.


```javascript
if(true){
    let block ="I am in a block scope"
}
```

There is also a block scope and this is only for variables declare with const and let. These variables need to be in curly braces.

**Now That we know which scope we are in what does this mean?**

```javascript
var global = "I can be accessed anywhere";
```

Variables in the global scope can be accessed by any function. Meaning if it is in the global scope everyone has access to the variable. 

```javascript
var global = "I can be accessed anywhere";


function funkyFunction(){
    var local = "I can only be access within this function"
    console.log(global) // I can be access anywhere
}

funkyFunction();


console.log(local) // ReferenceError: local is not defined
```

The global scope does not have access to variables inside local scopes like functions. 

```javascript
function outter(){
    var outterVar = "I can be access by the Inner Function"
    console.log(innerVar); // ReferenceError: innerVar is not defined
    
    function Inner(){
        var innerVar = "I can NOT be access by the outter Function"
        console.log(outterVar); //I can be access by the Inner Function 

    }

    Inner(); 
}

outter();
```
The inner function does have access to its outer function local scope but the outer function does not have access to the variables inside the inner function. This is referred to as a lexical scope.
``` javascript
 if(true){
    let block = "I can only be access within the curly brackets"
    const block2 = "I am also stuck inside the curly brackets"
    var noBlockScope = " I can be access out outside of the curly brackets"
}

console.log(block); // ReferenceError: block is not defined
console.log(block2); // ReferenceError: block2 is not defined
console.log(noBlockScope) //" I can be access outside of the curly brackets"
```

Variables declared within a block ({}) are only available within the block. This only applies to let and const. Var does not have block scope and can be accessed. 



**Now that scoping has been discussed let’s see what other differences let, var, and const have**

```javascript
var myName = "Juan Restrepo"

var willChangeName = true; 

if(willChangeName === true){
   var myName = "Paco"
}

console.log(myName) // Paco
```

The main issue with `var` is that it can be redeclared and its value changes. This might not be an issue if you are aware of it but it can become a problem if you do not realize the `myName` variable has already been defined. If you have `myName` in other parts of your code you might get the incorrect output. This is the main reason `let` and `const` were introduce.
```javascript
let myName = "Juan Restrepo";
let myName = "Paco" // error: Identifier 'myName' has already been declared
```
A `let` variable can not be re-declared. 

```javascript
let myName = "Juan Restrepo";
myName = 10
myName = { myRealName: "Juan Martin Restrepo"}
myName = [ "Juan Restrepo"]
console.log(myName) //["Juan Restrepo"]


```
`let` allow us to change the value contained in the variable. This is a different story with const.

```javascript
const myName = "Juan Restrepo";
myName = "Paco"//Uncaught TypeError: Assignment to constant variable.
myName = 10; //Uncaught TypeError: Assignment to constant variable.
```
`const` follows the same idea as lets. It can not be re-declared and variable value can not be changed. If we change the value hold by the `myName` we will get an error. Variables declared with `const` that are objects ( array are also included) can be modified. 

```javascript
const listOfNames = ["juan", "paco"]
listOfNames.push("pepe")
console.log(listOfNames) //["juan", "paco", "pepe"]
listOfNames = [];  // Uncaught TypeError: Assignment to constant variable.
```
If we look at arrays we can push Pepe into an existing array declare with a const but we can not assign anything new to it (not even an array). 

```javascript
const juan = {
    name: "Juan Martin Restrepo", 
    age: 'old enought'
}

juan.age = 30; // updates the object without any errors

juan = {} // Uncaught TypeError: Assignment to constant variable.
```
The same idea can be used on objects.  I can change and even add properties, methods to an existing object declared with `const`. I can not assign a new value ( in this case a new object). 

Hope that helps understand the difference between const, let, and var. I will leave a small challenge for anyone who wants to attempt it. It should help you solidify what you read. 
```javascript
var global = " I am a global variable "; 


function outter(){

    var outterVar = " I live in the local scope of outter function "

    function inner(){

        var innerVar = " I live in the local scope of inner function "

        //console.log(outterVar, innerVar, innerInnerVar); // 1:  will this cause an error 

        innerInner();

        function innerInner(){

            var innerInnerVar  = " I live in the local scope of innerInner function "

            //console.log(outterVar, innerVar, innerInnerVar); // 2:  will this cause an error
                
                // 3. will the global variable be avaliable here?
                if(global === " I am a global variable "){ 

                    let block1 = " Hi, I am block Scope "
                    const  block2 = " Hi, Im also block Scope "
                    var freedom = " I am not block scope "
                }

                //console.log(block1, block2) //4.  will this error out ?
                // console.log(freedom)//5.  will this error out?  



        }
    }

    inner(); 


}

outter();
```
The challenge has 5 questions. Try to answer them without running the code. Once you are sure or if you can figure it out just run the code. You will either get an error in the console or get a string. I can explain the answers if someone needs additional help. Just leave a comment with the questions and I will reply back.