ES6 Tutorial - Differences between var , let & const
   Dec. 25th,2017
   Ismail Nassor Mbarack

So you're here to learn ES6.....Great! So roll up your sleeves and let's get started.In the previous tutorial we went through all the processes for getting Babel setup ready to start ES6 coding, if you haven't done so yet please go back to that tutorial and read a bit or if you already know what Babel is, how to set it up and you  just wanna get up and running quickly then you can simply clone this GitHub repository and check out a branch babel-installation.If you have no idea how to do that please check out this git tutorial. You may have noticed that we have to run the command npm run build every time we make changes in the file src/index.js , this isn't ideal for developing purposes.To fix this problem we have to add a new script to the file package.json which is just like the one we used in the build but the only difference is that this new script will have a tag -w which tells Babel to watch for any changes made in the src/index.js file.The script is "start": "babel src -d lib -w" , from now onwards all we have to do is to run npm run start and leave Babel compiling our ES6 code automatically once changes are made in the src/index.js file.



Back to variable declarations, you used to declare variables using var but in ES6 you'll start seeing let and const which may be confusing and when you try to google about them you gonna get even more confused since even developers themselves somehow haven't agreed on when to use either one of them.Let's start with the var keyword.Take a look at the below screenshots.




NOTE: The line numbers in the console screen are different from the line numbers in the src/index.js code since the code that got attached to the index.html file is the one in lib/index.js . If you wanna have the correct line numbers for debugging purposes then you can add source map which we'll discuss in the future tutorials.

Look at the code in index.js above, when the user is the admin we can get the expected result but when the user isn't we get two different results that are kind of giving confusion.We are trying to output the values of author and someRandomVariable , none of them is declared in the else block of our function but one returns undefined and the other returns Uncaught ReferenceError: someRandomVaribale is not defined and the execution stopped right there, the statement 'Hello Nanjing' wasn't printed out. What happened here is called "hoisting", the term hoisting means the default behavior of moving variable declarations to the very top of the current scope (to the top of the current script or current function).That means that the variables are treated as the screenshot below.


 As you can notice above, the variable author got hoisted but the variable someRandomVariable is completely undefined.Now let's code the same example above using let instead of var.Check the below screenshot.


See what happened, the variable author wasn't hoisted.Since it got defined within the if block it's scope just remained in the if block that's why the variable author is undefined in the else block. Try googling some dangers of variable hoisting in JavaScipt, it could really bring you some weird results at times.So you'd better use the let keyword in the variable declaration. I've stopped using the var keyword completely, I use let at all times.

Now let's take a look at the const keyword, as the keyword explains itself that it's constant meaning that the value is immutable but there's a weird habit about this keyword, I really don't know why it has to be this way. Watch the screenshot below.


See what happened when we tried to save the file?Babel compiler yelled at us for trying to re-assign a read-only variable. Well, that's the exact behavior that we expected. Now take a look at the next example


Gosh! See what happened there? the constant variable containing an array of people's names could be altered. Look what happens when we try to re-assign the same editors variable.


See what I told you earlier? It is constant but not completely constant.The variable can not be re-assigned but can be altered, different from the way it is in other programming languages.So you get a bit of protection to your variable but not fully protected.

This is how I code, I use const to define variables that won't change throughout the application and use let to define other variables and never use var anymore.