This course has been updated! We now recommend you take the ES6: The Right Parts course.
Transcript from the "Variable Hoisting" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Aaron Frost: LET, CONST, and Blocks, has anyone read about these? A little bit, a little bit, two guys. Online pricing, okay. So we've got two new types of variables, and then a new thing called Blocks. So, CONST and LET replace VAR, right? We're done. Thank you very much. Any questions?
[00:00:28]
>> Off Camera 1: [LAUGH]
>> Aaron Frost: No, it's actually a lot more technical than that. Douglas Crockford's got a sweet quote. This is, don't grep-replace "var" with "let" or you will break the Internet, okay? Because they work very differently. And even though LET works rate, your code depends on var, it depends on, it work in the var way.
[00:00:55] I'm a call the var way because it's not the wrong way, just some of our works. And if you try to force your code that works with var to use let, I'm gonna say probably won't work just because most people don't understand what var is actually doing, okay?
[00:01:14] So the topics for LET, CONST and BLOCK is, I wanna talk of variable hoisting first. A lot of people who are advanced JAVA are people don't necessarily understand Variable Hoisting. So I'm gonna go over it, so you can understand. Now you get what LET's doing. Cuz a lot of people who don't understand what Variable Hoisting is, don't understand why we need LET.
[00:01:34] So I'm gonna go through that, and then we are gonna talk about LET. We are gonna talk about CONST. We are gonna talk about Block Functions. And Block Functions are really cool, you guys will like him, I promise, even though you may not have heard of him. So, Variable Hoisting.
[00:01:47] So again, we're gonna talk about it because we need to understand why we need to do LET. What this LET deal and a lot of, there's a lot to understand about LET, it's not as simple as, it's a new VAR. You just use it when you want to cuz it works differently.
[00:02:05] And there's a mentor who sees, your code will actually run different with LET than it will with VAR, that's why I want to explain how VAR actually works as opposed to how VAR may work in your head. And some people they think they have the way LET works, they think that that's how VAR works.
[00:02:23] So when I explain LET, they are like that's how VAR works, so what are you talking about? I'm like dude, VAR does not work like that. So, that's why we go through Variable Hoisting. So this is why a schmuck this quote is says, using LET and CONST instead of VAR will have the odd side effect, where your code will execute at runtime just as it appears at development time, okay?
[00:02:45] And what that means is VAR, the way you wrote your code, that's not how it's gonna be executed by the compiler. You think it is, but it isn't, and some of us know that and we write our code differently. But people who think that your code written with VAR, that's how the compiler let's it execute, this is now the compilers execute the way you wrote it.
[00:03:08] Another way of saying the same thing is with VAR, the arrangement of your code has less to do with the way it executes than you think it does. So, I'm gonna go ahead and explain this. So, I want everyone to take a second and grok this function, okay?
[00:03:24] So, we have a call called outer and we're gonna call it. And it's gonna make a variable called a and that's gonna call a function call inner and all that's gonna do is make a variable called b. Does anyone know what's gonna happen here? What's going to happen with a and b?
[00:03:40]
>> Off Camera 1: They're global.
>> Aaron Frost: They're gonna become global, right? Because that used the word VAR in strict mode. By the way, if you're running a strict mode, you're gonna get an error for doing this. Anyway, by doing this you wrote it like this. Okay, this is how you wrote it.
[00:03:57] Let me show you what the G compiler evaluated it at us. There's how G evaluated your code, it said cool, you didn't make valid declaration, I'm gonna hoist the declaration of a clear to the very, very, very top of the scope, okay? Which is global and I'm gonna set it equal to undefined.
[00:04:17] Okay, so it means like right here, I could reference a and it would be undefined. And then I'm simply gonna assign it down here in these two methods like these guys are simply going to assign a and b. That makes sense? So the way I wrote it, not a lot to do with the way that it executed can we agree?
[00:04:37] Okay, we're going some more examples of this.
>> Off Camera 2: There is a question in chat
>> Aaron Frost: Yeah.
>> Off Camera 2: Any idea why hoisting was invented?
>> Aaron Frost: That's a good question. I'm not positive but I remember we talked about where automatic semi-colons came from. They were trying to make it like a forgiving language so that, if you forgot a semi-colon you weren't gonna kill your website because of it.
[00:05:09] I think it may have come from that, however, I'm not 100% positive. And it may have been a mistake, that by the time they realized it was there it was too late to fix. And so, I like talking to Brendan Eich he was like, dude, yeah we wanted to change some stuff but we couldn't break the way it currently works.
[00:05:28] We couldn't have a new version of Firefox come out and then all the websites don't work anymore because Variable Hoisting whether you love it or hate it or whether you don't care at all, the way it works, the Internet needs it to work that way still, otherwise your code breaks, right?
[00:05:42] And so, I don't know if it was intentional, a side effect. I'm not 100% positive. But if you tweeted Brendan, I'm sure he'd reply pretty quick. Good question, though. Okay, so I want gratis real quick. Gratis, gratis code right here. Look at it, and figure out you had what it's going to do.
[00:06:10] So we're gonna say, foo = 2, and then if(true). So this is always gonna evaluate, right? Var bar = 1. So, what's this gonna do? Is it gonna throw an error? Is it gonna log a two or three or an undefined? What's it gonna do? Does anyone know?
[00:06:28] So while you're thinking about this, put on your C hats though, right? Cuz a lot of us came from a C based language, right? Where things worked different than they do in JavaScript. So think about it like that, like you are a C programmer still or a C based language programmer.
[00:06:46] What is this gonna do? What's gonna happen here when it consoles? What's it gonna log?
>> Off Camera 1: [INAUDIBLE]
>> Aaron Frost: Yeah, no totally, it's definitely gonna log a three. Okay. It's definitely gonna log a three. It's not gonna throw an error because I wrote it this way but let me show you what the compiler thought I wrote.
[00:07:11] Well, that's not thought I wrote. Let me show you what the compiler did to make sure that it ran right. The compiler said, dude, you totally didn't mean to do a VAR declaration inside this block because this block doesn't actually mean anything. So, I'm gonna hoist your variable declarations to the top.
[00:07:30] So anytime you're inside of a, global or inside of a function, any time you use the word VAR, no matter where it is, no matter how deep you are, your code is going to hoist your variable declaration to the top when it executes. Not like that it's gonna compile it to that and it's like you could see it.
[00:07:49] That's just how it's going to get evaluated, okay? And so this is how or if statement happened so. It's not gonna throw an error because some people were like, it's gonna throw an error because the VAR bar in here, it's not gonna be reachable outside of the sys statement, right?
[00:08:05] Cuz we're looking at it with our C hat on. But it hoisted the variable up, so when we get down here, VAR is totally accessible. It still has the value that was assigned to it, and it's gonna log a three, okay? So, this is Variable Hoisting. These are super simple examples, but whether you know it or not, this is what's happening in your code every single day, okay?
[00:08:24] So some people are like, dude, check, move onto the next thing, but others of us are like, what, right? And so, do we have any questions I need to answer on the chat? I don't see any hands in here.
>> Off Camera 2: Yeah, let them just peel up. So, when you declare a variable within a function, it only hoists to the top of that function, correct?
[00:08:45]
>> Aaron Frost: Yes. So, pre-ES6, JavaScript is function scoped, okay? So, an if block? That is not a block at all. That is just code formatting. The syntax on top of what you're doing. And it's execution control, but it has nothing to do with where your hoisting stops. It's always gonna hoist at the top of a function, okay?
[00:09:11] So if you have a function inside of a function, any variables from this nested one will only hoist to the top of that function. And any functions inside of this function will hoist to the top of it. The only things that go global are the ones where you don't put VAR on but if you're using strict mode, that's not possible anyway, right?
[00:09:27] Yeah?
>> Off Camera 3: I want to quick mention that this is great to review, but Calsomson will go, he goes really, really deep into the compiler and compiler terminology. And all those scope like really deep in the stuff and then I'm from the masters. If you want to go further a few more years for the- [CROSSTALK] Yeah, this was a big area that's a good place cause whatever but it's awesome that we're-
[00:09:59]
>> Aaron Frost: Yeah, but here's another simple example. What's gonna happen here? Sorry, we have a hand. Go ahead.
>> Off Camera 2: Somebody is asking functions are hoisted before VARS, but why?
>> Aaron Frost: I'm gonna talk about that cuz they're not always hoisted. So, let me talk about that. I'll get to that though whoever asked that.
[00:10:17] So, what's gonna happen here? What's it gonna log? Put your C hat on. Is it gonna throw an error? Now, I already tricked you on the last one. It's not gonna throw an error. What's it gonna do?
>> Off Camera 1: It's gonna log undefined.
>> Aaron Frost: It's gonna log undefined, right?
[00:10:31] Cuz this is what's gonna happen. Sorry, so what it's gonna do is it's gonna hoist var name equals undefined at the top. It's gonna log undefined, and then it will assign Marc to name down here, okay? So, this is how it's gonna run. So, you go back to my statement I said earlier.
[00:10:54] With VAR, the arrangement of your code has less to do with the way it execute than you think it does, right? So, this is what I was talking about. Okay, all right. So if we run this code, talking about Functions Scoped. And I'm almost done with with hoisting, I promise.
[00:11:16] So we have VAR A out here, we have a in here and we log a and then we call run and we do a console log of a. This is going to log 2 but this a, it was actually trapped inside this function properly. So I'm just trying to prove that it is function scope, it doesn't hoist everything up to the top of global, your scope instead of a function, okay?
[00:11:47] So, Function Hoisting. Functions hoists to which someone alluded to but not always, okay. There's two ways to make a function, so we're going to talk about them. So, you can make a function Declaration. Which is the top one and the second one is a function Expression. Who prefers declarations?
[00:12:09] Nobody. Who prefers expressions? Okay, so they perform very differently, okay? And let me run through it real quick. It doesn't have a lot to do with LET, so I'm not gonna spend a lot time on it. So that same code we had back here, this is what's gonna happen.
[00:12:30] It's gonna hoist bar to the top, so instead of bar bar = function. It's gonna hoist bar to the top and its gonna hoist function food to the top. So, it's gonna hoist the declaration all the way to the top, but the expressions don't get hoisted. So when people write expressions, I can't call bar till the next line of code right?
[00:12:52] If I try and call bar before it, what's it gonna say? Undefined is not a function, right? So, I'm gonna get undefined out a function error. And again, that's preference but that's how it functions hoist. So if you guys go look at Crockford's JavaScript Styleguide, he says, define all your variables at the top of the function, just write code like that.
[00:13:17] So, if you ever get into a function and it's like var something comma something comma, something comma, something semi-colon, like they just put all their vars up top? And you're like, I don't write it like that. Why did that guy write it like that? That person was hoisting their own stuff, they were trying to be cryptic.
[00:13:34] They were trying to make it look like it was gonna run, that's all they're trying to do. So yeah, hoist your stuff. So, that's Variable Hoisting in a Nutshell. Any questions on Variable Hoisting? I know I didn't answer everything. Any questions on the chat?.
>> Off Camera 2: How do you use interior slides like you did?
[00:13:52] What button?
>> Aaron Frost: O.
>> Off Camera 2: O?
>> Aaron Frost: What? Someone's following me.
>> Off Camera 2: That was an actual question. Yeah, that was a question.
>> Aaron Frost: O. I hit O and it goes to the O review and I enter and it comes out [INAUDIBLE]. So this slides, I got in from the Google IO side deck.
[00:14:09] So that's why the the code works instead of networks, right?