Variabels Declaration || ES6

#javascript #tutorial #webdev #programming

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:

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 :

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

// 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!