Deep Tech Point - learn tech easy way

It is super important to understand basic concepts of JavaScript and scope is definitely one of them – you cannot work in JavaScript, if you don’t understand what scope is and this is the main reason we prepared this article.

So, what is scope in JavaScript?

In JavaScript scope controls access or availability of variables (which include objects and functions, too) from different parts of the code.

Said that, JavaScript differentiates between 3 types of scope:

Block scope
Function scope
Global scope

What is a block scope?

Before ES6 (2015), JavaScript recognized only global scope and function scope, and then two important keywords that are the main pillar of a block scope were introduced: let and const. First, let clarify what is a block scope – it is everything that is located inside curly – {} – brackets.

When we define a variable with var, it cannot have a block scope, so when we declare a var variable inside a { } block, that var variable can be accessed from outside the block. This example nicely shows what we’re talking about:

{
  var a = 10;
}
// we can use a variable a outside a block scope

When we define a variable with let, the variable that we declared inside a { } block cannot be accessed from outside the block. For this reason, we say that the let variable has block scope. This example nicely shows what we’re talking about:

{
  let a = 10;
}
// we cannot use our variable from here, from outside a block scope

What is a function scope?

If you’re working with JavaScript, it is super important to understand that each function creates a new scope – and that new scope is called function scope aka child scope.

So, when we declare a variable inside a function, this variable has a function scope – it becomes local to the function, which means it is visible or accessible only from inside of that function and not from outside the function it was declared in.

From a standpoint of a function scope, it doesn’t really matter whether you define a variable with var, let, or const – they all behave the same when they are declared inside a function – they all have a function or child scope – they can be accessed from inside the function, but not outside of it. In addition to that, when we declare a variable within a function, we cannot access it from another function.

So, how do we call a variable scope when we declare it outside a function?

You’ve guessed it – if a function scope is also called a child scope, a variable that is defined outside a function has a parent scope. We also call a parent scope a root scope or a window scope, and it means that a variable that is defined outside a function is accessible within the entire program, not just within a function. This brings us to another important point to remember – all functions have access to variables that have the parent/ root/ window scope.
But, what if a variable declared within a function has the same name as a variable declared outside the function? In this case, both variables are treated as separate variables since they have different scopes.

But, what is a local scope then?

Basically, we’ve already talked about that in the article. Function scope is actually a local scope, or we can say when a variable is declared within a JavaScript function, it becomes local to the function. You can access it within the function – locally – but not outside of it. These local variables are created when a function starts, and they are deleted when the function is completed. This is the main thought behind a local scope. This example nicely shows what we’re talking about:

// the code here can't use houseNumber

function myHouseFunction() {
  let houseNumber = 19;
  // code here can use houseNumber 
}

// code here can't use houseNumber

In addition to that, and we’ve already mentioned it in the paragraph about function scope – JavaScript recognizes variables with a local scope only inside their functions where they were declared, for this reason, you can declare variables with the same name in different functions, too. They won’t be treated as they are the same – in this case, both variables are treated as separate variables since they have different scopes – both local, but each referring to its own surrounding – to its own function.

But, what is a global scope then?

If we imagine a scope is a box and that box has boundaries for variables, functions, and objects, and these boundaries determine whether the code you’re writing will have access to the variable or not, in other words, whether the variable is visible to the other parts of the code or not. Having said this, the difference between a local variable – a variable with a local scope vs. global variable – a variable with a global scope comes quite naturally. Think local vs. global – what’s smaller? Local, right? So, if we use the box metaphor again, local variables have access to everything that is located inside the box and its boundaries, while a global variable has access that is much greater – everything that is inside and outside of the box and its boundaries.
But, does the global variable includes local access too – access that local variables have? A variable with global scope can also see a variable that we defined as a local one. When we define a local scope, we also set boundaries that are closed for the world that is located outside local boundaries – outside the box, except for the variables that are defined as global ones. In terms of declaring variables with var, let, and const, it doesn’t really matter when they are declared outside a block.