Understanding let and const.
Tags: javascript, ecmascript, let, const
Published: 2020-05-01 09:43:31

ES6 introduced two new ways of declaring variables in JavaScript let and const.
Is there any issue with var? No, 100 thousands line of code is working in production javascript without any problem using var. But its possible to accidentally misuse or create unnecessary weird situations.

Let's kick things by understanding issues with `var`.

- Declaration and value assignments :

{% gist https://gist.github.com/kamlesh-chavan/776abd011dab6ac64b5fd3efb4cbb970 %}

In the above code, we get `Kamlesh` printed first and then `Something else` get printed in console as we have reassigned the same variable `var name` with a different value. We can go ahead and reassign this `var name` to function, number, object, or anything. 
We just not only can reassign var based variables but also redeclare them and make new `var name = 'something'`. This is perfectly valid with `var` based variables, and this can get us in the wired situation like redeclaring the same variables by not knowing we have already used the same variable name.

- Scope:

{% gist https://gist.github.com/kamlesh-chavan/1f748868f2ca7d8c7a0d3581ffaadc20 %}

In the above code, we can see that we have used `var firstName` variables both inside and outside the `if` block, and `console.log(firstName)` are printing results for both without any error. 
`var` based variables are function scope, meaning they are not available outside the function. Also, they are not block scope variables, meaning they are available outside the block.



---

Things with `let`
- Declaration and value assignments :

{% gist https://gist.github.com/kamlesh-chavan/96bd1dd94b8de03bddcb504e483f5e92 %}

In the above code, when we assign value to, `name = 'Something'` and we get the desired output in the console. But when we try to redeclare, `let` we get an error "already declared". 
We can reassign `let` but can not redeclare `let` based variables. If we try to redeclare `let` based variables, we get an error "duplicate declaration".

- Scope

{% gist https://gist.github.com/kamlesh-chavan/35d4d2482ed3be8e45c7eb244c14f91b %}

Here in the above code, you can see when we declare `var firstName` inside the block and using it inside block prints the result, but using it outside block is giving an error "variable not defined".
This means that `let` variables are block scope variables meaning they are only available inside their declaration scope block.
If we need to use firstName outside the block, we need to declare it up above the if block, and it should work in case of the above example.


---

Things with `const`
- Declaration and value assignments :

{% gist https://gist.github.com/kamlesh-chavan/b2a7634c6ea71ac274e8b6286ba1c8e9 %}

Here we can see that we can not reassign `const` variables, nor can we redeclare them. If we try to do so, we should expect an error. 
Point to note here is the `const` based variables can not be redefined and also can not be reassigned.

- Scope

{% gist https://gist.github.com/kamlesh-chavan/9ade4c4a02340e6d29d1ba0c546211bc %}

The `const` based variables are also block scope variables, and they are only available with the block they are defined. If we try to access then outside the block, an error is expected.
It's always a good practice to start defining the variable as const and eventually if we determine that some of those values need to be reassigned then we use `let`.


Many people get confused with const value reassignment. Please see the below code.

{% gist https://gist.github.com/kamlesh-chavan/3252203fe4f93c15db59f4a15b986fa8 %}

You can assign an object to const and you can change the value of properties inside the object but can not reassign the value to `const person`. There is another example of const `someString = 'Dummy string'`, when you try to reassign this `someString` variable it gives an error.


---


Let's recap what we learned here,
- Start declaring variables as `const` unless their values need to be reassigned. 
- So `const` first `let` if we need to. (let's forget about `var`)
- Both `let` and `const` can not be redeclared. It gives an error.
- `let` Variables values can be reassigned.
- You can not reassign values to `const`.
- Both `let` and `const` are block scope. Whereas `var` is function scope.

---

Please read through hoisting in JavaScript. Hoisting is JavaScript's default behaviour of moving declarations to the top (not literally). It is another important concept to know about the variable declaration.
{% link https://dev.to/kamleshchavan/hoisting-in-javascript-30ej %}

---

Thank you for reading; this is my first blog ever. 🎉