Coding

When to use which (and how they differ).

  • 00:00:00 hi in this video we'll have a look at
  • 00:00:02 var let and cons three different ways of
  • 00:00:05 creating variables in JavaScript and in
  • 00:00:08 this video we'll have a look at how
  • 00:00:09 these ways differ what's special about
  • 00:00:12 the variables created in the different
  • 00:00:14 ways and which way you might want to use
  • 00:00:17 when writing your JavaScript code no
  • 00:00:19 matter if it's vanilla JavaScript or if
  • 00:00:21 it's using any framework like angular
  • 00:00:23 view or react or anything else
  • 00:00:32 so let's get started with this and let's
  • 00:00:34 get started with war which is kind of
  • 00:00:37 the the oldest way you could say of
  • 00:00:39 creating variables in JavaScript
  • 00:00:40 typically these days we create variables
  • 00:00:43 with let and Const but it's important to
  • 00:00:45 understand that let and Const weren't
  • 00:00:47 just introduced because they sound
  • 00:00:49 cooler if they do I'm not sure but that
  • 00:00:52 there actually is a difference between
  • 00:00:54 var and let and constant for that let's
  • 00:00:56 start simple let's say we're having an
  • 00:00:59 age variable which stores a value of 30
  • 00:01:01 unsurprisingly if I then console.log age
  • 00:01:04 here we will see 30 here this is the
  • 00:01:08 lock code pen gives me here now that's
  • 00:01:11 of course not too surprising or too
  • 00:01:13 strange the H variable which we create
  • 00:01:16 here is created as a global variable
  • 00:01:18 because it's created in our script like
  • 00:01:21 this it's attached to the global scope
  • 00:01:24 and anywhere in our script we can access
  • 00:01:26 it and as long as we don't assign a new
  • 00:01:28 value it will always hold that value of
  • 00:01:31 30 here now that's the variable like
  • 00:01:34 this it gets more interesting if we add
  • 00:01:36 a function let's say we have a function
  • 00:01:39 create char for a create character and
  • 00:01:41 now in there we have that variable now
  • 00:01:44 if we try to lock this here we will
  • 00:01:47 actually see that I get an error here
  • 00:01:50 age is not defined now it makes sense
  • 00:01:53 because I never called that function
  • 00:01:55 right so let's call create char here and
  • 00:01:58 still we still get that same error the
  • 00:02:01 problem here is that now this variable
  • 00:02:03 has a local scope because var creates
  • 00:02:06 lexically scoped variables that sounds
  • 00:02:10 very fancy in the end it means that our
  • 00:02:12 variables are global if created outside
  • 00:02:14 of a function if created inside of a
  • 00:02:16 function they belong to this function
  • 00:02:18 and they can only be used from inside
  • 00:02:20 that function so we can console.log age
  • 00:02:27 here by saying inside of function here
  • 00:02:31 we can lock this as you will see here it
  • 00:02:34 is inside a function 30 this is what's
  • 00:02:37 getting locked let me clear this to make
  • 00:02:38 it easier to read in the future console
  • 00:02:41 lock down there will still not lock
  • 00:02:43 anything if I run this again you see
  • 00:02:46 we get instead of function 30 instilled
  • 00:02:48 a terror for the lockdown there now what
  • 00:02:51 you can do however is you can access a
  • 00:02:53 variable that's defined in scope on a
  • 00:02:58 higher level so to say so if we had a
  • 00:03:00 global variable let's say username which
  • 00:03:04 is max in my case here then we can
  • 00:03:07 indeed print this from in here
  • 00:03:10 so from inside the function this is
  • 00:03:12 possible if you have a look at the
  • 00:03:14 bottom of the console here we have
  • 00:03:16 inside of function 30 and we have max
  • 00:03:19 printed here let me remove that lock
  • 00:03:21 which breaks everything because that
  • 00:03:23 makes sure that our output is more
  • 00:03:25 readable so this works so that's
  • 00:03:27 important to take away with var you have
  • 00:03:29 variables which have their own scope if
  • 00:03:32 it's outside of a function it's the
  • 00:03:34 global scope inside of a function it's
  • 00:03:36 the function local scope you can only
  • 00:03:39 access variables that have to same scope
  • 00:03:41 or a higher scope so from inside a
  • 00:03:44 function you can access the global scope
  • 00:03:46 but globally you can't access a variable
  • 00:03:48 that's only created inside of a function
  • 00:03:50 if I on the other hand create a variable
  • 00:03:53 here surname like this and I then change
  • 00:04:00 that in my function schwarz Muller which
  • 00:04:05 is my name and I then console lock this
  • 00:04:07 there after if I do this here you see
  • 00:04:13 that here Schwarz Muller is being
  • 00:04:15 printed so that is my console.log
  • 00:04:16 statement at the bottom here and it does
  • 00:04:18 respect the change I make to the
  • 00:04:20 variable here in the function why does
  • 00:04:22 this work well I can log it here because
  • 00:04:24 it is a global variable and I'm trying
  • 00:04:26 to log it on a global level this console
  • 00:04:29 log statement is not inside of a
  • 00:04:30 function hence its global such as the
  • 00:04:32 variable hence I can access it and still
  • 00:04:34 I change it here because in the function
  • 00:04:36 here I do work with that very same
  • 00:04:38 variable I can access it because as I
  • 00:04:41 just explained from inside a function
  • 00:04:43 you can access global variables but you
  • 00:04:45 can't access local variables from
  • 00:04:48 outside of the function but the other
  • 00:04:49 way around it works so we can access
  • 00:04:51 this variable and if we change it we
  • 00:04:53 change the very same variable we're
  • 00:04:55 logging down there which is why we see
  • 00:04:56 the changed value here so this works so
  • 00:04:59 you can
  • 00:04:59 always access something from a higher
  • 00:05:02 level and work with it or log it or
  • 00:05:04 whatever you want to do but you can't
  • 00:05:06 access something from a lower level from
  • 00:05:08 a lower scope so to say now debts gets
  • 00:05:11 especially interesting if we add a
  • 00:05:13 nested function so a function inside of
  • 00:05:15 a function which is something you can do
  • 00:05:17 let me get rid of all these log
  • 00:05:19 statements to clean all this output up
  • 00:05:21 and now let's add a function here inside
  • 00:05:23 of this function I'll name this
  • 00:05:25 configure char like this and in there
  • 00:05:29 I'll try to set the age to 31 and I'll
  • 00:05:32 add a new variable name or username here
  • 00:05:36 which will name menu now that's very
  • 00:05:39 interesting because I have user name up
  • 00:05:40 there too and I try to access a variable
  • 00:05:43 which is part of a function but of a
  • 00:05:45 different function of the outer function
  • 00:05:48 so let's see what this does if I then
  • 00:05:51 call configure char whoops that should
  • 00:05:55 be charged not chart enter after icon so
  • 00:05:58 log age and I console log user name
  • 00:06:04 let's see what that gives us it gives us
  • 00:06:08 31 and max now that's interesting 31 is
  • 00:06:12 the age I'm setting up and configure
  • 00:06:14 char so I can access this variable even
  • 00:06:17 though it belongs to different function
  • 00:06:18 but I guess this makes sense right
  • 00:06:20 because I mentioned that you can always
  • 00:06:22 access variables that are from a higher
  • 00:06:24 level a higher scope and this function
  • 00:06:28 has its own scope this is a nested
  • 00:06:29 function so we can't access the scope of
  • 00:06:31 this outer function we couldn't access
  • 00:06:33 this variable or any special variable
  • 00:06:37 that's defined in here from this
  • 00:06:39 function though and that's exactly the
  • 00:06:40 problem we have when we log user name
  • 00:06:42 user name is to find globally so we can
  • 00:06:46 access it in both functions
  • 00:06:47 theoretically and hence we can log it
  • 00:06:50 here this happens inside of the create
  • 00:06:53 char function after all and this works
  • 00:06:55 because user name is a global variable
  • 00:06:57 on the global scope and therefore we can
  • 00:06:58 access it but when we change it here
  • 00:07:01 when we create a new variable because we
  • 00:07:03 use var again then we actually create a
  • 00:07:05 brand new variable inside of the inner
  • 00:07:07 function and that has its own value we
  • 00:07:10 could access this variable here in the
  • 00:07:12 inner func
  • 00:07:13 as well but we're not doing this with
  • 00:07:14 the help of war we're creating a new
  • 00:07:16 variable and inside of Krieg a char when
  • 00:07:19 we try to log user name we can only
  • 00:07:21 access the outer one we couldn't access
  • 00:07:23 the inner one because only from a higher
  • 00:07:26 level and therefore we log the user name
  • 00:07:28 we set up on that outer one and not man
  • 00:07:31 U which we set on the inner one if I did
  • 00:07:37 not have var in there on the apprehend
  • 00:07:39 we do of course lock menu here because
  • 00:07:41 then from the inner function we can
  • 00:07:44 access variables on a higher level which
  • 00:07:45 means we can access this globally
  • 00:07:47 defined username we change it in here
  • 00:07:49 and whilst we couldn't access variables
  • 00:07:52 to find and configure char from inside
  • 00:07:54 create char we can of course access user
  • 00:07:56 name this is changed in here we can
  • 00:07:59 access it here we log it here and of
  • 00:08:01 course we lock to changed value so I
  • 00:08:03 hope this makes sense you can always
  • 00:08:05 reach up to a higher level but not to a
  • 00:08:07 lower level
  • 00:08:08 now that's var var can be especially
  • 00:08:12 tricky to understand if we have a look
  • 00:08:14 at a different example though for
  • 00:08:17 functions a new variable is created as I
  • 00:08:19 explained and as I proved now this does
  • 00:08:22 not happen for if stepmum statements or
  • 00:08:24 loops here's a typical example which you
  • 00:08:27 see from time to time let's create a for
  • 00:08:30 loop with var we have I starts at 0 we
  • 00:08:33 loop until as long as it's smaller than
  • 00:08:35 free and we increment it on every
  • 00:08:40 iteration inside of that for statement I
  • 00:08:44 set a timeout here with a function in
  • 00:08:47 that function here I simply console.log
  • 00:08:51 I and I fire this after one second now
  • 00:08:57 if we have a look at this what this
  • 00:08:59 prints actually is free three times it
  • 00:09:03 does not print zero one two
  • 00:09:08 instead it prints free which is actually
  • 00:09:11 our exit condition so which means it
  • 00:09:13 prints a value which we only reach
  • 00:09:15 because we exhausted our loop here now
  • 00:09:17 why is that happening
  • 00:09:19 this happens because we create a
  • 00:09:21 variable I here and unlike functions for
  • 00:09:25 loops or if statements don't create
  • 00:09:28 their own variables instead this is
  • 00:09:29 simply a global variable this is exactly
  • 00:09:32 the same as if we had this code here and
  • 00:09:35 then we kind of would just set this to
  • 00:09:38 zero again or anything like that so we
  • 00:09:41 create a global variable here and if
  • 00:09:44 this were inside of a function we would
  • 00:09:46 create a local variable exclusive to
  • 00:09:47 this function but we would never create
  • 00:09:49 a special variable for the for loop and
  • 00:09:52 what this means is that instead of the
  • 00:09:54 for loop this code here runs for every
  • 00:09:56 iteration of what it does is it
  • 00:09:58 registers a callback it registers a
  • 00:10:00 function which it runs in the future
  • 00:10:02 after one second now the loop of course
  • 00:10:05 doesn't wait for this to to finish it
  • 00:10:07 doesn't wait for this to fire it just
  • 00:10:09 registers this and continues with the
  • 00:10:11 next iteration so when the loop is done
  • 00:10:13 it registered three callbacks it
  • 00:10:15 registered that this function should be
  • 00:10:18 executed in the future in one second
  • 00:10:21 three times that's what happens when
  • 00:10:23 that loop here is exhausted it does not
  • 00:10:26 wait for this to to be done it does not
  • 00:10:28 wait for a second before it moves on to
  • 00:10:30 the next iteration instead the way
  • 00:10:32 JavaScript works and this is totally
  • 00:10:34 unrelated to variables is that this is
  • 00:10:36 simply registered as a to do task in the
  • 00:10:39 future and then it continues with the
  • 00:10:41 code so we have this function to be
  • 00:10:43 executed in the future three times and
  • 00:10:45 we log I here and since I is a global
  • 00:10:47 variable we change I and we refer to the
  • 00:10:51 latest value of I here when that second
  • 00:10:54 is over and when that function that
  • 00:10:56 timeout function executes three times
  • 00:10:58 that's why we print three three times
  • 00:11:01 and this is the best way to now move on
  • 00:11:05 to let because that's where let is
  • 00:11:08 different
  • 00:11:09 if I add var here again just because
  • 00:11:12 it's a bit shorter then we have that
  • 00:11:13 behavior I just explained and now watch
  • 00:11:16 what happens if I change var to let
  • 00:11:20 with that change what you get is 0 1 2
  • 00:11:24 instead of free that's the old log up
  • 00:11:26 there
  • 00:11:27 0 1 2 is after I changed this to let now
  • 00:11:31 why does this happen
  • 00:11:32 because let uses block scope not lexical
  • 00:11:35 scope that means that let does not care
  • 00:11:38 about global or local it does not care
  • 00:11:41 whether you're inside of a function or
  • 00:11:43 not instead it cares about the block in
  • 00:11:46 which you are and a block is basically
  • 00:11:47 anything with curly braces that is a
  • 00:11:51 function but that also is your for loop
  • 00:11:55 or your if check this loop receives its
  • 00:12:00 own variable and that same variable is
  • 00:12:02 then changed for every iteration but D
  • 00:12:04 function in the timeout locks in the
  • 00:12:07 value of that iteration in which the
  • 00:12:09 timeout is registered because it's a
  • 00:12:11 closure in the end which we have here it
  • 00:12:13 captures the variable of value at the
  • 00:12:15 point of time dysfunction is created
  • 00:12:17 which happens when we register it as a
  • 00:12:19 timeout but it's one variable created
  • 00:12:22 for that for loop one variable which we
  • 00:12:25 then change with every iteration and
  • 00:12:27 this is a special behavior you get with
  • 00:12:29 let with block scope variables in for
  • 00:12:33 loops like this one here it's a special
  • 00:12:35 intended behavior which is part of the
  • 00:12:38 ACMA script standard that you have this
  • 00:12:41 behavior in for loops instead of the
  • 00:12:43 behavior you saw with wire but it's also
  • 00:12:46 important to understand that left is not
  • 00:12:48 just there for for loops but for
  • 00:12:50 whenever you want to have a variable
  • 00:12:52 scoped to its block so to its
  • 00:12:54 surrounding curly braces P to the if
  • 00:12:56 statement a for loop of function
  • 00:12:58 whatever it is block scope variables
  • 00:13:01 also are never globally registered you
  • 00:13:04 can't have them in a global context here
  • 00:13:06 you can't have them outside of a block
  • 00:13:07 but then there is like a invisible block
  • 00:13:09 around them in the file where you're
  • 00:13:11 writing your code they're not registered
  • 00:13:13 on the window object as var variables
  • 00:13:17 actually are so every block and that's
  • 00:13:21 the thing with the curly braces receives
  • 00:13:23 its own variable and still we can access
  • 00:13:26 variables from a higher block which is
  • 00:13:29 why from inside this function we can
  • 00:13:31 access this variable we're not defining
  • 00:13:33 it at this function but
  • 00:13:34 were defining it in the outer block and
  • 00:13:36 we can access it but we lock this value
  • 00:13:39 in we're not having that global variable
  • 00:13:40 which gets changed all the time
  • 00:13:42 instead we have to locked in value
  • 00:13:44 because that's what lat
  • 00:13:46 does and that's where it differs from
  • 00:13:47 voir technically it's block scope
  • 00:13:50 instead of lexical scope the best way of
  • 00:13:53 understanding it I think is it's an
  • 00:13:55 example like this year where you can
  • 00:13:57 really see the different behavior and
  • 00:13:59 that you now have more than just global
  • 00:14:02 or functions instead you have anything
  • 00:14:05 with a curly brace can get its own
  • 00:14:07 variables you can still access variables
  • 00:14:09 from a higher level from a higher block
  • 00:14:11 you can't access variables on a lower
  • 00:14:13 block but you're not restricted to
  • 00:14:15 functions or global
  • 00:14:17 so that's let it leads to this output
  • 00:14:20 now what happens if we change this to
  • 00:14:22 Const then I actually get 0 but then I
  • 00:14:27 get the error assignment to a constant
  • 00:14:30 variable we get this error because what
  • 00:14:33 we now do here is we create a constant
  • 00:14:37 and this constant is therefore created
  • 00:14:39 for this for loop and now we try to
  • 00:14:42 change this constant for every iteration
  • 00:14:44 and the idea behind constants that you
  • 00:14:48 mark a value as unchangeable it won't
  • 00:14:51 change and that's exactly what we try to
  • 00:14:53 do here though we try to change it in
  • 00:14:55 the second iteration and at the third
  • 00:14:57 iteration and that's why we get this
  • 00:14:59 error so conce is not really a good
  • 00:15:01 match for this code here there you want
  • 00:15:04 to use let but Const is great whenever
  • 00:15:06 you write code where you know that you
  • 00:15:09 have a value which you won't really
  • 00:15:11 change and of course you might wonder
  • 00:15:13 why would I store a value in a variable
  • 00:15:15 if I never change it it's not a variable
  • 00:15:18 after all then well that's true you
  • 00:15:20 could do this for readability of course
  • 00:15:23 you can always hard code the values
  • 00:15:24 which you never change in your code but
  • 00:15:27 it might make your e code easier to
  • 00:15:29 understand if you split it in multiple
  • 00:15:31 lines and you have variables that store
  • 00:15:33 some core values of your code in
  • 00:15:35 addition not all code is hard-coded
  • 00:15:39 maybe you're getting this from a user
  • 00:15:41 input which you select with query
  • 00:15:44 selector input value something like this
  • 00:15:46 maybe this is how you got
  • 00:15:48 that value and you want to store it in a
  • 00:15:50 variable because yes you could drop it
  • 00:15:52 in here but maybe you use the username
  • 00:15:54 in multiple places of your code maybe in
  • 00:15:57 another place where you don't just log
  • 00:15:59 it but do more useful things with it
  • 00:16:01 well then it could be a good thing to
  • 00:16:02 register it once and reuse it you never
  • 00:16:05 change it but you use it in multiple
  • 00:16:07 places that's also a good reason for
  • 00:16:09 using a variable however this of course
  • 00:16:11 isn't really a variable it's a constant
  • 00:16:13 whenever we try to change it so whenever
  • 00:16:16 I try to set this to let's say man you
  • 00:16:20 will get an error that we're not allowed
  • 00:16:23 to assigning to a constant variable
  • 00:16:25 constant variable sounds a bit strange
  • 00:16:27 but that's what it isn't yet so cons
  • 00:16:30 really is there for us to force us to
  • 00:16:33 write cleaner code you could always use
  • 00:16:35 let in places where you use Const Const
  • 00:16:37 is never a must use from a technical
  • 00:16:40 perspective but it can lead to cleaner
  • 00:16:43 code because you will get an error if
  • 00:16:45 you try to do something like this
  • 00:16:47 and that might be what you want you
  • 00:16:49 might want to avoid mistakes like this
  • 00:16:51 where you reassign a value that
  • 00:16:53 shouldn't really change in your code it
  • 00:16:55 makes your intention behind your code
  • 00:16:57 clearer if you're working on a team and
  • 00:16:59 someone sees that code it's clear that
  • 00:17:00 username probably shouldn't change in
  • 00:17:03 that code so it can simply lead to
  • 00:17:05 cleaner more expressive code that's
  • 00:17:07 easier to understand that's why you
  • 00:17:09 would use Const now there is one special
  • 00:17:12 thing about Const which can be hard to
  • 00:17:14 wrap your head around when you see it
  • 00:17:17 the first time let's say you have Const
  • 00:17:20 user and user actually is an object it's
  • 00:17:24 an object where you have a name property
  • 00:17:27 which is max or anything like that
  • 00:17:29 now unsurprisingly if I console.log user
  • 00:17:32 here we'll see that object being printed
  • 00:17:35 here now if we set user to a new object
  • 00:17:38 where the name is man you will get an
  • 00:17:41 error because we're trying to assign to
  • 00:17:43 a constant variable and as you learned
  • 00:17:45 that's not something that works what's
  • 00:17:48 strange though you'll not get an error
  • 00:17:51 if you set user name to man you'll like
  • 00:17:54 this or if you then also maybe at an age
  • 00:17:57 like this instead this works and
  • 00:18:00 Princeton you
  • 00:18:02 object why because this is not a new
  • 00:18:05 object what Const in the end does is it
  • 00:18:09 yells at you if you ever take that
  • 00:18:12 variable and try to assign a new value
  • 00:18:14 with the equal sign so whenever you use
  • 00:18:16 the equal sign after a Const variable
  • 00:18:19 you'll get an error but we're not doing
  • 00:18:21 that here we're using the equal sign but
  • 00:18:23 we're not assigning a new value to user
  • 00:18:25 but to a property inside of user and
  • 00:18:28 that is something to do with JavaScript
  • 00:18:30 knowing reference types and primitives
  • 00:18:33 and I have a separate video on that
  • 00:18:35 where you can dive in deeper the thing
  • 00:18:37 really is this object here is created
  • 00:18:39 once and stored in memory and what user
  • 00:18:41 stores here this variable is a pointer
  • 00:18:44 at that object in memory now here I then
  • 00:18:48 access this object and I access a
  • 00:18:50 specific property and assign a new value
  • 00:18:52 to that property that means that the
  • 00:18:54 object itself of course kind of changes
  • 00:18:57 it now occupies more space and memory
  • 00:18:59 probably or it gained an extra property
  • 00:19:02 but what we stored in user the pointer
  • 00:19:06 is still the same it's the same object
  • 00:19:08 in memory it got a bit bigger it got a
  • 00:19:10 new property but it's the same object
  • 00:19:12 and therefore the pointer the address of
  • 00:19:15 the object in memory is still the same
  • 00:19:17 so the value in user didn't change
  • 00:19:20 that's what this works now that we learn
  • 00:19:25 about these three different ways the
  • 00:19:26 obvious question is which way should you
  • 00:19:29 use for creating variables and the
  • 00:19:31 answer is use let for variables use
  • 00:19:35 Const for variables that shouldn't
  • 00:19:37 change
  • 00:19:38 so for constants don't use var var is
  • 00:19:41 old-school JavaScript and there really
  • 00:19:43 isn't a reason to use it anymore you can
  • 00:19:46 do the same thing in better with let and
  • 00:19:49 very very very rarely what you want one
  • 00:19:52 of the special behaviors of waar in
  • 00:19:55 modern JavaScript applications typically
  • 00:19:57 there are better ways and let's simply
  • 00:19:59 allows you to write cleaner more
  • 00:20:01 straightforward and all the more
  • 00:20:03 predictable code so let four variables
  • 00:20:06 that change Const for values variables
  • 00:20:09 that don't change
  • 00:20:12 I hope this was helpful I hope this
  • 00:20:14 helped a bit with understanding varlet
  • 00:20:16 and Const there is more you could dive
  • 00:20:18 in we could dive into a hoisting we
  • 00:20:20 could dive deeper into closures and
  • 00:20:21 these are all topics I might cover in
  • 00:20:23 the future and you can definitely
  • 00:20:25 explain all of that in more technically
  • 00:20:27 correct terms I hope this was helpful
  • 00:20:31 and understanding how it works though
  • 00:20:33 and I hope you got a lot out of the
  • 00:20:35 video hopefully you see you in future
  • 00:20:37 videos too have a great day bye