Scope
Scope is a larger topic for discussion. This is only a brief overview of the subject, but it should give you an idea of what's going on.
Scope is like talking about what section of a hotel you're in. The hotel itself is a larger scope (let's call it
global). Each room is a smaller scope (let's call it local).
Local vs. Global Scope
Everyone who checks into the hotel can use the pool and the restaurant because they are part of the public hotel space. Everyone can take towel from the pool and bring it into their room and use it there, or bring leftovers back to their room from the restaurant. This is the way global scope works.
Variables and functions defined in the global scope can be used by anything throughout the code. Anything can
change the values, which can be helpful sometimes but it's usually a cause for problems. Things can get changed
without you realizing it (especially if you have a common name for something like length.)
Local scope, going back to our hotel, is like each guest having a room key. Only that guest is allowed to go into the room. (Let's ignore the cleaning staff, ok?) The guest from one room cannot visit a guest from another room. This is how local scope works.
Let's say you create a function. Inside of it, you create a variable. That function is like a room in the hotel. The variable can only be used inside the function. It won't exist outside. (You wouldn't want someone else to have access to your luggage, right?)
If you go deeper, you can have a function inside another function. All variables from the outside can be used inside, but not the other way around. Think of your hotel room. Several guests can stay inside. You go into the bathroom and lock the door. You can read a magazine in there, but no one outside the bathroom can read it. It's a local scope inside a local scope inside the global scope. Whew.
Here's a code example:
- let myHotel = "Wolf Lodge";
- greetGuest();
- function greetGuest()
-
{
- let roomNumber = 317;
- sayHi();
- function sayHi()
-
{
- let welcome = "Welcome to " + myHotel + "!";
- let room = roomNumber + " is your room.";
- let greeting = welcome + " " + room;
- console.log("Inside sayHi():");
- console.log(myHotel);
- console.log(roomNumber);
- console.log(greeting);
- }
- console.log("Inside greetGuest():");
- console.log(myHotel);
- console.log(roomNumber);
- console.log(greeting);
- }
- console.log("Global, not inside any functions:");
- console.log(myHotel);
- console.log(roomNumber);
- console.log(greeting);
Uh oh, this doesn't work! You get:
- Inside sayHi():
- Wolf Lodge
- 317
- Welcome to Wolf Lodge! 317 is your room.
- Inside greetGuest():
- Wolf
- Lodge
- 317
- ReferenceError: greeting is not defined at greetGuest
The sayHi() function can make use of everything from the outside, so it
was able to show myHotel, roomNumber, and greeting. But greetGuest can't see what greeting is, so it throws an error. Try
commenting out the console.log(greeting);
greetGuest function and see what happens.
The program should get a little further. It can complete the greetGuest function, but
once it's in the global scope, you no longer have access to roomNumber (or greeting for
that matter).
Why global variables should usually be avoided
One of the reasons we can pass parameters in to functions is to keep control over scope. Try this example to see where having global variables can be a problem.
- let name = "Steve";
- function meetAFriend()
-
{
- name = "Kevin"; //this redefines the global name
- }
- console.log(name); //Steve
- meetAFriend();
- console.log(name); //Kevin
Hey, wait! I didn't think meeting a new person would make me change my first name! This is why we've got to be careful with using global variables.
Closures
This makes use of local scope to hide variables from users. In some computing languages, variables can be tagged as public or private. JavaScript doesn’t have that (yet). To work around this, sometimes people create closures to hide and protect variables from being touched. To create a closure, you need to create function inside a function.
- function sayHi(name)
-
{
- let greeting = "Hello, ";
- function addName()
-
{
- return greeting + name;
- }
- return addName();
- }
- //The results:
- console.log(sayHi("Merlin")); //"Hello, Merlin"
- console.log(sayHi("Monty")); //"Hello, Monty"
- console.log(sayHi("Shadow")); //"Hello, Shadow"
- console.log(greeting); //Reference error
This protects the greeting variable from being changed anywhere else in the program. The sayHi function can use it, but that's it.
There's more to understanding how closures really work and what they're best used for. It's an advanced concept.