Scope in JavaScript (Function, Block, Global Scope)

Jun 02, 2025•JavaScript•3 min read

javascripthtmlscopeweb development

Understand how variable visibility works in JavaScript through Function Scope, Block Scope, and Global Scope.

Scope in JavaScript

Scope in JavaScript refers to the visibility and accessibility of variables, functions, and objects in different parts of the code. There are three main types of scope:
1. Function Scope
2. Block Scope
3. Global Scope

1. Function Scope

Function scope refers to the visibility and accessibility of variables declared within a function.
Variables declared within a function are only accessible within that function, including any nested functions within that function.
Variables can be declared using keywords like var, let, or const.

Example of Function Scope:

function greet() {
  var message = "Good night";  // Variable with function scope

  document.write(message);
}

greet();  // Outputs: "Good night"

// Attempt to access the message variable outside the function
document.write(message);  // Throws an error: "Uncaught ReferenceError: message is not defined"

In this example:

The variable message is declared inside the greet function with var, making it accessible only within that function.
When document.write(message) is called inside the function, it outputs the message correctly.
However, attempting to access message outside the function results in an error because message is only defined within the scope of the greet function.

2. Block-Level Scope

Block-level scope refers to the visibility and accessibility of variables declared within a block of code, which is defined by curly braces {}.
A block includes code structures like if statements, for loops, while loops, and any other code block.
Variables with block-level scope can only be declared using let and const.

Example of Block-Level Scope:

if (true) {
  let message = "Good night";  // Variable with block-level scope
  document.write(message);  // Outputs: "Good night"
}

document.write(message);  // Throws an error: "Uncaught ReferenceError: message is not defined"

In this example:

The variable message is declared inside the if statement using let, making it accessible only within that block.
When document.write(message) is called inside the block, it outputs the message correctly.
Attempting to access message outside the block results in an error because message is only defined within the scope of the if block.

If the variable is declared using const, it behaves similarly to let:

if (true) {
  const greeting = "Good night";  // Variable with block-level scope
  document.write(greeting);  // Outputs: "Good night"
}

document.write(greeting);  // Throws an error: "Uncaught ReferenceError: greeting is not defined"

If we use var instead of let or const, the variable is not limited to block-level scope but rather becomes function-scoped or globally scoped, depending on where it is declared:

if (true) {
  var info = "Hello";  // Variable with function/global scope
  document.write(info);  // Outputs: "Hello"
}

document.write(info);  // Outputs: "Hello"

In this case:

The variable info is accessible both inside and outside the block when declared with var.
This demonstrates that var does not adhere to block-level scope, unlike let and const.

3. Global Scope

Global scope refers to the visibility and accessibility of variables or functions declared outside of any function or block.
Variables in the global scope can be accessed from anywhere in the code.

Example of Global Scope:

In JavaScript, global variables can be declared using any keyword (var, let, const) or without using any keyword.
Additionally, global variables can also be declared using the window object.

// Declare a global variable using const
const ID = 123;

// Access the global variable inside a function
function displayID() {
  document.write("Inside function, ID: " + ID);  // Outputs: "Inside function, ID: 123"
}

displayID();

// Access the global variable outside the function
document.write("Outside function, ID: " + ID);  // Outputs: "Outside function, ID: 123"

In this example:

The variable ID is declared globally using const, so it can be accessed both inside and outside the displayID function.
When document.write("Inside function, ID: " + ID); is called inside the function, it outputs the ID.
When document.write("Outside function, ID: " + ID); is called outside the function, it also outputs the ID.

Global variables can also be declared without using any keyword, making them accessible throughout the code:

ID = 123;  // Declare a global variable without using any keyword

function showID() {
  document.write("ID: " + ID);  // Outputs: "ID: 123"
}

showID();
document.write("ID: " + ID);  // Outputs: "ID: 123"

In this case:

The variable ID is declared without using any keyword, making it a global variable.
It can be accessed both inside and outside the showID function.

Alternatively, global variables can be declared using the window object:

window.ID = 123;  // Declare a global variable using the window object

function printID() {
  document.write("Global ID: " + window.ID);  // Outputs: "Global ID: 123"
}

printID();
document.write("Global ID: " + window.ID);  // Outputs: "Global ID: 123"

In this example:

The variable ID is declared as a property of the window object, making it a global variable.
It is accessible from anywhere in the code, both inside and outside the printID function.