Learn ES6 features

If you want to learn React or Angular or other Javascript frameworks you should first , start with ES6 basics . ES6 is a new version of Javascript that has implemented new features that improve Javascript functionalities and syntax . In this series of tutorials , you will learn everything you need to know about it . This is a series of articles .

1- let , var , const

In javascript , we don’t declare the type of variables like in other languages like Java , C or C++ . In fact we declare variables with these three key words : let , var and const , like shown in the example below :

Note that , if you don’t initialize the variables , they will be automatically assigned to undefined .

Now what are the differences between these 3 ?

1. var

var is used to declare global variable . A global variable is a variable we can access from anywhere in the code . let’s see an example :

as you see , var is declared in the scope of if statement but it can be accessed outside of it with no error however if it was declared with let or const key word , it will generate an error because the program won’t recognize it . We will see that later on .

In ES6 , we use the scope feature , which can be : if statement / loop / while or simply : {}

if a variable is declared with the var keyword in the main program which can be considered as a scope itself , or in any other sub scopes , it can be accessed from anywhere in the program . However , the only situation where var is local to where it is defined is , when it is declared inside a function . In this case , it can only be accessed inside the function and the scopes inside the function . See the example below :

The use of var is very delicate , most of the time we only need a variable in a single scope , sometimes we use the same name of the variable later on in our code , in this case the first declaration will be altered by the new declaration and this may lead to errors . For a remedy to this problem ES6 brings new keyword to declare a variable which is let

2. let

Opposite to var , let is only accessible in the scope where it is declared and its sub-scopes , but it is undefined else where in the code , outside of the scope where it was declared . See the example below :

the output you see , means the variable name is unknow to the main program because it was declare inside the scope . So it is local to the scope where it was declared . Let’s change that :

let’s see a comparison of let and var now :

with let :

with var :

NB : When we use loop , we only need the increment variable in the loop , so make sure to declare it with let

3. const

const is similar to let in its scope-local dependecy , but the difference between the two is that a variable declared with const can’t be changed later on in the code . The value which was assigned to it when declaring it is fix and can’t be altered .

if we try the same code with let :

Thank you for reading this article , keep up with the next articles to finish all ES6 features

I used jsbin.com for compiling the code