The Best Way to Declare Variables in JavaScript?

hey how's it going guys my name is Dom and today I'm going to be taking you through three similar code examples in JavaScript because I think we can all learn something from what I'm about to show you all right now all of these three examples achieve a similar thing they declare a variable chord A then they attempt to console log that particular variable but they all give us a different outcome so I encourage you to pause the video right here and try to work out what each of these three code examples are going to give us and then once you're done I'm going to take you through each one individually so let's do that right now so beginning with the first code example let's try to run this script I'll say node example01.js press enter and we get an error so we get here a is not defined now why do we get this error well at the top here we can see we are using let's to declare this variable now the thing is both let and const are block scoped now block scoped means that they only exist within the block they are declared in so we can see here by using curly braces like this we are creating a block which means on line 5 console log it can't even see a at all it basically doesn't exist to the console log line okay so really this here applies in real examples when you have things like if else statements and also something like a function so anywhere that has a block using let and const the variable cannot be accessed outside of that block which of course explains the error at the bottom now moving on to the second example let's do node example O2 dot JS and this one gives us undefined as opposed to an error so why do we get undefined well this ties back to the block scoping so at the top here it's identical to the first example and as we know so console log a card C the a that is declared inside this block so really we can pretend that this block doesn't exist at all so why do we get undefined because of course we have we have 10 and we have 20 but undefined is not one of those two numbers so why do we get it well this is due to something called hoisting so hoisting essentially just means that when your code gets executed and you are using uh the VAR keyword to declare your variable something happens in the background so to express that visually Let's uh go to the top of this file here and say VAR a just like that and then down below we can say a equal to 20. so hoisting at the time of executing your code it's going to take your VAR declared variable and then say VAR a at the top and then it's going to give it its value when you said you want to give it its value so your code doesn't actually change but I'm just expressing here visually what happens in the background so it reaches line seven and a does actually exist but it has no value which is why we get undefined if we were to move console log a underneath line 9 then of course we'd get 20 but the point is a actually exists but it has no value which explains undefined as opposed to an error all right now one important thing to mention here or two important things the first important thing is that this also applies to functions so if we declare a variable with VAR inside your function then it does the same thing but it moves the variable at the top of the function as opposed to the entire script and the second important thing is I am not encouraging you to use the VAR keyword because it has its problems and this right here is arguably one of its problems so instead of course you should use less and const instead where possible now moving on to the third example here we can see that we're saying VAR a equal to 10 and then VAR a equal to 20 just like we've done in the second example but if I was to run this one we can see here that we actually get 10 as the output as opposed to undefined now the explanation behind this one is rather simple when using VAR once again it is not block scoped only let and const are block scoped this means that when you use the VAR keyword inside a block it's basically like the block doesn't exist at all so doing VAR a equals 10 here is essentially the same as just doing VAR a equals 10 and then the block instead so of course it's quite simple a is equal to 10 you console.log that a and you are done so what is the moral of the story why did I create this video well I just wanted to shed some light on the differences between const let and VAR in particular how blocks can affect the outcome and if I was to sum up this video in one line I would say try to prioritize using const where possible and then use let when you can't use const and also try to avoid using VAR in almost every situation because chances are you can replace that with const and lit and that is all for today's video I hope you guys learned something if you did make sure to drop a like And subscribe to the channel and I'll see you in the next one

Channel: dcode

Views: 2,289

Keywords: interesting things about javascript, strange things about javascript, hoisting in javascript, const vs let in javascript, variables in javascript, const let and var in javascript, how to declare variables in javascript, block scoping in javascript, let and const explained in javascript, weird things about javascript

Id: AVevgCnEBgU

Length: 6min 7sec (367 seconds)

Published: Mon Mar 20 2023