Home Tutorials Videos Q&A MCQ Shortcuts Exercises Appointment Login
Lesson 23 of 30 – JavaScript Scope
57%

JavaScript Scope

Scope in JavaScript defines the accessibility of variables, objects, and functions.

Note: Scope determines where variables can be accessed and used within a program.
Types of Scope

JavaScript mainly provides two types of scope:

  • Global Scope
  • Local Scope

These scopes control the visibility and accessibility of variables.

Global Scope

Variables declared outside any function become global variables.

Global variables can be accessed and modified from anywhere in the program.

Example of Global Variable
Example:
var userName = "Sohan";

function modifyUserName(){
userName = "Shyam";
}

function showUserName(){
document.write(userName);
}

The variable userName is accessible inside both functions because it is global.

Global Variables Without var

Variables declared inside a function without using var, let, or const become global variables.

Example:
function createUserName(){
userName = "Sohan";
}

After calling the function, userName becomes globally accessible.

Important Note

Accessing a global variable before it is created will generate an error.

Always initialize variables before using them.

Local Scope

Variables declared inside a function using var, let, or const are local variables.

Local variables are accessible only within the function where they are declared.

Example of Local Scope
Example:
function createUserName(){
var userName = "Suresh";
}

function showUserName(){
document.write(userName);
}

This code generates an error because userName is local to createUserName().

Why Local Variables Are Important
  • Protect data from accidental modification.
  • Reduce naming conflicts.
  • Improve code readability.
  • Make programs easier to maintain.
Global and Local Variables with Same Name

Global and local variables can have the same name without affecting each other.

Example:
var userName = "Brinjay";

function showUserName(){
var userName = "Suresh";
document.write(userName);
}

The local variable is used inside the function, while the global variable remains unchanged.

Output of Same Name Variables
Output:
Suresh
Brinjay

The function displays the local value first, while the global variable keeps its original value.

Variable Shadowing

When a local variable has the same name as a global variable, the local variable hides the global variable inside that function.

This concept is called Variable Shadowing.

Block Scope in Modern JavaScript

Modern JavaScript supports block scope using let and const.

Example:
if(true){
let age = 20;
}

document.write(age);

This will generate an error because age exists only inside the block.

Real-Life Example

A student's roll number declared inside a function can only be used within that function.

Example:
function student(){
var rollNo = 101;
document.write(rollNo);
}
Output:

101

Advantages of Scope
  • Improves code security.
  • Prevents variable conflicts.
  • Makes programs easier to debug.
  • Improves code organization.
  • Reduces accidental modification of data.
  • Helps create reusable functions.
Points to Remember
  • JavaScript supports Global Scope and Local Scope.
  • Variables declared outside functions are global variables.
  • Variables declared inside functions are local variables.
  • Global variables can be accessed throughout the program.
  • Local variables cannot be accessed outside their function.
  • Global and local variables may have the same name.
  • Variables declared without var, let, or const can become global.
  • Modern JavaScript supports block scope using let and const.
Key Points
  • Scope controls variable accessibility.
  • Global variables are available everywhere.
  • Local variables exist only inside functions.
  • Variable shadowing occurs when local and global variables share the same name.
  • let and const support block-level scope.
  • Using proper scope improves code quality.
Quick Revision
Scope Type Accessibility
Global Scope Accessible everywhere
Local Scope Accessible only inside function
Block Scope Accessible only inside block (let/const)
Best Practices
  • Use local variables whenever possible.
  • Avoid creating unnecessary global variables.
  • Use let and const instead of var in modern JavaScript.
  • Keep variable names meaningful.
  • Limit variable scope to where it is needed.
  • Use const for values that should not change.

🧠 Quick Quiz

Which variable can be accessed from anywhere in a JavaScript program?



← Previous Next →