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
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