Variabels Declaration || ES6
Tags: javascript, tutorial, webdev, programming
Published: 2022-01-01 00:59:28

Bismillah,

---

Hello all friends, My name is Syafiq person who enthusiastic about web programming. Here I want to write down what I have learned about EcmaScript 6. I want to document my learning results in this dev.to.

---
## 1. **var**
In this article, I want to talk about how to declare variables in EcmaScript 6. Okay, let's start…
We know before the ES6 update when we will declare a variable we use the **var** keyword but there are many problems when we use **var** for example when hoisting in javascript. Maybe you ask what is hosting? hoisting is lifting a var variable to the top when it will be executed even though we declare it below it. Confused ? Let's explain with the code below:


```javascript
function makeIceCream(isCold) {
    // var iceCream; => if you use var then the variable will be stored above first
    // before execution
    if (isCold) {
        var iceCream = "this is chocolate ice Cream";
    } else {
        var iceCream = "this is grape ice Cream";
    }

    return iceCream;
}

console.log(makeTea(false));
```

Shouldn't this produce an error? but why does it display the output "This is grape ice cream" ? because of the hoisting earlier. Behind the scenes the javascript creates **var iceCream = false;** above the **if** and that's what is called hoisting friends. It's a little tricky to understand the concept of hoisting, especially for me, a beginner, but with the example above, I hope you can understand. And because hoisting is not a lot of programmers who have difficulty understanding the hoisting, so to overcome this problem in ES6 a new variable declaration is made, namely **let** & **const.**

---

After discussing about the var variable and its hoisting, let's move on to declaring the latest version of variables in ES6, using **let** & **const**

## 2. **Let**
What is let in javascript ? let in javascript is a new variable declaration syntax that is in the ES6 version. Let's go straight to learning how to make this let useful in our program? see the code below :

```javascript
function getIceCreams() {
    iceCream = "this is chocolate ice cream";
    console.log(iceCream);
    let iceCream;
}

function getIceCream() {
    let iceCream;
    iceCream = "this is chocolate ice cream";
    console.log(iceCream);
}

// outputnya 

getIceCreams();
// ReferenceError: iceCream is not defined
getIceCream();
// this is chocolate ice cream


```
The question is why the code that **getIceCreams() **produces an error while the code that **getIceCream() **does not produce an error? yes the problem lies in whether the let variable is placed under or not, that's the problem. Have a look at the program where the let iceCream is above or under the variable declaration? Although it looks simple but can cause bugs if we do not understand this well.

---
## 3. **const**
Then what is const ? const is similar to let but the difference is that it cannot be changed again after we give it a value, meaning that the value in const absolutely cannot be changed, whereas let can be changed freely by us. For example as below

```javascript
// Let
let name = "syafiq";
name = "Rizky Fauzi";

// Const
const age = 19;
age = 20;

console.log(name);
// name Rizky Fauzi
console.log(umur);
// TypeError: Assignment to constant variable.

```
Variables that use **let** we can change while variables that use **const** after we provide a value we can't change it anymore

---
So which one to use between **let** and **const** ? The difference between the two variable declarations lies in whether or not the contents of our variables can be changed.
Let => is used if you want to update the variable value again and again(not default)
const=> is used if you don't want to update the value of the variable(default)

---

Hope that helps!

## Like the post?

- Follow me on github : [@syafiq1331](https://github.com/syafiq1331)

Thank for reading !