Javascript ES6 Declarations Guide.
Tags: javascript, declarations, es6
Published: 2020-03-01 03:27:43

In this article, we will be discussing the very fundamental and the basic building block in your javascript programming journey i.e Variables. In JavaScript, there are three keywords used to declare a variable `var`, `let`, and `const` and each one affects how the code will interpret the variable differently.


NOTE: *JavaScript-only hoist declarations, not initializations. So all declarations are hoisted.*
-

{% medium  https://medium.com/@anwargul0x/javascript-es6-declarations-the-complete-guide-485d51039dd1 %}

# **1- VAR**

![Declaration Syntax with Var Keyword](https://miro.medium.com/max/629/1*UPhhGL64zVo92ywNdWdd9w.png)

This statement consists of a few parts:

* The declaration of a variable using the `var` keyword
* The variable name (or identifier), author
* The assignment operation, represented by the = syntax
* The value being assigned, "Anwar"

Declarations with `var` keyword can either be of global scope or function scope depending on the current execution context.

**Current Execution Context**: *Declaration inside function is in the function scope/local scope. Outside of the function, any declaration is in the global scope.*

![Variable Declaration with the var keyword.](https://miro.medium.com/max/874/1*i6N2M7IgKH5CeKcf7CITKw.png)

As above can be seen the declared variables are initialized with “undefined” by default. Hence var variables can be declared without being initialized.
`var` variables can be reassigned and/or redeclared within its scope. For Instance :

![Reassigned and Redeclared variable in Global Scope](https://miro.medium.com/max/1728/1*kpdcExbblTzklBteYwbhMQ.png)

![Reassigned and Redeclared variable in Function Scope](https://miro.medium.com/max/1762/1*K3owua2XHj77MF1ZQWSEkg.png)


Declarations with var keyword are hoisted to the top of their scope.

# **2- Let**
Declarations with `let` keyword are *Block scoped*.

**Block Scope**:

![Block Scope](https://miro.medium.com/max/797/1*wyp9Pm_553BKzJ-eEba9ZQ.png)

In layman’s term the definition of Block Scope, *“A boundary that starts from an opening curly brace { and ends on closing curly brace } while optionally enclosing some amount of code.”*

![Example of Temporal Dead Zone](https://miro.medium.com/max/1024/1*FB_E4wY1RJafVdg_AEKLuw.png)


Variables with `let` are **hoisted**. But by looking at the above example it seems let variables aren't hoisted but the matter of fact this happens due to concept **Temporal Dead Zone**.

since `let` variables are not initialized until the javascript engine evaluates the assignment. A time from variable creation to its initialization where they can’t be accessed is known as **Temporal Dead Zone**

If the JavaScript engine can’t find the value of `let` variables at the line where they were declared, it will assign them the value of *undefined*

![Reassignment is allowed but Redeclaration is not.](https://miro.medium.com/max/990/1*M3LOgCAeEoBNufCM57ZxQg.png)


Variables with `let` declaration can be updated/re-assigned but they can’t be redeclared.


# **3- Const**
Just like `let`, Declarations with `const` keyword are also **Block scoped**.

`const` variables are also hoisted. If the JavaScript engine can’t find the value of `const` variables at the line where they were declared, return an error.

![const variables can not be declared without assigning a value.](https://miro.medium.com/max/730/1*iKA3J5BcsTIws_1mIkIM9A.png)

`const` variables can not be declared without assigning a value.

![So const variables can’t be updated/reassigned a new value](https://miro.medium.com/max/831/1*7xefkQlbrrlTnZC0z3_uyw.png)

So `const` variables can’t be updated/reassigned a new value

![And also const variables can’t be redeclared](https://miro.medium.com/max/990/1*2LpR-8kGuYu6JXtSzJQBkg.png)

And also `const` variables can’t be redeclared.

## BONUS

![thinking](https://miro.medium.com/max/498/1*QG3qPCDNo2gKVN5fDC3dkQ.gif)

If you are thinking about something like “Hey Anwar, I got all that but you never answered! what would happen if we don’t use any of the keywords that you mentioned”.

Well, I will be keeping it brief since it already been become a lengthy post.

![Variables without declarations.](https://miro.medium.com/max/1746/1*XIDTZXOgTXqzE8DPeDjjKw.png) 


variables without declaration become a part of the **global variable**, in the console that would be `window` and in node.js `global`
## SUMMARY

![Summary.](https://miro.medium.com/max/1024/1*6xNL-BrNy2QjAZ2oz8r2vA.png) 

I hope you like this article and I will be posting more articles soon and most importantly All suggestions are welcome.

![See you soon!.](https://miro.medium.com/max/480/0*0mc4QYmX3rCaQCh9)