JS fundamentals: const vs var vs let?
Tags: javascript, beginners, webdev, tutorial
Published: 2020-08-04 05:55:16

A lot of features came out with ES6 (ECMAScript 6. ES2015, Harmony, ESNext), many of these features are already supported by the newest features.

One of these features is the incorporation of new ways to declare variables, but you might be wondering what's the difference? what makes them better than our friendly var?

In the next posts we are going to be discussing the Javascript fundamental concepts so we can switch to the latest syntax if we haven't yet. In this post we will discuss about the differences between var, let and const in relation to their use, ***hoisting*** and ***scope***.

##Terminology 📕##

1. **Scope:** In Javascript the scope refers to the current context of code that determines the accessibility (visibility) of a variable. There are 2 types of scope:

	-Global Scope: Variables declared outside of a block.
	-Local Scope: Variables declared inside of a block.

2. **Hoisting:** Is a Javascript mechanism that moves the declaration of variables and functions to the top of their scope before code execution.

*We will talk more about this concepts later on this post.*

##Const ❗️##

***Const doesn't mean "constant" it means one time assignment***

### *Const cannot be updated or re-declared*

Const keyword is a litttle tricky especially if you have used them in other languages. A constant is a variable with an inmutable reference. When we declare a primitive type as const we cannot change its value, if we try, we will see an error in the console, as you can see here:

```javascript
const PI = 3.1415926535;
console.log(PI);
PI = 3.1416;
console.log(PI);
```
![Console Error](https://res.cloudinary.com/drvosvqt0/image/upload/v1596432261/Screenshot_3_o6fsfc.png)

***

The same way if we try to re-declare a const variable we will see this error:

```javascript
const PI = 3.1415926535;
const PI = 3.1416;
```
![Console Error] (https://res.cloudinary.com/drvosvqt0/image/upload/v1596432156/Screenshot_2_hhdlzy.png)

***

This means that when we want to declare a variable using the const keyword, we must initialize them at the time of the declaration or we will see another error message:

```javascript
const PI;
PI = 3.1415926535
```
![Console Error](https://res.cloudinary.com/drvosvqt0/image/upload/v1596432632/Screenshot_4_panaml.png)

***

However this behavior changes when it comes to non-primitive types (objects, arrays, etc) as const. The way the const keyword works with objects is this:

We cannot re-declare the object but we can update the value of its properties and we can add more properties without returning errors.

```javascript
const user =  {
  name: 'Obi-Wan',
  age: 30
};

console.log(user);

user.name = 'Luke';
user.lastname = 'Skywalker';
user.age = 25;

console.log(user);
};
```

![Console Output](https://res.cloudinary.com/drvosvqt0/image/upload/v1596435299/Screenshot_6_lcpusa.png)

### *Const is block scoped*

Before ES6 we had *local/function scope*  and *global scope*.
*function-scoped variables* were only available inside the function where they were declared. Now with ES6 and with the addition of the let and const keywords, we have the **block scope** where block code means the code bounded by {}, anything within curly braces is a block. We will this explain in the next example: 

```javascript
const PI = 3.1415926535;

function cirleArea( radius ){
  const PI = 3.1416;
  console.log('PI inside circleArea function: ', PI);
  return radius*radius*PI;
};

console.log('PI outside circleArea function: ', PI);

var area = cirleArea(1);
console.log("The area is: ", area);
```

![Console output](https://res.cloudinary.com/drvosvqt0/image/upload/v1596433774/Screenshot_5_ma6wcq.png)

As you can see, we define a PI constant outside our circleArea function, and we define another constant with the same name inside our function, since they have different scope, we won't run into a re-declaration error, also if we console log both of this variables in their respective scope, we will see the different values. 

***

### *Hoisting of const*

const delcarations are hoisted to the top but is not initialized. so if we try to use a const variable before its declarations, we'll get a Reference error.

```javascript
console.log("The value of PI is: ", PI);
const PI = 3.1415926535;
```
![Console Error](https://res.cloudinary.com/drvosvqt0/image/upload/v1596435876/Screenshot_7_it7ifh.png)

##Let ✅##

Javascript now has lexical variable scoping, we create code blocks with curly backets. With functions, these curly brackets block off the scope of variables, but if we think about if-else statements, we might assume that these blocks would also block variable scope, before the addition of the let keywork this wasn't the case as we can see in the next example:

```javascript
var name = 'Peter Griffin';

if(true){
  var name = 'Homer Simpson';
  console.log(name);
}

console.log(name);
```

![Console Output] (https://res.cloudinary.com/drvosvqt0/image/upload/v1596472134/Screenshot_8_uxy88k.png)

The name variable inside the if block resets the value of the global name variable.

Fortunately with the let keyword, we can scope a variable to any code block. Using let protects the value of the global variable and that's why let is now the preferred for variable declaration.
We can see the same example here:

```javascript
var name = 'Peter Griffin';

if(true){
  let name = 'Homer Simpson';
  console.log(name);
}

console.log(name);
```

![Console Output] (https://res.cloudinary.com/drvosvqt0/image/upload/v1596473053/Screenshot_9_qvltzy.png)

### *Unlike const, let can be updated but not re-declared*

Any variable declared with the let keyword can be updated, but if we try to re-declare it, we will get an error as we can see in the next example:

 ```javascript
let name = 'Peter Griffin';
console.log(name);
name = 'Homer Simpson'
console.log(name);
```

![Console Output](https://res.cloudinary.com/drvosvqt0/image/upload/v1596475990/Screenshot_11_thqnc3.png)

***

 ```javascript
let name = 'Peter Griffin';
console.log(name);
let name = 'Bart Simpson';
console.log(name);
```
![Console Error](https://res.cloudinary.com/drvosvqt0/image/upload/v1596476032/Screenshot_12_khewhq.png)


### *Let is block scoped*

A variabled declared in a code block using the let keyword will be only available within that block.

### *Hoisting of let*

The same way that const, let delcarations are hoisted to the top but they are not initialized, so if we try to use a const variable before its declarations, we'll get a Reference error.

##What about our old friend var? 👨‍🦳##

Most of the time we can replace let with var and vice-versa and expect things to work, but there are some important points that we have to know.

### *var has no block scope*
When we declare a variable using the var keyword they are either function-wide or global. They are visible through blocks:

 ```javascript
if(true){
   var name = 'Peter Griffin';
}
console.log(name);
```
![Console Output](https://res.cloudinary.com/drvosvqt0/image/upload/v1596517508/Screenshot_12_qfthsd.png)

***

As we can see, even when we declare the variable inside the if block, the variable lives outside. We will see the same behavior with for loops blocks. The only different scenario is if the code block is inside a function, in that case the variable becomes a function-level variable.

 ```javascript
if(true){
   var name = 'Peter Griffin';
}
console.log(name);
```
![Console Error](https://res.cloudinary.com/drvosvqt0/image/upload/v1596517935/Screenshot_13_u52ceq.png)

***

### *var can be re-declared*
### *var can be declare below their use (This is possible because declarations are hoisted, but assignments are not)*


 ```javascript
function add(a, b){
  result = a + b;
  console.log(result);
  var result;
};
add(5, 2);
```

![Console Output] (https://res.cloudinary.com/drvosvqt0/image/upload/v1596518264/Screenshot_14_m8tq0p.png)

***

##💡 Summary 💡##

1. Scope means the code context where variables are available for use. 👀
2. Hoisting is a Javascript mechanism that moves the declaration of variables and functions to the top of their scope before code execution. 🔺
3. Const doesn't necessarily means that holds an immutable value, it means that holds an immutable reference and it behaves different depending the type of variable that we assign to. But even though our code can be more meaningful if we use the const keyword. 👍
4. Let is similar to var, but let is block scoped. 💪
5.- Reading across many articles I found that many authors recommend to avoid the use of var, there's no need to use it anymore. 👎

I believe that there's always something to learn from everyone, hopefully this post will be useful for somebody, I'm still learning, so any feedback would be appreciated. Have a nice day! ✌️