DEV Community

Cover image for Javascript ES6 Declarations Guide.
Anwar Gul
Anwar Gul

Posted on • Updated on • Originally published at Medium

Javascript ES6 Declarations Guide.

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.

1- VAR

Declaration Syntax with Var Keyword

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.

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

Reassigned and Redeclared variable in Function Scope

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

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

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.

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.

const variables can not be declared without assigning a value.

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

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

And also const variables can’t be redeclared

And also const variables can’t be redeclared.

BONUS

thinking

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.

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

SUMMARY

Summary.

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

See you soon!.

Top comments (3)

Collapse
 
smeet_j profile image
Smeet J Thakkar

This is very well-explained, thank you.

As a beginner I am still working with var and introduced to let, const via this blog, so really thankful/appreciative of it. Reading a lot about scoping chains and execution stack is on my to-do. That said, I just had a minor confusion on the const examples for reassignment and redeclaration. It seems the examples probably are incorrect? On both cases, we are reassigning (not redeclaring), right?

Collapse
 
anwargul0x profile image
Anwar Gul • Edited

Thank you @Smeet for pointing out the issue. I have placed the wrong image earlier but now I have changed it with the correct image.

Collapse
 
petrovnn profile image
Nikolay Petrov

thanks for the detailed manual