Hoisting with var vs let (and const)

This tutorial explains the difference in hoisting between variables declared with var and variables declared with let or const.
Code GIST: gist.github.com/prof3ssorSt3v...

[@svmathtutor]

You're great at explaining concepts in the simplest, most-organized manner.

[@luisgeronimo4387]

Damn... Your teaching skills are over 9000! I really like how you talk about what people used to do and how it is now, it gives more context around it. Also small details like "this is a function expression, EVEN IF I GAVE IT A NAME it is still a function expression BECAUSE..." Thank you.

[@rotrose7531]

Thank you another great explanation, finally let and const seem to be a lot more easier to approach. As all others, I respect the way you treat every details seriously and take all the effort to deliver them in the easiest way to us.

[@rupertsmith9460]

Again and again and again and again you end up being the one who explains these concepts the best. Thank you Steve

[@heavydirtysoul1491]

As for me that's the best tutorial about hoisting so far. Your channel is definetely worth subscribing!

[@halofreak644]

i started coding in C++ and java. I did some other languages like php and ended up at javascript. I was surprised at the power and simplicity of it like not needing to declare what type of variable you're trying to create. its great

[@sujoy92bhowmick]

Sir, Your react native tutorials are awesome. Please continue

[@saimi03]

So far the best video I have watched!

[@nataliewenberg5697]

Thank you, thank you so much! I am going to check other videos of yours! Short and informative

[@chesterxp508]

Another very cool tutorial!

[@paieu]

great expaination professor steve.

[@laurenthrl4433]

Great explanation. Thanks for sharing!

[@abhinandshetty9063]

That explanation! 👌

[@edetmmekut809]

precise straight to point without any bullshite jargon

[@edetmmekut809]

can you do something on react useref hook?

[@genylegend]

Now my concept got clear.

[@collinsushi1155]

With let or const, the JS Interpreter still split the declared variable and its assigned value(if any), then hoists the declared variable to the top but unlike var, it does not assign the default value to 'undefined'

[@sam-hf8yc]

Thanks, man!

[@sarfarazsheikh7378]

great video

[@gregcraig6163]

My God your voice🤩🤩😍👌

[@laffed2045]

So just to clarify, let/const still get hoisted but the interpreter does not set a default value of undefined to these?

[@SteveGriffith-Prof3ssorSt3v3]

Yes. If you have a line like this: let x; Then when you reach that line x will have a value of undefined, but not before.

[@laffed2045]

@@SteveGriffith-Prof3ssorSt3v3 Awesome thanks so much Steve. please keep posting!

[@LGmediaGlobal]

Thank you

[@halofreak644]

legend

[@sparshgupta8078]

Sir plz make a video on these terms Lexical environment Lexical binding They confuse us a lot♥️you are amazing

[@SteveGriffith-Prof3ssorSt3v3]

Thanks. Please add that to the comments on my tutorial request video

[@manavjethani4118]

Hello, can anyone explain why this below output gives error, we have declare the same statement x = 5 inside a function, javascript attached it to global scope, then in this case why javascript didn't assign to global scope console.log(x) x = 5

[@DmitriyMalayevProfile]

Thanks Professor. Another question. Why does this becomes undefined, and "New" but if it's by itself it will no longer be undefined var currentCity = "New York" var changeCurrentCity = function(){ // let city = "city" // console.log(city) console.log(currentCity) var currentCity = "New" console.log(currentCity) }; changeCurrentCity() var currentCity = "New York" var changeCurrentCity = function(){ console.log(currentCity) //prints New York }; changeCurrentCity()

[@SteveGriffith-Prof3ssorSt3v3]

when you use "new" in front of a function call, it changes what the function returns. Basic functions return undefined unless you add a return keyword and tell them what to return. If you call a function with "new" then the function will build a new object and return that when you omit the return keyword. Inside the function called with new, the keyword "this" refers to the object that will be returned. kzbin.info/www/bejne/f2OmlaWBobWXd7s

[@sergeymigel4680]

thanks!

[@johnywhy4679]

4:36 Won't `function f () {...}` get hoisted above `let log = ...`, thereby making `log` unavailable to function f?

[@SteveGriffith-Prof3ssorSt3v3]

function f(){ } and let log; Will be hoisted, but not run. When the script runs, the first thing that happens is console.log is assigned to log. Then f( ) runs. When it runs, log will be available.

[@johnywhy4679]

@@SteveGriffith-Prof3ssorSt3v3 So they're both getting hoisted. How can we be sure the let will get hoisted higher than f(){}?

[@RalphGoddard-tt1xq]

Perhaps you cover this in a different video. With the introduction of 'let' and 'const' a different Global name space is also defined - at least as I understand it. Dev Tools splits it into 'window' and 'script'. This was a great source of confusion on my part as both spaces are referred to as Global on most online literature. Clarity around this naming convention, how they interact, would really be helpful. I have noticed that 'function declarations' end up in the window Global space. If one wants to avoid polluting the window name space then, by reason, function declarations should be avoided - at least as I understand it.

[@SteveGriffith-Prof3ssorSt3v3]

When you declare a variable with `var` a property of the same name will be added to the window object. This doesn't happen with let and const. `var` variables are scoped globally or locally (inside a function). let and const variables are block scoped - globally or inside a set of { }. Every script that is loaded has it's own execution context. The window object is available globally across the execution contexts. Each function has a new execution context where variables can be declared and values stored. The window object is the container for all the Web APIs. Eg: window.document, window.navigator, etc. Core JavaScript is the part of JavaScript that exists both in the browser and in NodeJS. Variables can be scoped to the script. Depending on whether the scripts are loaded globally by the web page or as modules they may share or have separate scopes.

[@RalphGoddard-tt1xq]

@@SteveGriffith-Prof3ssorSt3v3 Thanks. I believe I have it straight now. Script 'global' variables defined with let and const do not become properties of the window object. It would seem there is a naming conflict going on here with 'global' ;-)

[@samuelmatheson9655]

i see, Do you have an advanced/paid tutorial out there?

[@SteveGriffith-Prof3ssorSt3v3]

Not yet. Hard to find the time to build one while still working full time and doing all these tutorials on KZbin. Hopefully next Summer.

[@oleksastep]

Hoisting for 'let' is not explained. Is there sny example how we can take advantage of hoisting for 'let'? How can we use this 'let' hoisting?

[@SteveGriffith-Prof3ssorSt3v3]

Let and const work the same way. All variables are hoisted. The difference with let and const is the temporal deadzone, which makes it feel like there is no hoisting because you still have to reach the line where you declare it before you can reference the variable.

[@winmonaye]

why am I seeing the different results?? is spect changed recently? jsbin.com/zucehag/1/edit?js,console

[@SteveGriffith-Prof3ssorSt3v3]

JSBin is a different environment. Do an inspect element on the page, open the console and copy & paste your code into the console. Run it there and you will see the same output.

[@yarik83men51]

+++

[@alvaroksin]

Broadcaster voice haha

[@marcoonlinetv7769]

Why you do not make a small app in Vanila JS like calculator or TodoList, something like that ?

[@SteveGriffith-Prof3ssorSt3v3]

Because there are hundreds of those online already. When I have the time I will create a course that has some real world value.

[@husniddinqurbonboyev2634]

You have 9 browsers installed on your mac ))

[@SteveGriffith-Prof3ssorSt3v3]

At least 9. I need to be able to test what I build on any platform. I also have Windows installed through Bootcamp and Linux on a VM.

[@johnywhy4679]

7:56 This seems like a bug in JS. If JS doesn't find a declaration in the fx or in global, it should give the variable it's contextual scope-- function-scope, in the case of x. "done to protect you, but leads to bad coding" -- sounds contradictory. Seems it DOESN'T protect you.

[@zakaruPL]

It's not a bug, it's a feature :D well to be honest it's pretty basic JS behaviour. When you don't declare you variable BUT you assign value AND when you're in non-strict mode (which is default in JS) then compiler during the LHS phase will assign this variable into your global context (because it won't find it in function scope) - which is "window". When you set `strict mode` it will behave differently - you'll get Reference Error too. Paste this code into console and check it out ;) then remove "use strict" and check it again "use strict"; someFn(); console.log(window.globalVariable); function someFn() { globalVariable = 'some global value' }

[@TimeLapse200OK]

function userDetails(username) { if (username) { console.log(age); let age = 30; } } userDetails("John"); why in this case the output is - Uncaught ReferenceError: Cannot access 'age' before initialization where as in case of the below code: //global scope console.log(num); let num=10; the output is - Uncaught ReferenceError: num is not defined?