This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Closure Introduction, continued" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Bianca Gandolfo: So here's an add on to that example. The difference here is we have a setTimeout. What does a setTimeout do?
>> John: [INAUDIBLE]
>> Bianca Gandolfo: What would an alert do?
>> Rich: [INAUDIBLE]
>> Bianca Gandolfo: Yes, so it will wait 1000 milliseconds, which is 1 second. And then it will call this function.
[00:00:27] So, it doesn't call it right away, it creates a delay. And so if you call this function here closureAlert, lets walk through it. So, from the top, from the top let's see. Remind me of your name again, is it John?
>> John: John, yeah.
>> Bianca Gandolfo: Okay. So let's walk through how this code would run in the browser.
[00:00:56]
>> John: All right.
>> Bianca Gandolfo: Everyone gets one line.
>> John: This one mine?
>> Bianca Gandolfo: Mm-hm.
>> John: Going to see the closure alert, define function.
>> Bianca Gandolfo: And then Rich?
>> Rich: [INAUDIBLE] Then it jumps past all that to set time out to that.
>> Bianca Gandolfo: So this is the entire function body.
>> John: The entire function body, okay.
[00:01:21]
>> Rich: So it goes after that and it calls closure alert? And invokes that.
>> Bianca Gandolfo: Mm-hm, and then Grace.
>> Grace: So, we're in the body function and it assigns the string to x.
>> Bianca Gandolfo: Yep, and then Joe.
>> Joe: There's another function there, but it gets skipped, right?
>> Bianca Gandolfo: Yeah, we skip it.
[00:01:47] Skip this function.
>> Joe: Then you setTimeout, wait 1,000 milliseconds.
>> Bianca Gandolfo: Does it wait now?
>> Joe: Yeah.
>> Bianca Gandolfo: Does it pause?
>> Joe: It pauses one second.
>> Bianca Gandolfo: It's actually asynchronous so it's not gonna pause. It's not gonna pause it for that. That's a common misconception.
>> Joe: So it's like a scheduler.
[00:02:10]
>> Bianca Gandolfo: Yeah, so it says, okay, do call alerter in one second.
>> Joe: But I'm gonna do whatever else
>> Bianca Gandolfo: But it's gonna keep running, keep going. And then, Kim?
>> Kim: Console
>> Bianca Gandolfo: And then, William?
>> William: I'm sorry, I was looking at the comments. Where we at?
>> Bianca Gandolfo: Right here.
[00:02:36] We're at this console out log.
>> William: All the fun stuff's over.
>> Bianca Gandolfo: I know.
>> Bianca Gandolfo: So then, where does it go?
>> William: It will jump out of running that function, go back to where it's called a closureAlert.
>> Bianca Gandolfo: Mm-hm.
>> [INAUDIBLE].
>> Bianca Gandolfo: And then
>> Bianca Gandolfo: And in one second, what happens?
[00:03:05]
>> William: That alerter is called final.
>> Bianca Gandolfo: Yep. The alerter is called. So then what do we do? Kevin?
>> Kevin: alert(x).
>> Bianca Gandolfo: I'll get to that question in just a second. So alert(x). And what's x been?
>> Kevin: Just the string?
>> Bianca Gandolfo: Mm-hm.
>> Kevin: It's defined earlier.
>> Bianca Gandolfo: Yep.
>> Kevin: A closure.
[00:03:34]
>> Bianca Gandolfo: What does it say? You can read it in a funny voice if you want.
>> Kevin: Help, I'm a variable stuck.
>> Bianca Gandolfo: That's your funny voice.
>> [LAUGH]
>> Kevin: A closure.
>> Bianca Gandolfo: All right, [LAUGH], that works.
>> Speaker 9: Just to note here that everyone can please raise our voices a little bit so we can hear the questions.
[00:03:53]
>> Bianca Gandolfo: Okay. Cool. So we alert it, and then where does it go? Jake, we just need to complete.
>> Jake: It's all complete, so go down there.
>> Bianca Gandolfo: Yeah, and then it just goes down here.
>> Jake: In one second.
>> Bianca Gandolfo: Yeah. Awesome, Tanner?
>> Tanner: So do you ever have to worry about setting In that case, you set it as second.
[00:04:23] You don't have to worry about the code catching up to the timer that you set, so that stuff might get out of order. Like in this example, let's say you did this on a 386 or something.
>> Bianca Gandolfo: On a what?
>> Tanner: On a really old computer.
>> Bianca Gandolfo: Uh-huh.
[00:04:39]
>> Tanner: Would it Would it ever get to the point where it accidentally didn't get that far. Do you see what I'm saying?
>> Bianca Gandolfo: Like it would be too slow?
>> Tanner: Right.
>> Bianca Gandolfo: I don't know I never had I've never done anything where the millisecond is really important something down to the millisecond but I can't imagine that it's so accurate.
[00:05:01] Because of the way like the queue and the stack and the event loop work. So the event loop doesn't run all the time. So the way I imagine that it wouldn't be 100% accurate.
>> Tanner: If you had a loop here that was looking Code that was executing without ever returning back to the event, the process would work.
[00:05:26] If that took five seconds to run, set time object would then run as soon as that event gets rescheduled
>> Bianca Gandolfo: Yeah, okay.
>> Tanner: Rather than waiting a second after it. Finished running that five second process.
>> Bianca Gandolfo: Yeah, exactly. And then you had a question?
>> Speaker 9: The question was what is the said time out?
[00:05:45] Is that a function?
>> John: Yeah.
>> Speaker 9: Where does that come from?
>> Bianca Gandolfo: Set time out is just a native function that comes, I belive with the browser. And we know it's a function because we see these These two parentheses next to it. And that's calling a function, we call it.
[00:06:06] What are some other times that we see two parentheses near each other. So we talked a little bit about where we saw two squiggly brackets near each other, when else do we see this syntax?
>> Speaker 9: Expression statement.
>> Bianca Gandolfo: This is specifically.
>> Speaker 9: An if
>> Bianca Gandolfo: Yeah, like an if, so you have an if statement, or use it so if, parentheses and they only have the curly brackets.
[00:06:33]
>> Speaker 12: I have a different question.
>> John: Okay.
>> Speaker 12: Loops.
>> Bianca Gandolfo: Loops, so we use them for loops as well. Where else? We use them in functions right after the function keyword here or the function name. And that's all I can think of.
>> Speaker 12: And does mathematical expression insert precedence?
[00:06:55]
>> Bianca Gandolfo: Yeah, totally. So we can use it to change the order of the math the way it's I guess precedence is a good way of saying it.
>> Bianca Gandolfo: Yeah, so those are the only times I can think of off the top of my head. So we have if statements, we have loops.
[00:07:14] There's also switch, and then in the functions. Those are the off the top of my head, the only times when we see that. And so just keep that in mind. If it doesn't look like a loop, we know what loops look like. If it doesn't look like an if statement and all these things, then you're probably calling a function.
[00:07:36]
>> Kevin: What about when you wanna create an anonymous function?
>> Bianca Gandolfo: Mm-hm.
>> Kevin: Is that just like a hack or is that a valid JavaScript?
>> Bianca Gandolfo: That's a valid JavaScript, you can use an anonymous function. Mm-hm?
>> Joe: I think, I'm lost.
>> Bianca Gandolfo: Sure.
>> Joe: If I were the interpreter, the first thing I would do is skip all the way Next to the bottom line.
[00:08:01]
>> Bianca Gandolfo: Yes.
>> Joe: We're on closureAlert, then I would go up to the top and run the function to set X and skip the next function. Now, I hit the time out, I wait a second and I would run the alerter function. I would go back up and set x [INAUDIBLE] alert.
[00:08:18]
>> Bianca Gandolfo: Let me stop you there.
>> Joe: Okay good, so I'm all-
>> Bianca Gandolfo: Set time is not blocking.
>> Joe: Say that again?
>> Bianca Gandolfo: The set time out is not blocking so it will actually run the console log next and then it will actually just exit this function and it will wait one second down here And once the setTimeout works, that's when we get into the alerter function.
[00:08:51]
>> [INAUDIBLE]
>> Joe: So What does this have to do with closure. I can't put the two together.
>> Bianca Gandolfo: We're getting there.
>> Joe: Okay.
>> Bianca Gandolfo: We're getting there, yeah. I'm just starting off with some things that don't seem too unusual and we've done before and we're comfortable with them and then we're going to get in closure.
[00:09:16] I like to start it off slow. And then we'll get there. And then I just out of nowhere trick you and I was like ha.
>> Joe: [INAUDIBLE]
>> Bianca Gandolfo: Yeah. [LAUGH]