Instructor: Let's start with one of the most simple
and straightforward changes in ES6,
which is the two new ways of declaring variables,
which are gonna replace the var declarations
that we've been using so far, and these are let and const.
So this is the starter project for this section
that you can download from the course
from this section, as always.
So we will continue with our persons examples
throughout this section,
since we're already familiar with these.
And don't worry about these colored boxes here
on the right side.
We're just gonna need them for some examples later on, okay?
So how do we use let and const?
First of all, in all of the lectures during this section,
I will usually start by writing some code in ES5,
and then show you how to do it in ES6,
and where the big differences are.
So let's do that.
Let me just start by writing
that this lecture is about let and const.
Okay, so I'm going to start with the ES5 code, okay?
And let's just say we want to declare a name,
and we've done that a lot of times,
so we already know we use var in ES5 and the name,
and I'll call it name5, because this one is for ES5,
and then later I'm gonna use name6, okay?
Because we cannot duplicate these names,
so we need two different variable names.
So Jane Smith,
and let's say her age is 23,
and we then change that name to Jane Miller.
So imagine that Jane married someone
with the last name of Miller.
So we can simply mutate this name variable here, right?
So let's console.log this,
and you will understand why I'm doing this
in a second, okay?
So let's console.log this and see what happens,
and of course we see Jane Miller here.
Alright, so let's now write the same thing in ES6.
So instead of var, we can now choose
between const and let,
and const is for constants,
which means for values that we don't want to change,
and let is like the old var,
so this is for values that we actually want
to change or mutate later on.
So let's declare the name as a constant,
and so we use const,
name, and I'm calling it name6 for ES6,
and I'm gonna call her, again, Jane Smith,
and now the age, and since we know that the age can change,
we're gonna use let, right?
So now Jane is 23, but next year she's gonna be 24,
25, and so on.
So this is something that can mutate and so we use let.
So age6, 23.
Alright.
Let's now suppose again that Jane wants to marry
and change her name.
So if we now say, name6 should be Jane Miller,
and then console.log the result of that,
such as we did before,
let's see what's gonna happen.
So we get an error here,
assignment to constant variable.
And that makes sense, right?
Because, as I said, this const keyword here is used
to declare constants, so variables that are immutable,
which we cannot change, and if we then attempt
to change the value of a constant,
it gives us this error here.
Okay, so again, in ES6 we no longer use var,
but instead we use const if we have a variable
that's not gonna change its value over time,
and we use let if we want
to change the value of the variable.
So we now have a way to declare constants,
but that's not the only thing that's new with let and const,
and that's because variables declared with var
in ES5 are function-scoped, but variables declared
with let and const in ES6 are block-scoped.
Alright?
So function-scoped and block-scoped,
and that's a huge difference.
So let's see what it actually means with a new example.
So now I'm gonna write a simple driver's-license function,
okay?
So just that we have something different here.
And I'm gonna start again with ES5.
So function driversLicense,
and we are going to do something
if the person passed a test, okay?
So we say, if passedTest,
then the first name is John,
and that's actually not right,
and the year of birth is 1990,
and then we want to console.log this.
Okay, so this may not be the most realistic example, really,
but this is just to show you something,
and you will see in a second when we write the ES6 code.
Okay, so don't worry.
So now let me just console.log this,
firstName, let's say, born in,
and of course, yearOfBirth,
is now officially allowed to drive a car.
So let's call this function, actually,
and we say that the person passed the test,
so we pass true into the function,
and let's see what happens.
Okay, first we, of course, have to comment out this part
of the code here,
so that it doesn't get in our way.
Okay?
And now, of course, it is printed out
to the console just right.
So let's now do the same function for ES6.
Let me just change this here to 5,
and then I'm gonna copy it,
and here's also 5.
ES6, and 6, and 6.
Okay?
Here we can use a let instead of a var, okay?
Because let's assume that the firstName can also change,
so let can be a good change here,
and then for the birth year, of course,
that cannot change, right?
It's impossible that you change your birth year,
so this will be a constant.
And now, of course, if we print it to the console,
it will work, right?
But now it's time to see how let and const are different
from var, so let's change this line here,
where we actually use these variables,
firstName and yearOfBirth, out of the if statement, okay,
and put them here,
and then do the same thing in here.
Alright?
Let's see what happens right now.
Okay, so we get an error here in line 41,
which is this one.
So the first one worked just fine.
This console.log worked because we can use the firstName
and yearOfBirth variables here
in the same driversLicense function, right?
But in here, it's different.
We get an error saying that firstName is not defined,
which is strange, right?
But that's because, with let and const,
the variables are not function-scoped but block-scoped.
So what is a block?
A block is simply all the code that is wrapped
between these curly braces here.
So each time that we have an if statement or a for block
or a while block, we're actually creating a new block,
and the variables declared
with let and const are only valid, are only accessible,
by the code that are inside of the same block.
So if we move outside of the block,
which is what we did here, then we no longer have access
to these variables that are here.
So this is similar to what we had before,
with functions, right?
So with the var keyword, it works differently.
We have access if it's in the same function, right?
If we now moved out this console.log to outside
of the function, then it would also no longer work,
because the variables declared with var,
as we learned throughout this course,
are only accessible inside of a function,
but not from the outside.
So this is not going to work, right?
So we have this error here.
So let's move this back
and come back here.
So this really is a bit different
from what we were used to do up until this point, right?
So again, we now no longer have access
to the variables created inside of a block,
which is this one here in this case,
because these variables are now block-scoped
and no longer function-scoped.
So suppose we wanted to use these variables here,
outside of the block.
Then we would just do it the way that,
before, we did it with functions.
So we can declare these variables outside of the block,
which, before, we did outside of the function,
and then define the variables in here.
So let's say, firstName
and const yearOfBirth.
And so now, in here, we can simply define them,
and then it should work.
Or does it?
Because actually, this also does not work.
It only works for the let, the declarations.
So we simply cannot define a constant here in a block
and then use it outside of that block.
If we really want to use this constant outside of the block,
then we have to declare the constant out here.
Then, of course, it's gonna work.
So, now it works again.
So we declared the firstName variable here,
outside of the block, but didn't define its value,
and then defined it in here,
and that's why we can then use the firstName variable
outside of the block, which is the exact same thing
that we used to do with functions before, right?
So this really is a huge difference
between what we had before, but that's not even all.
Suppose we would use a variable here,
before we actually declare it.
So let's say we say, console.log of the firstName.
So, do you remember what this is going to print out
to the console?
And I really hope that you do.
And, alright, it's undefined, and that's because,
in execution context, all variables are hoisted
and set to undefined, right?
And so if we then use them like this
before we actually declare and define them,
we get undefined.
Now in here, it doesn't work quite like that.
So let's say we wanted to use the firstName variable
in here.
So let's see what that gives us.
And now we get a firstName is not defined error.
So now we can effectively not use a variable
before it was really declared,
and I actually think this is a good thing,
because it may prevent some errors.
Now this happens because
of something called the temporal-dead zone,
which basically just means
that the variables are actually hoisted,
but we still cannot access them before they are declared.
So this is just a technical term,
but what you need to know is
that we can only use a variable
after we actually declare it and defined it.
Okay, and just to finish this,
let's just take a look
at maybe a bit more practical example, alright?
So let's say that, in our code, we were using an i variable,
okay?
So let i be, let's say, 23.
So this was just a normal variable
that we were using in our code, okay?
And now suppose we have a for loop, okay?
And we usually declare a variable in here,
which is a counter called i, right?
So i was the variable that we used all the time,
so let's also use it here.
So we say, i starts at 0,
and this would go on before i equals 5,
so as long as i is less than 5,
and then i should be incremented.
So this is all nothing new for you, right?
And then we just console.log all of the is.
Okay.
Now, for that, we also console.log i out here,
remember, which is the variable that we had up here.
Alright?
And before we can run this,
let me just get rid of this line,
so that we don't have that error,
and so, let's see.
Okay, so we have 0, 1, 2, 3, 4,
which are these console.logs,
and then i is 23.
So assigning other values to i in here,
in this for loop,
doesn't change the i variable that we had defined here,
with a let.
And again, that's because these variables are block-scoped.
And so this i variable here is a completely different
variable from this one, so they happen
to have the same name, but it really doesn't matter,
because they are separate variables.
It's like having var i inside of a function
and var i outside of a function,
so these would be also two completely different variables,
right?
And now, here with the block, in ES6,
it's exactly what happens as well.
So i, here, is a completely different variable
in this block, than this i here in this other,
let's say, block.
So if we had var instead,
let's just very quickly test this out,
what do you think would i be?
And that's right, it would be 5,
because these variables, of course, are not block-scoped.
So this is now not a different variable,
and so this 23 here will be overwritten,
and in the end,
we have the final i from this counter variable here.
So, I really hope this makes sense,
and that you understood the main differences
between var, const, and let, okay?
So, as a conclusion of this lecture,
if you want to start using ES6,
then the best practice is actually
to use let for variables that will change the value
over time, and const for variables
that cannot be reassigned,
so that are constant throughout our code.