What are variables and their scoping in Javascript?

Think of variables as labeled boxes where you can store things, and scoping determines which box you can see and use at any given time. A JavaScript variable is similar to a named box in the memory, where the programmer can store a value and later access it to read or manipulate it. However, how and where a variable is accessible is determined by its scope.

Javascript offers different methods to create variables. These methods are differentiated by the keywords that are used to declare the variable. These keywords are:

  • let
  • var
  • const

The primary difference in variables declared by each of these keywords is the scope of the variable. The scope of the variable determines the blocks of code in which the variable will be accessible.

A block is a piece of code written within the curly braces, i.e. {}

Each of the above-stated keywords is explained in detail below.

The let keyword

The variables declared using the let keyword are block-scoped, i.e., these variables are only accessible within all the child blocks and the block in which they are declared. Once a variable is declared using the let keyword, it can be read or updated but not declared again.

Code example using the let keyword

The following snippet of code shows the declaration variables using the let keyword and their scopes.

The variable x is declared in the main scope, and it is accessible within the child block of the if statement.

On the other hand, the variable y is declared inside the block of the if statement. Hence its scope is limited. It is not accessible outside the block of the if statement. That is why the compiler produces an error when we try to print the value of y outside the if statement block.

let x = 5; // Declares a block-scoped variable `x` with the value 5.
if (x == 5) { 
  // Checks if the value of `x` equals 5. If true, executes the block.
  let y = 10; // Declares a block-scoped variable `y` with the value 10 inside the `if` block.
  console.log("Value of X inside the IF block: ", x); // Logs the value of `x`, accessible inside the block (output: 5).
  console.log("Value of Y inside the IF block: ", y); // Logs the value of `y`, accessible inside the block (output: 10).
}
console.log("Value of X outside the IF block: ", x); 
// Logs the value of `x`, which is accessible globally (output: 5).
console.log("Value of Y outside the IF block: ", y); 
// Throws a ReferenceError because `y` is block-scoped and not accessible outside the `if` block.

Line 10: Throws a ReferenceError because y is block-scoped and cannot be accessed outside the if block.

The var keyword

The variables declared using the var keyword are function-scoped. These variables are accessible within the entire function in which declared, even if they are declared in the child block of another statement like if, for or while etc.

Once a variable is declared using the var keyword, it can be read, updated and re-declaredRe-declared happens when you declare the same variable more than once in the same scope. using the same variable name.

Code example using the var keyword

The following snippet of code shows the usage of variables declared by the var keyword.

The variable x is declared in the body of the function named func using the var keyword. Hence, it will be accessible in the entire body of the function.

The variable y is declared, and then re-declared, inside the scope of the if statement, yet it is accessible outside the block of the if statement. This is because y has been declared using the var keyword which makes it accessible throughout the function even if it is declared in the child block of the function.

function func() {
    var x = 5; // Declares a function-scoped variable `x` with the value 5.
    if (x == 5) {
        var y = 15; // Declares a function-scoped variable `y` with the value 15.
        var y = 10; // Re-declares `y` (allowed with `var`) and assigns a new value 10.
        console.log("Value of X inside the IF block: ", x); // Logs the value of `x` (output: 5).
        console.log("Value of Y inside the IF block: ", y); // Logs the updated value of `y` (output: 10).
    }
    
    console.log("Value of X outside the IF block: ", x); // Logs the value of `x` (output: 5), accessible throughout the function.
    console.log("Value of Y outside the IF block: ", y); // Logs the value of `y` (output: 10), since `var` is function-scoped.
}
func();

The const keyword

The const keyword is used to declare constants. These are the type of variables whose values can not be changed.

The variables declared using the const keyword are block-scoped i.e. these variables are only accessible within the block in which they are declared and all the child blocks.

Unlike var and let, the variables declared with the const keyword must be initialised while declaration. Once a variable is declared using the const keyword, it can be read but not updated or re-declared.

Code example using the const keyword

The following snippet of code shows the usage of variables declared using the const keyword.

The variable x is declared using the const keyword, hence it is accessible within its child blocks but not changeable. Therefore, if we uncomment line 5, the compiler will produce an error.

The constant y is declared inside the if statement block, hence it is not accessible outside that block. Therefore, the compiler generates an error when we try to read its value outside the if block.

const x = 5; // Declares a block-scoped constant `x` with the value 5.
if (x == 5) {
    // x = 10; // This line, if uncommented, will throw an error because constants cannot be reassigned.
    const y = 10; // Declares a block-scoped constant `y` with the value 10.
    console.log("Value of X inside the IF block: ", x); // Logs the value of `x` (output: 5).
    console.log("Value of Y inside the IF block: ", y); // Logs the value of `y` (output: 10).
}
console.log("Value of X outside the IF block: ", x); // Logs the value of `x` (output: 5).
console.log("Value of Y outside the IF block: ", y); // Throws a ReferenceError because `y` is block-scoped.

With the introduction of let and const , JavaScript now has more precise rules for scoping, which helps avoid common errors.

On line 11, a ReferenceError occurs because y is block-scoped and cannot be accessed outside the if block where it was declared.

Scope in JavaScript

Scope in JavaScript refers to the accessibility of variables, functions, and objects in different parts of your code. It determines where our code can reference or use a variable. JavaScript has the following types of scope:

  1. Global scope

  2. Local scope

What is global scope?

A variable has a global scope if it is declared outside any function or block. Such variables are accessible from anywhere in the program, including inside functions and blocks.

Key points:

  • Variables declared using var, let, or const at the top level of a script are global.

  • Global variables can lead to unexpected behaviors if modified by different parts of your code.

Example:

let globalVar = "I am global!"; // Global variable
function showGlobalVar() {
    console.log(globalVar); // Accessible here
}
showGlobalVar(); // Output: I am global!
console.log(globalVar); // Output: I am global!

What is local scope?

A variable has a local scope if it is declared inside a function or block. Such variables are only accessible within the function or block where they are defined. Local scope helps prevent variables from conflicting with one another.

Types of local scope:

1. Function scope

Variables declared using var, let, or const inside a function are scoped to that function.
Example:

function greet() {
    let message = "Hello!"; // Local variable
    console.log(message);  // Accessible here
}
greet();
// console.log(message); // Error: message is not defined

2. Block scope

Block scope applies to variables declared with let or const inside {} (curly braces). Variables declared with var do not have block scope and are function-scoped.
Example:

{
    let blockScoped = "I am block-scoped!";
    console.log(blockScoped); // Accessible here
}
// console.log(blockScoped); // Error: blockScoped is not defined

Global vs. local scope

Global scope

Local scope

Accessible everywhere

Accessible only within the defined function or block

It can be declared outside any function or block

It can be declared Inside a function or block

Key takeaways

  1. Global scope: Variables declared outside functions or blocks can be accessed from anywhere.

  2. Local scope: Variables declared inside functions or blocks are limited to those contexts.

  3. Use let and const for better scoping control and to avoid var's quirks.

  4. Always prefer local scope when possible to minimize the risk of variable conflicts.

1

What will happen if you try to redeclare a variable declared with const in the same block?

A)

The code will run without any issues.

B)

It will throw a ReferenceError.

Question 1 of 30 attempted

Ready to learn JavaScript and build interactive web applications? Start our Learn JavaScript course and gain a solid foundation, preparing you for a career in web development.

Want to become a web developer? Begin our Become a Web Developer skill path, starting with the basics and advancing to expert-level skills, setting you up for success in the world of web development.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What is a scoped JavaScript function?

A scoped JavaScript function is a function where variables declared inside it are accessible only within the function or its nested blocks. This is known as function scope, and it ensures that the variables are private to the function and do not affect the global or outer scope.

Which scope is used by JavaScript?

JavaScript uses the following scopes:

  • Global scope: Variables accessible from anywhere in the code.
  • Function scope: Variables defined inside a function are accessible only within that function.
  • Block scope: Variables declared with let or const inside a block (e.g., {}) are accessible only within that block.

What does scope mean in coding?

Scope in coding defines the visibility or accessibility of variables, functions, and objects in a program. It determines where a variable can be used. For example:

  • Global scope makes variables available throughout the code.
  • Local scope restricts variables to a specific function or block.

What are the three types of variables used in JavaScript?

JavaScript has three types of variables based on how they are declared:

  • var: Function-scoped and can be redeclared.
  • let: Block-scoped and cannot be redeclared.
  • const: Block-scoped and used for constants that cannot be reassigned.

How many variables are there in JavaScript?

JavaScript has three types of variable declarations: var, let, and const. These are used to declare and manage variables with different scoping rules. They ensure proper management of data and help avoid conflicts in code.

Free Resources

HowDev By Educative. Copyright ©2025 Educative, Inc. All rights reserved