JavaScript Let vs Var vs Constant | Mosh
- January 2, 2024
- Posted by: MainInstructor
- Category: JavaScript Programming Languages
Video Title: 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
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Mosh, You are the best man
What about "const"? In the title is "vs constant"
Super helpful you explained it very well.
Great tutorial, I've more understand with it. Thank you
1) "var" is function-scoped, whereas "let" is block-scoped.
2) Using "var" attaches the variable to the window, whereas "let" prevents it.
ALOT of "javascript gurus" have all made 5-minute videos on the history and distinction between var and const and let, then NEVER actually DEFINED any of these terms, but instead launched into some over-caffeinated babble of code examples where utterly NOTHING was explained, but they're oh-so-proud of themselves.
YOU alone (so far) took the time to actually DEFINE these terms first: "const", "var", "let" and even "function" and "block" AND even "function-scoped" and "block-scoped". Then you examples were simple enough to make your target audience – PEOPLE NEW TO JAVASCRIPT WHO DON'T UNDERSTAND SOME OF THE CONCEPTS – actually understand the distinction between "function-scoped" and "block-scoped" variables.
Well done you – you just EARNED yourself another subscriber.
Cheers,
-Mark Vogt in North Aurora IL (USA)
This was an indepth ans to the question.
Thanks Mosh ❤❤
What theme is he using?
Love You bro
Hi sir,I have a doubt when using const keyword value will not change but when I use like this value is changing for 'const' keyword. code is: const x = { name: "scott"}; x.name = "john"; console.log(x); Result:john. Why const is printing john instead of scott. Can you please give me reason.
How do I get this view with VSCode and live output to Chrome console? Is this simply tied to an HTML file that's not being shown?
i was not good at all in the variables but now im proud of myself thank MR mosh
Finally I understood the differance thanks Mosh !
The best explanation ever! Thank you very much!
this shit confusing for me , i like it
Very good and clear explaination my friend!!
Short and to the point explanation! Thank you very much! I'm learning JS right now 😁
After watching this and searching a lil bit, i think it's wrong to try to use let for everything, since var is function-scoped and let it's block-scoped so you should use both and not only one, like two for inside of one you need to know the two loops indexs and using let you'll not have this information and not even any result outside of them which is bad since we may need the result of others scope functions inside others functions, we don't have thoose "problems" using C# but i don't agree with using let in every situation, it may give even more bugs than just using var which is like most of the languages work which was what a lot of people were saying about let, let should be only used when you know that you'll not need that variable anymore outside of that situation, btw amazing tutorial, js it's preety cool.
global variables and function-scoped variables;
thx
const is not explained at all.
what if i want to declarate global variable inside of function?
let variables cannot be read/written until they have been fully initialized, which happens when they are declared (if no initial value is specified on declaration, the variable is initialized with a value of undefined).
This differs from var variables, which will return a value of undefined if they are accessed before they are declared.