Check out a free preview of the full JavaScript: From Fundamentals to Functional JS course:
The "Parent vs. Child Scope" Lesson is part of the full, JavaScript: From Fundamentals to Functional JS course featured in this preview video. Here's what you'd learn in this lesson:

Nested functions create a “child” scope within the containing function. The parent scope does not have access to the child scope. However the child scope does have access to the parent scope.

Get Unlimited Access Now

Transcript from the "Parent vs. Child Scope" Lesson

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

[00:00:03]
>> Bianca Gandolfo: So we're talking about how to make privacy with or make local variables in our functions, but what if we have a function nested inside another function? How does that effect our scope? What do we need to know about that to effectively handle our functions? So we have here, just a review is we have this blender function.

[00:00:28] And here see, this is a name function. This isn't one that's being stored in a var. So we have a blender function, it takes fruit and it assigns that fruit to b and then it blends smoothie. BS means blends smoothie and it's gonna alert the fruit, whatever you pass into to it plus yogurt makes a fruit swirl and then we call it here and then we call it down here.

[00:00:57] And the question is like where can we access these variables and this nested scope? So, the parent that has null access to the child scope. So if we said, var, I don't know, x = 'asdf'. My creative juices are a little slow this morning. We couldn't say down here, we couldn't console.log(x).

[00:01:31] That's because while child scopes are nested, internested function has access to the parent scope as well as the global scope where the parents don't have access to the child scope. And at Hack Reactor, we use this metaphor for functions that I mentioned yesterday where a function is like a blender.

[00:01:53] A blender is an object., we can move it around. I can hand it to different people and we can save it in a variable if we wanted to, but to run the function or to turn on the blender, you have to put in the fruit and then press the button.

[00:02:09] And so call time is pressing the button, for example. And so the extension of that metaphor as it applies to scope, it's a little gruesome, but you never want to put your hand inside the blender. So if you kind of forget which way? Who can access what? If it's the parent or the child, just remember, you can't put your hand inside of a blender or you don't want to put your hand inside of a blender.

[00:02:38] And that will help you remember that the parent can't reach into the child's scope, but the child can actually reach into the parent's scope. So that's why here in this alert, we can access the variables in the parent's scope here. Y and v, but we can't cancel.log(x) down here at the bottom.

[00:02:59]
>> Speaker 2: I guess I'm confused with the analogy. Why would you want a child to reaching into a blender.
>> Bianca Gandolfo: [LAUGH] You don't want children reaching into blenders. That's not what I'm trying to promote. So we have nested function here, you see that we have this blend smoothie function and then we have the blender function.

[00:03:22] So we have this function inside of the function and the question is, which scopes. So, we have two different scopes that we're talking about. We have the parent scope and then we have the child scope, and we're trying to figure out which scopes have access to which variables.

[00:03:36] So the child one, the inner function has access to the parent scope and the global scope and all the way up the chain. So if it was nested many times, any parent, it has access to those variables in that scope. However, the parent cannot access the child scope.

[00:03:57] So this outer scope here can't access this inner scope and that's why this console.log(x) would throw an error.
>> Bianca Gandolfo: That make sense? Cool.
>> Speaker 2: Somebody in chat was just asking I think of why you were calling the bs function there rather than returning it?
>> Bianca Gandolfo: Rather than returning it?

[00:04:27]
>> Speaker 2: Yeah.
>> Bianca Gandolfo: Just because we're just calling it, there's no reason. We could return it, but then that adds an extra step of having to call it later. We're not returning anything from this function at all, we're just alerting. So, we could play with this function want it to.

[00:04:58]
>> Bianca Gandolfo: So I don't know if you can read that, but it says, blueberry and yogurt makes a blueberry swirl.
>> Bianca Gandolfo: And so, we just created a scope here. So when we called this blender function, we created this scope, that you can kind of represent by these brackets. We created a scope there and then here, when we call this blend smoothie function, bs is terrible naming.

[00:05:27] I didn't think about that at the time. [LAUGH] We call the blend-smoothie function. We create a second scope here. So this interscope has access to the parent scope, and that's why b and y. No, they know what values they hold, because the child scope accesses the parent.
>> Speaker 3: If you move the bs() indication down two lines would that work?

[00:05:54]
>> Bianca Gandolfo: No and so the question was if we move this bs() call time down here, would it work? And the answer is no, because the function bs is actually local to the blender function. And so, just like we couldn't console.log local up here, because it's private, we can't console log.

[00:06:25]
>> Bianca Gandolfo: We can't access the bs here.
>> Speaker 4: See so and the other thing is there's no arguments being passed to bs, but it's still rendering the blueberry and the yogurt, because they're-
>> Bianca Gandolfo: Because it has access to the parent's scope.
>> Speaker 4: It has access to the parent scope.

[00:06:44]
>> Speaker 3: To followup the [INAUDIBLE] the indication, if you moved it down two lines could you say, blender.ps.
>> Bianca Gandolfo: No, no.
>> Speaker 5: But if you name it that wouldn't it hoist it up.
>> Bianca Gandolfo: It would hoist it to the top of the scope. So, it would be like equivalent to just like.

[00:07:04] So, how the voicing would work is it would be the equivalent of just putting it up at the very top. So we could, technically, oops. We could technically-
>> Speaker 3: [COUGH]
>> Bianca Gandolfo: Call it up here and this is like not something I wanna cover too in depth, cuz it's a little bit confusing.

[00:07:24] But the way that this function works is, it's hoisted, so that you could actually call the function up here.
>> Bianca Gandolfo: Yep?
>> Speaker 2: Question about the variable x. If it was declared with the bar keyword, would it be in the global scope or just the scope above it?
>> Bianca Gandolfo: Good question.

[00:07:41] So if we do it like that, we take off the bar, then that would be in the global scope. So it'd be the equivalent of being in the scope up here.
>> Speaker 3: [COUGH]