How Scope Works In JavaScript

Everyone knows what a scope is but not at the same time. In short, think of it like a ring-fence that gives access to your variables.

Here’s a diagram:

There are 2 types of scopes — a local scope and a global scope.

A local scope is one where it is only accessible by a particular ‘ring fence’. In the image above, the innermost scope is a local scope. This is because it’s accessible within the context of that ‘ring fence’.

Accessibility of scope trickles inwards. This means that scopes are not accessible beyond their boundary lines but can be used by those within.

The two inner rings of scopes in the image above can use the other ring variables but not the other way around.

A global scope is a variable where all scripts and functions have access to it. There is no ‘ring fence’ as such around a global scope, making it highly accessible.

quick notes on let and var

let and var are ways to declare a variable in JavaScript. Although they both do sort of the same things, there are some differences between the two.

let is only available inside the scope it’s declared. var defines a variable globally, or locally to an entire function regardless of block scope.

Think of a block scope as where your { } pair start and ends. A loop, for example, is one block scope. let limits accessibility to block scope while var limits accessibility to function scope.

Where you declare matters

You can create a global scope in JavaScript by using either let or var keyword before your variable name.

var catName = "Tibbers";
let dogName = "Roffles";

function callCat(){ 
   console.log("Here, here, " + catName); 
}

function callDog(){
   console.log("Here, here, " + dogName);
}

When you declare your variables at the top-most level, it becomes a global scope.

Alternatively, you can attach it to the window object. The window object is an object that var attaches to when a variable name is declared using it.

So writing something like this will also work:

window.cat = "meow";console.log(cat);

Local JavaScript Variables

Take a look at the following code:

var carType = "Tesla";

function car(){ 
    console.log("toot! says the " + carType ); 
}

car();
console.log("toot me again, " + carType);

The carType is a global variable. This means that it’s accessible by the car() function.

The above code will print the following output in the console:

"toot! says the Tesla" 
"toot me again, Tesla"

However, if we move carType inside the function, you’ll end up with a ReferenceError.

function car(){ 
    var carType = "Tesla"; 
    console.log("toot! says the " + carType ); 
}

car();
console.log("toot me again, " + carType);

The above code will generate something like this:

"toot! says the Tesla"
"ReferenceError: carType is not defined"

This is because carType is turned into a local variable and its access is confined to the nearest closing {} pair. The ReferenceError is a result of carType not existing in the context that it’s called.

In short, inheritance flows inwards and you need to explicitly set and state your assignments if you want to expose your values beyond the nearest {} pair.

Note that if you use var, it is the nearest {} function pair. If you use let, it is the closest {} pair, regardless of type.

The Life of a JavaScript Variable

The life of a JavaScript variable starts when it is declared. For local variables, it is deleted when the function or loop (if you used let) is completed.

In the context of a web browser, the variable ceases to exist when you close the browser or tab.


That’s basically it when it comes to JavaScript scopes. Hope you’ve found this article helpful!

Be sure to help spread the word about dottedsquirrel by sharing this post.

Comments

0 comments

About Author /

I code. I write. I hustle. Living the #devLife remotely. Subscribe to my newsletter to stay connected with my latest posts and dev thoughts.

Leave a Comment

Your email address will not be published.

Start typing and press Enter to search