Scopes in JavaScript – Now You See Me, Now You Don’t

Published January 13, 2018 in JavaScript - 0 Comments

If you’re just starting out writing code, you’ve probably ran into some situations where you have declared variables and sometimes they’re found and sometimes they’re not.  This can cause a good amount of confusion when trying to figure out what the problem in your application is.  Whether your variables are found or not depends on where you have defined your variable, this is called scope.

What exactly is scope?

As I stated above, scope determines whether your declared variables will be found when trying to run your scripts.  In JavaScript the two most prominent types of scope are global scope and function scope.  JavaScript also supports the use of block scope in a way.  Block scope gives a more finite control over the scope of your variables using the new ES6 const and let declarations.  That’s another subject for another day however, so let’s get deeper into global and function scopes.

 

Global Scope

Global scope is the most basic and least restrictive type of scope.  This refers to variables that have no restrictions on visibility and can be accessed from within any other function or block of code.

var name = "tony";

console.log("Name:", name); //Name: tony

function myFunction() {
  console.log("Inside My Function:", name);
}

myFunction(); //Inside My Function: tony

The above example shows how you will get the same result for name whether you log it right after the declaration, or from within a function.  The result is the same because of how JavaScript scope lookup works.  In a nutshell, the console.log on line 3 will search our program for a variable called name and when it finds the value will log it.  Inside our function on line 6 our function will first search the code inside of the function for a variable called name.  When it doesn’t find it, it will “reach” outside of itself and search the global scope for the name variable.  When it finds it, it logs the same value.   The above example will give the same result no matter how many functions call the variable, as long as the variable value is not overrode by the function itself.

 

Function Scope

Function scope behaves a little differently.  Let’s check out this example:

function myFunction() {
  var name = "tony";
  console.log("Inside My Function:", name);
}

myFunction(); //Inside My Function: tony
console.log("Name", name); //ReferenceError

Interesting.

When we call the function the name value is what we expect, but our second console.log statement gives us a ReferenceError error.  Why is that?  It’s all because of where our variable is defined.  When we define our variable inside of a function the variable only “exists” within that function.  The function surrounding our name variable hides it from the global scope so when we try and log the value the compiler doesn’t find it, the screen goes black, the desk starts to shake, an- ok, no you just get a ReferenceError.

Function scope not only applies to variables explicitly defined inside of our function, but it also applies to variables we specify as arguments to our function.

function myFunction(name) {
  console.log("Inside My Function:", name);
}

myFunction("tony"); //Inside My Function: tony
console.log("Name", name); //ReferenceError

In this case name is passed in as an argument so our function can still find the name variable and logs it the same, but since it is still tied to our function the global scope gives us the same ReferenceError.

 

Summary

We’ve gone over the two main types of scopes global and function.  These are the main scopes you will need to get comfortable with when you are first starting out, and knowing these two will give you a good clue as to where and when you want to define your variables.  Got a variable that the entire program will need to know or keep track of? Define it globally.  Variable that is only relevant to a specific function? Define it inside your function.  Sometimes that is the only question you need to ask yourself when trying to figure out where and when you should declare your variables.

No comments yet