JavaScript Let vs Var vs Constant | Mosh

so far we have been declaring variables using the lead keyword but at the beginning of the course I briefly mentioned that there is another way to declare variables using the VAR keyword and you may see this in a lot of JavaScript code online in this lecture we're going to look at the VAR keyword you're going to learn about the problems with the var and why you should avoid it so let's start by defining a function start here we're gonna have a loop let I equal to zero we're going to run this loop five times and in each iteration we're going to display I on the console now I don't let's call the start function save the changes so we get number zero to four now in the last lecture you learned that I is only accessible inside this block so if we try to log I outside of this block we're going to get an error I is not defined I just want to clarify something we still have the same concept if I remove this curly braces because here we have a single statement so the scope of I is still this block here okay so save the changes we still get the same error however let's see what happens when we replace let with var save the changes what happened to our error so it turns out that I is accessible outside of this four block so in the last iteration I becomes 5 because 5 is not less than 5 so the loop terminates and here on line 6 we're displaying the current value of I so this is the issue with the VAR keyword when you declare a variable with var its scope is not limited to the block in which it's defined it's limited to the function in which it's defined and this is not how most or all programming languages out there work it's one of those weird things in JavaScript that we have had for a long time so before es6 var was the only way to declare very and constants starting from es6 also called es2015 now we have two new keywords let and const to define variables and constants these two keywords create block scope variables but var creates function scoped variables let's take a look at another example so in this for loop let's add a code block here now I'm gonna add an if statement now in the if block I'm gonna declare a variable using var Cotter study to read technically in almost all programming languages out there this variable should only be accessible in this block but because we have used var color is accessible anywhere in this function so at the end of this function we can log color save the changes look we get red here but if we replace bar with let we get an error because color is not accessible here and that's how most languages work so this is the first problem with the VAR keyword the second issue is with global variables so let's delete all the code here I'm gonna declare two variables one mid bar color we set it to red and one with let let's say H and set it to 30 save the changes now let me use var outside of a function this creates a global variable and attaches that global variable to the window object in browser so in browsers we have this window object which is a complex object with lots of properties and methods when you want to build front-end applications you're gonna work with this window object a lot now what matters here is this Worr keyword attaches this color variable to the window object so if it's a window dot look our color variable is here in contrast when we use the lead keyword to define a global variable that global variable is not attached to the window object so if we type window dot age you can see it's undefined so why is it bad to attach a variable to the window object well because window object is something central there is only one instance of the window object and let's say you're using a third-party library if that third-party library also has a variable with the same name that variable can overwrite your variable so you should avoid adding stuff to the window object otherwise you're going to create all sorts of issues in your programs now for a curious developer I need to mention that when we define a function let's say say hi this function is technically a global function and is added to the window object so let me save the changes if we type window dot say hi see our function is here so we can call it so technically this is a global function it's attached to the window object and that is bad practice but how can we prevent this well later in the course where I talk about modules you will learn how to encapsulate these functions in separate modules so they are not added to the window object so here's what I want you to take away from this lecture avoid using the VAR keyword because it creates variables that are functional scoped not block scoped hi guys thank you for watching my javascript tutorial this tutorial is part of my JavaScript course where you learn all the essential JavaScript features that every web and mobile application developer must know if you're an absolute beginner or have some experience in JavaScript and are looking for a fun and in-depth course that teaches you the fundamentals of JavaScript this course is for you this course is also packed with tons of exercises that help you master what you learned in the course in fact many of these exercises are questions that come up in technical programming interviews so if you're pursuing a job as a front-end or a back-end developer or if you simply want to have a more in-depth understanding of JavaScript I highly encourage you to enroll in the course for a limited time you can get this course with a discount using the link in the video description click the link to find out more about the course and enroll

Channel: Programming with Mosh

Views: 163,654

Keywords: Javascript, web development, web developer, front end, front-end, back-end, back end, mobile development, mobile developer, es6, learn javascript, javascript programming, programming, es2015, let, var, code with mosh, programming with mosh

Id: XgSjoHgy3Rk

Length: 6min 51sec (411 seconds)

Published: Tue May 15 2018