Making Sense of Scope in JavaScript: Beginner's Guide

Sometimes, it's hard to understand why our code doesn't work.

There may be many reasons why this happens, but one of the reasons is misunderstanding the scope.

When we declare a variable somewhere and try to access it later, the scope defines where you can or can't access it.

In a function, let's suppose you declare a variable. You will get a not-defined value when you console.log ( ) the variable outside of the function.

But if you move console.log ( ) up and inside the function, you'll get the variable's value.

It happens because of not understanding how scope works and how you can get the most out of it.

It happens to most beginners. Also, it's frustrating when it comes to a job interview or project work.

Knowing how to use the scope not only saves time but also improves your skills as a developer.

So, in today's tutorial, you will learn what scope is and how you can use it.

Scope:

Scope means the accessibility of the variables. In other words, you must know where you declared the variables and where you are trying to access them.

Types of Scopes:

1. Block Scope

2. Local Scope

3. Function Scope.

4. Global Scope

Let us look at them in detail.

Block Scope:

Block scope represents the scope of variables inside the { } curly brackets. You can access or modify the variables declared inside the { } and not outside of it.

While let and const are block-scoped, you can access var outside the scope.

To understand it better, look at the following examples.

//var
{
  var name = "kiran";
  console.log(name); // kiran
}
console.log(name); //kiran

//let
{
  let name = "kiran";
  console.log(name); //kiran
}
console.log(name); //not defined

//const
{
  const name = "kiran";
  console.log(name); //kiran
}
console.log(name); // not defined

Loops, DOM manipulation, etc., will have block scope { }. Here's an example of block scope in JavaScript using for loop.

for (let i = 0; i < number; i++) {
   var count =0;
   console.log(count)// 0
}
console.log(count)// 0

You can access the count within and outside the block scope { } because var doesn't have block scope.

If the same variable is declared with let or const, then the 2nd console.log( ) will return not defined.

Local Scope:

Variables declared inside a function become local to that function. You can also declare the same variable name outside the scope.

Local and function scope sometimes refer to the same thing, but not always.

Look at the example in the next section to understand it better.

Function Scope:

Local variables are created when a function starts. Destroyed when the function is complete.

It means they are only available inside the function. To make you remember the function scope with ease, here's a joke:

What happens inside a function, stays inside a function🤣. It is an insider joke. If you crack it outside of your scope no one will get it.

If you have many scopes inside a function. Variables declared inside the function will act as local or function scoped.

For example,

function First(){
var x = 10; //function scoped i.e; it is available to the inner function check1 also and anywhere in the function

function second(){
var y = 5 //it is local to the check1 function, and the check function cannot access it. 
console.log(x) // 10
}
check1()

}
check()

Here, var y is local to the second function. In comparison, var x is function scoped.

X being function scoped will be available to the second function also. Because the second is within the first.

In simple terms, Y is local to second while X is local to first and function scoped.

Note: Var, let, and const declared within the function will be function scoped.

While using functions, do not forget to call the function. Otherwise, it will return not defined even if you try to access the variable inside the function.

// Without calling the function
function check( ){
var x = 10;
console.log( x ) // undefined
}

// If you console.log( x ), you will get undefined. Because you didn't call the function. 

// Calling the function
function check(){
var x = 10;
console.log( x ) // 10
}
check( )

Global Scope:

In Global scope, you can access variables from anywhere. If you declare variables outside of functions or { } have global scope.

Automatically global scope

function one( ){
name = "kiran" // Even though name is inside the function, it acts as global scope
// and can be accessed anywhere. Because you haven't declared with any of the variables var, let, and const.
}

Var, Let, and Const declared globally will have global scope.

Final Words:

The scope can be confusing at first, but with some practice, the scope can be fun to understand.

Each time figuring out the scope errors without understanding it can be time-consuming and irritating.

Once you understand the scope, you will be able to work faster, and smarter without wasting your precious time.

If you enjoyed this article, subscribe to my newsletter. I will be publishing JavaScript concepts regularly.