JS.Next: ES6 / ES2015 LET

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Aaron Frost: So we've got LET definitions, we've got LET with looping, those are the two pieces we're gonna cover. There used to be three pieces of LET, or sorry four, but they cut two of them out. So there used to be LET definitions and they cut out LET expressions and LET statements, okay?

[00:00:20] And if you guys wanna come talk to me on the break about what those were, those were invented by Mozilla, I think, and with block functions, we don't need them anymore. Okay, so let's talk about LET definitions, and then LET with looping. So, LET definitions, this is LET in its most basic form, just like that, okay.

[00:00:41] So, instead of var you can use LET, so you literally use it just like you do LET. There's not a lot of differences. You can reassign it just like you can var. So, I can declare foo set it to 2 and I can say foo = 3, we're good to go.

[00:00:56] So, it's not constant. It's just like you use var, it's just a different word, okay. And this is also let in its most basic form. We've already seen this code, though, the only thing that changed is the word LET. Now who thinks they know what's going to to happen, any ganders?

[00:01:20] Error, 2, 3, or undefined, anyone? No one's willing, I burnt you all on the first one?
>> Speaker 2: Wouldn't it actually be NaN?
>> Aaron Frost: NaN? Undefined plus, it could be NaN, yeah, it's gonna throw an error, though. It's gonna say bar not defined cuz, inside the lexical scope on the if, it actually blocked your LET inside, your bar inside there.

[00:01:46] So, the bar variable is now trapped inside your if statement, and you can't access it outside of that scope. This is what we thought it was gonna do, right? We did this with var and it didn't do what we thought it was gonna do, remember? But now now it is going to do what we think it's going to do so it's nice.

[00:02:04] So we have block scoping again. If you run this code, does anyone know what they think's going to happen? Let a=0, a=2, what's this going to log and what's this going to log? Anyone know? Yeah, they're gonna log what you thought they were gonna log, it's not a tricky anymore, I'm past the tricky stuff.

[00:02:29] That was the very wise thing. It runs like you think it's going to run now. So you're like yeah, this is this what I always wanted right. He didn't know you needed it to today but yeah this is what you always wanted. This is what you thought you had all along, so you don't really miss it.

[00:02:47] So this is actually gonna throw an error though. So if you say let a = 0 and then you you make another a with with a let declaration, he's gonna die. You're gonna get an error.
>> Speaker 3: [INAUDIBLE] The same is true for var if you use string. [INAUDIBLE]

[00:03:05]
>> Aaron Frost: Yes, yeah, you can't redefine, you can't double declare those, you can only use it once. Did someone say something. So yeah, so without you strict you can do this with our so you know you don't ever do that, but you could do that, like it wouldn't it wouldn't totally die.

[00:03:23] But with let you're going to get a SyntaxError, and even if you declare of var then you do a new let with c, you can get the same thing, say Variable c already exists. So, yeah and these scopes exist across the board. So b is going to be trapped inside here.

[00:03:47] This let c is going to be trapped inside this switch statement. Let d is going to be trapped inside that while loop. So your curly braces are your new scope, cool.
>> Aaron Frost: Any question about that?
>> Speaker 4: Question, on the chats. So what if you double declare a let in the var, if you do var twice, it just uses the same variable.

[00:04:08] What happens with, either two let's, or a var and let at the same?
>> [INAUDIBLE]
>> Aaron Frost: I already answered that. Do you want me to, I'll do it again.
>> Speaker 4: Just show me the slide that-
>> Aaron Frost: This is what happens.
>> Speaker 4: Yeah at the bottom there it's a-

[00:04:21]
>> Aaron Frost: If you double LET, it freaks. If you declare a var and then LET, it freaks. I'm not sure what would happen if you did LET and then var. Who cares, right, you shouldn't do that anyway, so.
>> Speaker 2: Okay, sorry about that.
>> Speaker 4: There was another, I don't know if this was a comment or kind of a question, but select works everywhere, var works, and var works everywhere it has worked.

[00:04:49]
>> Aaron Frost: Yes.
>> Speaker 4: Okay.
>> Aaron Frost: And in all the same ways that it always has worked. Yeah, good way to put it. Okay so we have this thing called the Temporal Dead Zone. And you guys know it's some Dungeon and Dragon Master forgive me that term up right like it was not like a normal folk call them the Temporal Dead Zone.

[00:05:15] So, we have this thing called the Temporal Dead Zone and I'm going to try my best to explain it. So, look at this code, I'm using let a =1 I'm trying to log it before the let statement happens. What do you guys think is going to happen? Error?

[00:05:30]
>> Speaker 3: Error.
>> Aaron Frost: Error. Anyone think it's going to log on to find?
>> Speaker 5: [INAUDIBLE], right?
>> Aaron Frost: So Firefox implementation currently has got a bug. This is the reason I'm pointing it out cuz you guys might get in there and play around with it and it's gonna work differently than the way I'm saying.

[00:05:52] So I wanted to point this out. So Firefox is gonna log a zero or an and undefined here, okay. But, with the concept of the temporal dead zone, it should throw an error, okay. You cannot use it until it's been declared, officially. So under the covers though, the reason that they came up with this crazy concept called the temporal dead zone is because they still are going to evaluate it.

[00:06:22] When it evaluates this function, when it evaluates to do something, it's gonna go, I mean it's gonna evaluate this. I see what I left there on line two, I'm actually gonna reserve a spot in memory for that, but you can't access it. That's called a temporal dead zone.

[00:06:38] You can't access it so you declare it. Does that makes sense of what the temporal dead zone is?
>> Speaker 3: But what if there was a global a, what if there's an a in the global scope?
>> Aaron Frost: It should log that a but there's bugs like in all the implementations right now.

[00:06:55] That is solid question. And I found that when Alex, so if you have like an a up at the top and then you had a function with an a in it and you tried to use it before you tried to log it before it was declared. It should go up at the top one but all the implementations right now, just log this undefined one that you're coming up on.

[00:07:17]
>> [INAUDIBLE]
>> Aaron Frost: Yes, yeah, well, they don't respect the temporal dead zone yeah. So, yeah, okay so it does kind of hoist it to reserve space in memory but you can't access until it's there. So it would actually, it should throw a reference error. If you do this in Firefox it won't, but it should.

[00:07:43] Any questions on LET before I move on? We're gonna get into looping, it's similar, but yeah. Go ahead.
>> Speaker 4: We have a few of them here. Do you think we should only use LET, or is var still useful?
>> Aaron Frost: I mean, if you're starting a new project, I would only, okay, so if you don't have to support legacy browsers, a gear that you're the Sasquatch, the mythical thing that doesn't have to support legacy, right.

[00:08:11] So if you don't have to, then yeah, use LET. Or you're a node developer then yeah, use LET. I would, because it makes your code way more predictable, I think. Like it runs, going back to that statement, your code has a lot less to do with the way it looks than the way it executes when you're using var.

[00:08:28] So I would definitely use LET, if you can.
>> Speaker 4: Then, the next two questions, can you use LET in a for loop?
>> Aaron Frost: That's the next section.
>> Speaker 4: Okay and then when can I use this again, I'm guessing they're asking when is it available?
>> Aaron Frost: When's it available.

[00:08:43] We'll talk about that when we get to that too, okay? Okay so LET with looping it's pretty simple. So look at this code, one's gonna log a ten, one's gonna log a ReferenceError. So specifically you're looking at these lines of code. So, in the first for loop, I use var, right.

[00:09:05] Okay so, that means you say here it incremented i until i was equal to ten and when i was equal to ten, it didn't run this anymore it stopped, right. So, here it logged 0 through 9 and then once it was equal to 10, it stopped. Down here your j, it went, did the exact same thing, once j was 10, I'm out, so, it logged 0 through 9.

[00:09:30] But when you get down here, i was still a thing because the i from the for loop had been hoisted out, so you could still reference i. But over here you're getting a ReferenceError because using a let instead of a for loop is going to scope out here for.

[00:09:48] That make sense? So, it seems that everything you ever wanted. So you could have two you could use i twice, who feels good now? You can do it, go home, tell your family. Okay, Steve W is so happy about that, wow. So yeah, anyone else want to ask a question before, because I think I'm pretty much done?

[00:10:18] Yeah, also anything inside of the for loop I think this one without saying is also locked inside of the loop body, so. So anyway constant, anyone ready to move on the constant, and does anyone has questions. Yeah.
>> Speaker 4: Two questions here. I don't know if you did cover one of these but does LET still behave the same in respect to closure?

[00:10:39]
>> Aaron Frost: So if I put it inside but IAF or something, like inside an anonymous function? Yeah yeah totally does. An anonymous function or an IAF either, they're just a function, so it totally functions the exact same way. And then what's the other question?
>> Speaker 4: The next one is are variables declared with let hoisted within the box?

[00:11:01]
>> Aaron Frost: So I talk about that when I talked about temporal dead zone. As far as us the developers are concerned, no, but behind the scenes it is. Which is why you have the current funkiness. Behind the scenes it actually is going, you have a leg to reserve a spot in memory for it.

[00:11:22] And then but you can't use it you can't access until it actually is declared on whatever line. So it's not if it's declared on line 10, you can't refer to it until line 10, otherwise you're gonna get an error. Today, you can refer to it before you get to line 10 which is a bug but you shouldn't be able to do so.

[00:11:38] So you're good.
>> Speaker 4: What version, of nodes supports LET?
>> Aaron Frost: So, if you run node, I think node-
>> Speaker 3: 0.11.
>> Aaron Frost: 0.11 okay, cool.
>> Speaker 3: But with a harmony flag.
>> Aaron Frost: Thank you, yeah, they're hidden behind the harmony flag all these features. So once they're in V8, it's just, it's just there.

[00:12:00] So if you wanted to use maps which we'll talk about in a bit, it gets there you could you could probably use a map in node to get the latest version. But if you wanted to use LET it's not in yet so, you have proper tail calls same thing.

[00:12:17] Good question, question?
>> Speaker 4: One thing, can you use LET to assign a function to a variable?
>> Aaron Frost: So let A equal a function?
>> Speaker 4: Yeah.
>> Aaron Frost: Totally, yeah, like when we said you can use LET the places use VAR, we were serious about that. You can totally do that.