JavaScript Let, Const & Var: A Complete Guide

everyone welcome to this video on consulate invar three ways making a variable in JavaScript please like this video if you liked it subscribe if you care and leave comments that are nice and respectful and not about my glasses ok let's go let's begin with a little bit of history this line is actually a highly sophisticated timeline diagram going from 1997 when JavaScript was created to modern day 2018-2019 basically the beginning there was var and that was it that was the only way of making a variable he used the VAR keyword and that was the case all the way up until 2015 when let and Const were introduced but that's kind of a lie because you couldn't just go use Letten Const right away it was really just the idea of lettin Const that was introduced it was added to the specification this little section right here in es 2015 that says here's how let encode work but that doesn't mean you could just go and use them right away in fact it took a little bit but now in 2018 pretty much all the major browsers this is for Const you can see all the major browsers support Const let is a little shakey ER if we look like Opera Mini and Android browser doesn't support cost gesture it doesn't support let just yet but almost everything does so what that means for us is that we have a choice when we want to make a variable do we use far let or Const and in this video I want to help explain the differences but also help you decide when to use which one all right so let's begin with a good friend VAR the most important thing to talk about is how variables are scoped when we declare them with the VAR keyword so there's scope to the current execution context which basically means their scopes to their enclosing function if they're in function and if they're not then they're part of the global scope so for example here is a variable var I as part of this for loop it's inside of a function it is scopes not to this loop but to the entire function so I can access it in the function of course if I try and call it greet we print out hello three times from this loop but then I still have access to I after the fact of course I don't have access to I anymore because we're outside of that function that execution context the main point is that when you use the VAR keyword it is not a block scoped variable meaning that if we have a conditional statement it is not scoped to that conditional statement those variables if you use the VAR keyword are scoped to an entire function or to the global scope that changes when we introduce let and Const so let's just subtly shift this to be let let I equal 0 I less than 3 I plus plus we print out hello and then afterwards after that block ends we're going to print I run it and we have a problem I is not defined right here anymore it's only a part of this block so here's another example do I do if true a very silly trivial block and I declare a Const and we'll talk about the difference between let and Const in a moment Const color equals purple if I try and access color outside of this console dot log color I don't have access to it color is not defined it's only part of this block but if I change that to a var that's not the case anymore it is scoped in this case to the global scope it's not part of a function so that's the first distinction let in Const our block scopes var is not when you declare a variable with var its scope to the current execution context now let's talk about the main difference between let and Const they're both block scoped Const stands for constant and the main idea behind it is that it's not supposed to change now that doesn't mean it's immutable it can't change at all it means that the reference that the variable is pointing to sort of like the link in memory that can't change so as an example if we make a Const over here called pet and set pet to pig I can't go and say pet is now dog that's a problem what I can do for example is make a constant people set it equal to an array I can't just reassign that entirely and set people to be something else like 12 but I can update the values inside of people or I could push on to people like this and I'm still changing people the difference is that I'm not updating the reference this is pointing to the exact same array the same object in memory so that's true for arrays I could also do an object literal and change the properties I just can't change that reference so that's an important distinction with let on the other hand we've already seen this how we used it in a for loop you can update it at any point essentially let is the VAR keyword but block scoped Const is different because it also adds this this new restriction it's not supposed to be reassigned other than that there's a couple of quick things to discuss the first is that when you declare a var in the global scope it is added to the window object for example if I just do VAR x equals one save if we look at the window object somewhere in here we'll find X there it is x1 now if I tried that instead with let let dog equal rusty and I save there is no window dog it's a global variable declared in the global scope it is not added to the window object and the same applies for Const the next thing I want to talk about is that we can declare a var with a value when we actually declare the variable or we can declare it and not initialize it so I can do this var color and not give it a value and then later give it a value same thing with let I can say let pig but I cannot do this Const chicken that's a problem because constant is supposed to be constant it's not supposed to really change meaning that you need to know ahead of time what the value will be so you can't initialize or you can't declare it without a value the other thing that's important with a variable created with far we can read Eclair the entire variable whenever we want I can say var x equals 10 and then say actually the var X is something else entirely so I'm not just updating the value I'm not reassigning X I'm completely read eclair it now if I tried that with let if I just change that to be let we'll get an error saying identifier X has already been declared same thing with Const so that's important to note and for that really only for that reason sometimes I use var when I'm teaching these days because when I'm in the console creating variables and reassigning them sometimes gets annoying to have this error if I don't refresh the page if I've already declared a variable and that's pretty much it if we take a look to recap let and Const are blocked scoped var is scoped to the current execution context let and Const do not create properties on the global window object if they are declared in the global scope you can initialize let with or without value constant you have to have a value let can be reassigned whenever it's like a var except it is blocked scoped but it cannot be read Eclair din the same scope Const on the other hand has this additional restriction it cannot be reassigned it doesn't mean it's immutable and it can never change but the reference that variables pointing to cannot change its block scoped and we already talked about this other stuff there is one thing I'm not talking about though there is some difference between let constant var around something called hoisting if you're not familiar with hoisting I'm gonna make another video on that I originally had it as part of this one but it's getting really long so I split it off introducing the topic on its own let constant var do behave a little differently around hoisting and I left that out and this is the last thing I'll mention basically I use Const whenever I can and try and use it over let's use let if you have to instead of var and pretty much never use var there's very I can't really think of a good reason to use var except for what I said when I'm teaching in the console because it's annoying to get that error about Rita Clara a variable so sometimes I do use var there but for the most part just use constant light all the time all right

Channel: Colt Steele

Views: 68,169

Keywords: Javascript, #js, #programming, #webdev, #webdevelopment

Id: dzEieWaOJE0

Length: 8min 19sec (499 seconds)

Published: Mon Dec 03 2018