JavaScript Scope

What is Scope in JavaScript?

In JavaScript, scope refers to the current context of our code in which variables are declared and can be accessed. In simple words, it helps us decide to define a variable or functions in JavaScript impacts where we can access it later on.

A scope can be defined as the region of the execution, where the expressions and values can be referenced. So if we define a variable inside a function, we can only access it inside that function.

Types of Scopes in JavaScript

There are several types of scope in JavaScript such as global scope, local scope, function scope, block scope, and lexical scope. Now let's explore some of these scopes in detail:

Global Scope

In JavaScript, global scope means that a variable or function can be available anywhere in our program. It is one of the most common and default scopes for a variable and functions.

How can we declare variables in Global Scope?

In the global scope, the variable can be accessed from any part of the JavaScript code.

Example

As you can see in the example, we declared a variable name pet with a value cat. Now we also defined a function called "printPet" which will print the value of the pet to the console.

You can see we defined the pet in the global scope, we can access it inside the "printPet" function.

Local Scope

Local scope means in JavaScript, that a variable or function is available in the current code block. Declaring a variable locally limits its visibility to the block of code, function, or conditional statement where it is defined.

How can we declare variables in the local Scope?

If we want to create a local scope then we need to use the curly braces:

Example

Let's take an example to understand the declaration of local scope in JavaScript:

In the above diagram, we have defined a variable named car with the value 'BMW'. We used curly braces to create a local scope for the variable.

Now the 'car' is in the local space so we cannot access it outside the curly braces. If you access the scope inside the curly braces, it will remain available.

Function Scope

It is very similar to the local scope in that we define the variable and functions inside a function that are only available inside that function. The variable can be defined inside a function and is not accessible from outside the function and we can declare the variable with the use of the var, let, and const keywords because they are quite similar when declared inside a function.

Example

In the above example, we have defined a function called "printCar". We need to define a variable called 'car' with a value of 'Audi'.

We have to define the 'car' inside the "printCar" function so we can only access the inside that function. If we try to access the car outside of the function, we will get an error.

Block Scope

It helps us to create variables and functions that are only available inside a code block. We use the block scope in conditional statements and loops so we can control the scope of variables.

In simple words, block scope is a series of nested boxes within a larger container, each with its own set of variables.

How can we declare a variable in Block Scope?

When a variable is declared in block scope then it is only accessible within the block in which they are defined. These variables are like hidden treasures inside a nesting doll known and accessible only within the respective compartments.

For Example:

In this code, we defined the blockVariable within the block created by the if statement and is inaccessible outside of it.

Lexical Scope

In JavaScript, the lexical scope can be more complicated compared to other scopes. It is also known as static scope or compile-time scope.

It means that the scope of a variable is determined by its position in the code. In simple terms, variables are accessible within the same scope as their parent variables.

Example:

In this example, we have defined a variable named vehicle with a value of Jaguar. We also defined a function called printVehicle.

Because we defined the vehicle variable in the global scope, it is available in the "printVehicle" that is available in the printVehicle function. If we try to access the vehicle inside a code block, it will not be available.

Example

In the above example, we can define a variable named the vehicle with a value of Jaguar. We can also define a function called 'printVehicle'.

We can define the vehicle variable in the global scope, it is available in the "printVehicle" function.

Why is Scope Important in JavaScript?

There are some reasons why scope is important in JavaScript. Some reasons are as follows:

Prevents Variable name conflicts

In JavaScript, when we declare two variables with the same name in the same scope then we will encounter an error and our code will not work properly.

Improve code security

With the help of scope in JavaScript, we can restrict access to variables and functions only within the appropriate scope boundaries. It also helps us to prevent the unintentional modifications or theft of sensitive data by unauthorized parties.

Improve code efficiency

The use of scope in JavaScript can also improve code efficiency. If we use the appropriate scope we can reduce the unnecessary use of memory and it also helps us to reduce the time.

Example1

In this example, we are declaring two variables one variable has a global scope, and the second variable has local scope. Both of the variables are declared with the same name.

In the output, we can see that the variable with locally scoped overrides the value of the global variable.

Output