I choose to write about scope in my first blog post as I think that it's a tricky concept to explain to someone if you've been writing code in JavaScript for a long time.

In fact, after the initial learning curve scope becomes an integral part of JavaScript and it can be easily overseen while teaching - it's just how JavaScript works, right?

Here is a breakdown of how I would use a zoo metaphor to explain scope in JavaScript. I hope that wether you are a student who is looking for a more in-depth explanation or a teacher looking for some new examples, this will help! 🙌🏼

Basic Scope Concepts

I start off by setting up a simple zoo function with a global variable of a pigeon called Pidgey and a local variable lion called Leo.

Pidgey, being a bird, is allowed to go in and out of the zoo 🐦. However Leo can’t leave - as it would cause some chaos around Regent’s Park, duh! In order to show that Pidgey can leave the zoo, I would add a console.log outside the zoo function:

To prove what would happen if Leo tried to leave the zoo, you can log the local lion variable outside the zoo:

The console at this point will give a nice big red message, complaining that lion is undefined. Lions can't leave the zoo! 🦁

Re-assigning Variables

The next step is to see what would happen if Pidgey was to evolve whilst at the zoo (aka what happens when you update a global variable inside a function 😉).

Here is also a good time to note that the code inside the zoo function only runs when the function is invoked, so before Pidgey visits the zoo his name is still the same:

Since leaving the zoo, Pidgey has evolved and is now Pidgeotto. His name is different everywhere, not just at the zoo. But what would happen if we created a new pigeon inside the zoo called Pidgeotto:

At this point, one might expect that the global pigeon will still change name after the function. However, this doesn't happen because the pigeon in the zoo is a completely different bird from the one outside. This is the perfect opportunity to consolidate understanding of variables definition - declaring a variable inside a function creates a brand new local variable even if it's called the same as another global variable.

Arguments & Parameters

The third and most advanced topic one could cover in a scope lesson is the use of arguments and parameters in functions. When coming to terms with JS functions, it can be tricky to understand whether you need to or even should pass an argument to a function and what the consequences are 😨.

If you pass pigeon as an argument in the zoo function, it becomes apparent that the global pidgeon Pidgey is not affected by the local change inside the zoo function:

At this stage you can go into as much or little detail about the reason why this is happening, depending on how confident you think the students are with the materials covered so far. Here is the SandBox I used for this example, feel free to fork it and let your students play around with it:

Thanks for taking the time to read my post, let me know in the comments what topic I should cover next 😊