If you’re just starting out or been at JavaScript for a little while variable scope can be a little tricky to understand.

Before we get into it let's have a look at MDN explanation.

The current context of execution. The context in which values and expressions are "visible" or can be referenced. If a variable or other expression is not "in the current scope," then it is unavailable for use. Scopes can also be layered in a hierarchy, so that child scopes have access to parent scopes, but not vice versa. -MDN

So if that explanation cleared it up for you then thanks for stopping by and I'm glad I could help!

Still here? Cool. Let's get an explanation that isn't for robots. Hopefully my explanation will make a real world everyday connection that anyone (not just programmers/or robots) can understand.

By the end of this short blog post you should have a good understanding on JavaScript variable scope. Let’s begin!

So let’s use this file here for our example.

For this example you live in an apartment building of 4 units. So let’s think of this entire JavaScript file as an apartment building. And you want some delicious cookies. You live in apt 4 and well let’s face it, your cookies are meh….

We could always make the buildings recipe of raisin cookies posted on the front door (or the global variable that anyone has access to at the top of our file).

But you want some chocolate chip cookies. And the sweet old lady in apt3() has the world’s best chocolate chip cookie recipe.

But that recipe is in her apartment and locked up. You can’t get in or “access” that recipe. Well you could kick down the door for it but I don’t think you want to go to jail for those cookies…

Well let’s try and see if we can access that recipe anyways, console.log(apt3CookieRecipe);

Nope, locked for sure. This is what we get back.

This error message, “is not defined” in a nut shell means we don’t have access because it’s locked up in her apartment (or the function). So trying to look it up outside of the apartment (or function) returns this message because you can't read what you can't see. Or even know it actually exists. So how do we get that delicious cookie recipe?

All we have to do to get that delicious cookie recipe is simply call up the sweet old lady in apt3() and ask for it. This is simply done by calling console.log(apt3());. And viola. We get,

So why did that work? Well to put it simply as possible the sweet old lady (or function) gave it to us. By calling the function apt3() we basically picked up the phone and called her. She/function then looked at her/its recipe, i.e. apt3CookieRecipe, and gave us (or return) it to us so we can see and use it.

That's it! I hope this story style tutorial helped you better understand the confusion on understanding JavaScript variable scope. If this helped you please consider sharing it to help others. Thanks for reading!