watching fun fun function this video is
part of a series where we explore
together a couple of new concepts in
JavaScript that arrived in Equus 56 you
can find all the episodes in a playlist
by clicking in the upper right corner or
in the episode description today we are
going to explore the difference between
bar let and Const in net my script 5 we
only had one way of declaring variables
bar but with at my script 6 we now have
3 let’s remind ourselves first how bar
works so let’s say that you have a for
loop this is the normally the first case
where you as a new JavaScript programmer
run into this little weirdness ah if
this was some 10 i + + to do and we
let’s run that alright so it counts up
now in other programming languages ah
this would be its own little scope right
I would only be accessible here however
in JavaScript ah we can actually
run it see that it’s 10 after the loop
this is super unintuitive when you come
in from another programming language
because you expect to have I to be
scoped to just this context here you
don’t expect it to survive outside of
that loop and the reason for that is
that there is only one type of variable
scope in our atmosphere 5 and that is a
function scope to illustrate this I’m
going to wrap all of this in a function
for you a bomb there we’re going to call
the function counter and we’re going to
call the function immediately run that
also works
now let’s try moving this after loop log
outside right boom now we get an error
eye is not defined and that is because
the variable scope for bar is just the
function so I here it’s going to be only
available inside counter here and it is
because of this that you often see
JavaScript code doing things like this
see here that I’m calling a calling
counter right after but you often see
JavaScript code that looks like this and
this is a function that is declared and
then it is immediately called this is
called an immediately invoked function
expression or iffy and people do this to
keep the variables that are inside the
Eevee’s to pollute the rest of the codes
it creates all the cohesive block of
safe-haven sorts I mentioned before that
JavaScript variables are hoisted what
does that mean well it means that they
are hoisted to the top of their function
so what we’re looking at here is not
exactly what the what will be run in
fact what the JavaScript compiler will
do in our interpreter and it’s going to
go through the code it’s going to find
variable declarations and it’s going to
take them and it’s going to push them up
to the the top of the code or the top of
the function ah that it’s in so it’s
going to do this so it doesn’t matter if
there’s uh many many lines of code here
it’s going to like always pull the
variable declarations up to the top
there’s also a horrible aspect of this
and that is if you forget the variable
declaration and only like declare it
immediately like this then it’s going to
and this is because what has happened is
that the javascript interpreter has put
it up here if there is no variable
declaration inside the function it’s
going to keep walking up the function
chain all the way up to the global or
the window object and when it when it
finds it it’s going to AH place a
variable there this is of course
horrible because it means that you can
just super accidentally our declare
global variables so this is actually one
of the things that the use strict
statement that you are encouraged to
always use prevents you from doing so if
I use the use strict statement and
trying to make this mistake it’s going
to throw an error it’s going to say that
I is not defined so I cannot assign to
it javascript is a language that are
trying to be as beginner-friendly as
possible and well in the beginning it
did some things that are were a bit too
helpful and this is this is one of them
and that is why are the you strict
statement was introduced a couple of
years back you should always use use
strict just to show you a final example
let’s say that I have for I equals nine
nine nine nine nine nine nine nine and I
semicolons ah there it works let me
mention this uh so you saw that there
when I ran this code was that all this
number is not a function that is because
I’m one of those horrible people that
don’t use semicolons and this is the one
trap where that actual causes an error
it’s when when I do this it’s tries to
interpret it as this so it’s trying to
call 911 as a function we
the with this function as as an argument
so if you are wanna code without
semicolons you need to remember that
every time you begin a line with a
parenthesis you should begin it with a
semicolon if you are interested in my
view of semicolons uh you can check out
the episode on that in the upper corner
or click it in the description down
below not back to the example so you see
that here we it’s logging out nine a
nine in the after loop and it’s logging
up this value here even though we are
using a variable with the same name
inside the function here and that is
because this is scoped to this function
only if we remove this var here and run
it that means that we are we get a 10
here and that is because I I is now
reassigning this variable here because
it will be looking finding here I uh hah
okay we have no idea and so it will be
walking up the trio of functions it will
be finding this I and it will be
reassigned that one and that is why it’s
slogging it out here ten and remember a
hoisting like even if we do it here
don’t it’s still going to be declared in
that space you see here nine nine nine
nine nine even though it’s assigning
here and that is because it’s getting
hoisted before it’s getting executed so
it’s really gonna be here when it’s
executing what let will not have this
issue um let ID and I’m gonna run it
boom it works as expected
that is because let introduces block
scope this variable here the one that we
left is
only going to be accessible inside of
this for loop this is also going to be
true inside of an if statement they say
if two very useful if statement uh we
assign we say let I equals eight eight
on that see that it’s still nine nine
nine nine nine
if I had just said this for instance it
would ah be eight eight eight eight
eight also I think if I said for I it
would still be eight eight eight eight
eight
because it in JavaScript this it’s
allowed to use for multiple times and I
think it will just simply translate it
to this yeah it will because because of
the hoisting so if I perhaps easier if I
say I declared this down here for some
reason
this would still like it would hoist
these two variable declarations these
two it will just man oh no this is not
valid I will just do this and I will
remove these this is unnecessary don’t
run so the assignment here I is over
writing whatever I was above and the
assignment above unless I do let that
would be nine and and again because left
will only be accessible inside of this
scope because let is block scope not
function scope like Voris a lot of
people say that left is the new for and
I agree there is simply no reason to use
far anymore
perhaps there are some very specific
reason but unless of course you can use
Const which you almost always can before
I tell you about
homes let me whine about why there’s so
much why’d you stop here this is a
packaging for my new desk ah this is my
desk I bought it because I am iPad these
hand paints like right here and like
inflamed I think said doctor ah it’s
making it really difficult to work and
it’s kind of freaking me out to be
honest so I’m buying replacing
everything that is even slightest bit of
economic just crazy how much you’re
dependent on your primary are working to
develop if you have any tips on on
dealing with arm pain of working at a
computer for long periods of times
please write them down below for the
benefits of your fellow programmers and
yeah me so anyway Const post is what I
really wanted to talk about in this
episode I you really just explained less
in order to talk about cons because
Combs is just like left except that you
cannot change it that’s not quite
correct
ah to be specific you cannot read a sign
post let me delete this and I’m gonna do
4 x equals 1 and I am going to console
log X to clear this and run it now
return 1 wait a minute we don’t need to
use bar anymore we have left
ah it will be exactly the same so let
can be reassigned so you can do x equals
2 and it’s going to be 2 however if I
declare this as Const as in constant
it’s going to give me an error boom
assignment 2 constant variable not
allowed not that constant doesn’t make
things beautiful so let’s say this is an
object uh where we had a strong fly ah 5
and I then I can actually do X plus y
equals six and run it and it would still
allow me to change a property of the
constant but I’m not allowed to
completely reassign it with a new object
say y equals or Z equals 9 or whatever
this will cause an error so it’s not
complete immutability but it prevents a
reassignment go back to the original
example in my opinion you should always
to change the variable in that case you
should use sled but only if you need to
now why is that well oh there you pan
for this one we want to minimize mutable
state this my friends is so important
there is not a lot of things in
programming that are universal truths
that are simply good but this this is
one of them so I have a dishwasher in
the kitchen and it I guess that it has a
bunch of microcontrollers and stuff in
it and sometimes it just stops working
it’s not user error I’m doing exactly as
it says in the manual nothing helps so
you do what every computer person will
do whenever they encounter a problem
like that they turn it off and on again
and it works this is and this is the
heat the user does exactly the same
thing before and after the restart but
after the restart the very same input
makes the thing work while it didn’t
before and this is of course because
some state in the machine got up
some set of inputs some timing in some
consolation made one variable be set
before one other
and the dishwasher programmers had not
thought about that case and that just
put the machine in an unworkable state
and the only way to make work again was
to just dump all the state and start
everything up from the beginning my
dishwasher always reminds me of this
truth that it’s so important to minimize
mutable state because it creates so many
problems mutable state is so easy to
make mistakes with so it’s a very good
idea to have a little of it as possible
in your project and putting coms
everywhere where you don’t use variable
reassignment it helps a little bit on
that way doesn’t help a lot but it hurts
a little it’s so nice when something
isn’t mutable ah for instance here like
we’re assigning X to be one we know that
X will from this point on always be 1
because in numbers in JavaScript
actually aren’t mutable uh we cannot do
like X plus plus here and and change it
it’s never going to work it becomes so
hairy in your project if you get an
object and that object has a bunch of
properties that are mutable you check
them and see that yeah ok they are this
value ah but as you progress down the
code or throw that object around after
things have happened the object might
have changed but that is horrible that
makes it so hard to work with Talaash
agree javascript in the browser saves
you from this because it is single
threaded single process so at least
things can change completely
mint execution like the Canon c-sharp or
Java but it can still happen in many
cases where the world just changes on
your feet but this is a principle that
is so useful in general not just in
JavaScript in the future we’re going to
have more and more cores so it’s going
to be very important that we learn to
programming in a way that is adapted to
the fact that there are going to be lots
of processes running through our code at
the same time once we have that the
with mutable state everywhere that just
becomes completely unrealistic to deal
with minimize mutable state that it’s
very important so whenever you use land
just ask yourself am I really changing
this variable and do I really need to
change it if not use Const because that
communicates to ah the future developer
the next developer in line that this
variable this will never change so let’s
say that this big big piece of software
and they see a Const at the top of it
and they are debugging something related
to it they can know that ok cool this
will never change
alright not be assigned a place and they
won’t have to look through the code in
the middle to try to figure out if it’s
ever change they already know that so
they can move on to other things it’s
very nice it’s a bit it’s commuting
communicating to the future developer or
who is probably going to be you so
that’s good for you too that is it for
today you have watched net so Oh funny
pond function I release these every
Monday morning Oh 800 GMT time if you
liked this episode you might wanna check
out the other episodes in this series by
clicking in the upper corner or in the
episode description and you might also
want to consider if this channel is
something that you want to subscribe to
I am mpj until next Monday morning thank you