JavaScript - Let Var Const

hey everyone welcome to wic code where in this video i'm going to be going over var versus let versus cons in javascript so the keywords let and const were introduced in es6 which was published in june 2015. if you don't know es6 refers to the version 6 of ecma script ecma stands for european computer manufacturers association as essentially just a standard for programming languages to follow before es6 though there is only var but anyway these keywords added a lot of useful functionality to demonstrate this functionality i'll be comparing var const and let in three different categories scope which is arguably the most important hoisting and whether a variable declared with let cons or var can be redeclared or updated so let's start by comparing the scope of let const and var scope essentially means where variables are allowed to be used or where they are available the scope for var can be either functional scope or global scope depending on where it is declared so when a variable is declared with var outside a function it is said to be global scope so let me show you this so let's create a variable here just call it var let's call it myvar set it equal to this is a globally scoped r declared variable and then let's just log this out to the console so log myvar you can see this is a globally scoped var declared variable and the reason it's globally scoped once again is because it is outside of a function and now let's see what happens if we create a function and try to access this variable so i'm just going to create a function called my function like this and i'm just going to log my var and then of course let's call my function here and i'm also going to delete this log message here so i don't get this mixed up let's press save and as expected we can access the variable this variable here from within the function and this is because a variable declared with var outside a function block is available for use in the whole window in other words global variables belong to the javascript window object and can be used and changed by all scripts in the page and window to show you this even better let me set a break point in here so let me open up this make this bigger let's set a breakpoint in here let's run this program again and now let's check window so this is our javascript window object and my var because it's global should be attached to this object so if we do say window dot my var you can see we can access it here and also just a quick side note global variables live until the page is discarded such as when you navigate to another page or close the window so if we navigated out of this page or closed down this browser window then the global variables for window would be discarded so let me play through this and go back to our console and then i'm also going to comment this out because now let's see a function scope variable with var so function function scoped means that the variable is declared within a function so then here for example let's do var my function are equal to this is a function scoped var like this oh i didn't get rid of this breakpoint let's also just turn these off let me play this again refresh the page and of course i need to change this to my function far so let's refresh again and then also i'm going to let's just go back to the console here and we can see of course it gets print printed because we're calling it from within the function but now let's try and access it from outside the function so then here let's do console.log my function var like this and you can see we get a reference error an uncaught reference error so you can tell that function scope also means that the variable is available and can be accessed only within that function so this variable here declared with var is only accessible within my function which is why we get an error if we try and access it here but now let me show you one of the main reasons that let and const were created so let me go in here i'm just going to delete all this and i'm going to say i'm going to uncomment this here and now i'm just going to say if true then we're going to say var my var equals this is my var in a block like this and then down here let's log out my var and see what we get and so you can see that it was this declaration here this is my var in a block that is what is printed to the console so remember var variables can be global or function scoped and here myvar is not defined in a function but rather in an if statement or a block and because it isn't defined in a function it will be global scoped which so essentially it will be added to the window object again and this isn't a problem if you wanted my var to be redefined but you can see that it could be a problem if you didn't realize that my var had already been defined so say you're using my var in other parts of your code outside of this if block you might you might get this is my var and a block when you're really expecting this is a globally scoped var declared variable and now let's see what happens if we use let instead some changes to let i'll call it mylat call this mylet as well change this to let and say um of course let's change this to just just to make more sense and then of course we need to change this as well to my let and so you can see now that in the in the if block this variable mylet was not overwritten as you can see what's printed is this is a globally scoped let declared variable when for var what was printed was in here so you can see that even though my var is redefined inside this if block it keeps its value so it keeps its value up here and this is because variables defined by the let keyword are block scoped and a block is essentially just code that is surrounded by brackets anything within curly braces is a block so you can see these two curly braces here and a variable declared in a block with the let keyword is only available for use within that block so to demonstrate this again let's see what happens if we let's just comment out this line here you can see now we get my lut is not defined because it's defined only within this block or within these curly braces but if we did this for example uncomment this line and just log my let i'm coming out this coming out this as well you can see we get this is a globally scoped let declared variable because it was declared in this outer block here so you can essentially think of this whole thing as being you know within curly braces between these script tags and this is where why this variable is still accessible within here and you can even just it doesn't have to be some form of statement so let me just do this delete all this let's just have a regular block let's do let's soccer equals amazing and then let's just log soccer here and then let's also log soccer here and so of course again we print it within here but not without here because it is defined within this block with the let keyword but if we change this to var for example we could get amazing printed twice and also because variables defined with let are block scoped they are not attached to the window object even if they are not defined explicitly inside a block so to show you this let me go back to where we were let me set another breakpoint so within here let me lower this set a breakpoint here refresh the page get stuck here let's type in window now say we do window.mylet you can see undefined because variables that are decline or variables that are declared with let keyword are not attached to the window object once again even if they're not defined explicitly inside a block let me play this through get rid of this breakpoint go back to our console and now let's start talking about const declaration so when it comes to scope const is just like let so if i do const here change this to globally scoped const even though it should technically be block scoped but you get what i mean and then let's change this to my const my const you can see we get this is a globally scoped const declared variable let's do and then let's also log it out here like we did before except also i forgot to redeclare in here let's do const const equals this is a block scoped con's like this and if we print it out you can see we get this is a global scope because this does not overwrite it in here because just like let cons is block scoped not function or globally scoped like the var keyword is so then also another thing i'd show you is if like previously if we declared in here it's only available within this block so we get an uncaught reference error so that was scope for each of the variables so let me delete all this and now let's start talking about redeclaration and updating variables declared with let const and var so variables declared with var can be both redeclared and updated so let's redeclare a variable with var and see just see what happens so let's do var soccer equals amazing and then let's do declare it again soccer equals fun and let's log out soccer like this you can see what we get is the keyword fun because the variables declared with var can be re-declared so we're re-declaring soccer here and now let's see what happens if we want to update it so let's just get rid of that and type in fun and we log it out you can see once again we get fun because once again variables declare with var can be both redeclared and updated but on the other hand let can be updated but it cannot be redeclared so let's do let soccer equals amazing and let soccer google's fun save this you can see we get a syntax error saying soccer has already been declared so we can't redeclare it but then let's just update it and you can see that we successfully just log fun so we can update variable declared with let and also just to mention of course this is all happening within the same scope so we're talking about redeclaring and updating a variable within the same scope because we saw for example that we could for example do let soccer you will know pizza in here and if we run this we won't get without any error but if we remove these braces then now they're in the same scope and if we save that then we get that error so just to um don't know if i mentioned that but this is also assuming that they are updating and being redeclared within the same scope but now let's talk about const so let me actually just move back up here so cons cannot be updated or redeclared and this of course makes sense as const is short for constant and you shouldn't be able to update or re-declare a variable that is constant so let's first try to redeclare it so we have const soccer equals amazing let's do const soccer equals good and let's do this and you can see we get identifier soccer has already been declared now let's just try and update it so let's do this and we get assignment to constant variable because this same constant so soccer must is not going to be changed which is why we get of course this error because of its constant we shouldn't be expecting to reassign it or update it to anything else it should be amazing throughout the whole program so const is essentially the opposite of var when it comes to re-declaration and updating a variable a var variable can be both redeclared and updated as we saw while const cannot be redeclared and also not updated as we just saw however as a side note using const with objects behaves a little differently because in javascript objects are stored as references so let me show you this real quick so if i assign this to an object i just say let's just do my key my value like this you may think that we are updating the variable if we say add another key to the object so say we did soccer dot hi equals pizza but what we are doing here is we aren't actually changing the value of const because it's holding a reference to that object not the actual object itself so somewhere in memory it's holding basically a pointer to this object that contains these properties so we're just adding on to that object we're not actually changing what soccer is referencing however if we try and assign cons to another object reference for example that is an update so an error will be thrown so say we have this here now we do pizza equals an object let's say my key set that equal to my value and now we set soccer equal to pizza like this we will get assignment to cons constant variable and of course also if we did it with just a string or something like that we would get the same thing but now the final difference between these three declaration types i want to talk about is hoisting and hoisting is a mechanism in javascript where variables and function declarations are moved to the top of their scope before code is executed and this of course will make more sense with an example so let me remove all this and know that far variables are hoisted to the top of their scope and initialized with a value of undefined so let me show you this by let's say we log a variable pizza before we declare it so we do var pizza equals pizza if we run this you can see we get logged undefined because var variables are hoisted to the top of their scope which here is a global scope of course and initialized with a value of undefined and just like var let is hoisted to the top of its scope as well however unlike var so let me change this to let so unlike var which is initialized to undefined the let keyword is not initialized at all so let's run this and you can see we get cannot access pizza before initialization so you can see here that we get a reference error if we try and log out a hoisted variable declared with let and also just like let const declarations are hoisted to the top of the page but aren't initialized either so if i did cons like this we would get the same thing so once again we are given a reference error however as const is supposed to reference a variable that won't change it must be initialized at the time of declaration so say we have just like this const pizza and then we set it equal to that like this we get an error for missing initializer and con's declaration so you can see that if we don't initialize a constant variable we will get a syntax error saying mission missing initializer in const declaration but so overall the main purpose of the let and con statements is to free up memory when not needed in a certain block so in other words it is encouraged that variables exist only when they are needed so let and const are better choices than var in most circumstances but so this was my video on let var and const if you have any questions feel free to ask me in the comments i'll try and get back to you but besides that that was a video thank you for watching and i hope to see in the next one

Channel: WittCode

Views: 105

Keywords: wittcode, WittCode, let var const, var, let, const, let var const variables

Id: xzUyfCJEReE

Length: 16min 58sec (1018 seconds)

Published: Tue Oct 12 2021