JavaScript Scope is the area where a variable (or function) exists and is accessible. We can layer the scope in a system which means the child scope can access the parent scope but not vice-versa.
Javascript has different scopes
Global Scope
Those variables which are declared outside the function or blocks or you can say curly braces({}) are having a global scope.
In a JavaScript program, global variables can be accessed from anywhere.
The scope of var, let, and const are quite equivalent when declared outside the function.
Example: In this example, we will declare all the variables outside the function and now we can access those variables from anywhere in the Javascript program.
JavaScript
var global_variable1 = "Geeksforgeeks";
let global_variable2 = "Geeks";
const global_variable3 = "GFG";
function check_global_variables(){
console.log(global_variable1);
console.log(global_variable2);
console.log(global_variable3);
}
check_global_variables();
OutputGeeksforgeeks
Geeks
GFG
Function Scope
Those variables that are declared inside a function have local or function scope which means variables that are declared inside the function are not accessible outside that function.
When declared inside a function, variables declared with var, let, and const look quite similar.
Note: Functions and Objects are also variables in Javascript.
Variables which are declared within the function have function scope. When var declared in the function have a function scope. Function uses the curly braces to store the function body . Therefore, block scope and function scope is same for the function body.
Example: In this example, we will declare a variable inside the function and try to access it from outside the function.
JavaScript
function check_function_scope(){
var variable1 = "Geeksforgeeks";
let variable2 = "Geeks";
const variable3 = "GFG";
console.log(variable1);
console.log(variable2);
}
check_function_scope();
console.log(variable3);
Output: In the above example, we tried to access the variable outside the function but it gives the reference error because of the function scope.
Geeksforgeeks
Geeks
ReferenceError: variable3 is not defined
Block Scope
Before the ECMA6(2015) we have only global and function scope but when the Let and Const keywords were introduced in ES6 they provide the block scope.
Variables that are declared inside the { } (curly braces) can only access inside that scope not from the outside of it.
Variables declared with var do not have block scope only let and const have block scope.
Example: In this example, we will declare the variable inside the block scope.
JavaScript
{
var variable_1 = "GFG";
const variable_2 = "Geeksforgeeks";
let x=2;
x*=2;
console.log(x);
console.log(variable_2);
}
console.log(variable_1);
Output: In the above example, we have successfully accessed the variable with the var keyword because var does not have a block scope.
4
Geeksforgeeks
GFG
Lexical Scope
The variable is declared inside the function and can only be accessed inside that block or nested block is called lexical scope.
Example: In this example, we will declare the variable inside the function and going to access inside the nested function.
JavaScript
function outerFunction() {
const outerVariable = "Hello";
function innerFunction() {
const innerVariable = "Geeks";
console.log(`${outerVariable} ${innerVariable}`);
}
innerFunction();
}
outerFunction();
Output:
Hello Geeks
Global Variables in HTML
The Global variables defined with the var keyword are part of the window object. The window object is the global scope in HTML.
Lifetime of JavaScript Variables
- A JavaScript variable's lifetime begins when it is declared.
- When the function is completed, the function (local) variables are erased.
- When you close a browser window, global variables are erased.
Similar Reads
Lexical Scope in JavaScript
Lexical scope is a fundamental concept in programming that determines the accessibility of variables and functions based on where they are defined in the source code. In simple terms, lexical scope is the scope of a variable or function determined at compile time by its physical location in the code
4 min read
JavaScript Var Statement
The var keyword is used to declare variables in JavaScript. It has been part of the language since its inception. When a variable is declared using var, it is function-scoped or globally-scoped, depending on where it is declared.Syntaxvar variable = value;It declares a variable using var, assigns it
7 min read
What is Variable Scope in JavaScript ?
Variable scope is the context of the program in which it can be accessed. In programming, a variable is a named storage location that holds data or a value. Think of it as a container that you can use to store and manipulate information in your code. Variables allow you to work with data in a flexib
4 min read
Scope : Variable Masking in JavaScript
In this article, we will learn about Variable Masking which is also known as Variable Shadowing i.e. a variable with the same name will shadow the variable in the outer scope. When a variable is masked, the masked variable is completely inaccessible using that variable name. The scope is hierarchica
3 min read
Scoping & Hoisting in JavaScript
Prerequisite: Understanding Javascript Scoping, Javascript Hoisting In JavaScript, there are two types of scopes Global Scope: Scope outside the outermost function attached to the window.Local Scope: Inside the function being executed. Hoisting: It is a concept that enables us to extract values of v
11 min read
Explain Scope and Scope Chain in JavaScript
In this article, we will try to understand what is the scope of a variable as well as its function (or method). We will see what is a Scope Chain with the help of certain coding examples. ScopeScope in JavaScript determines the accessibility of variables and functions at various parts of one's code
5 min read
Understanding Variable Scopes in JavaScript
In JavaScript, scope defines the accessibility of variables in different parts of your code. It determines where a variable can be accessed or modified.Before ES6 (Released in 2015), variables were declared only with var, which is function-scoped (accessible within the function) and global Scoped (A
5 min read
All about Functions and Scopes in JavaScript
In this article, we will cover all the basic concepts of JS functions, callbacks, scopes, closures in-depth which would help you to - understand different types of function declarations.make better use of functions.understand how different scopes and scope chain works in JS.learn about closures and
10 min read
Public, Private, and Protected Scope in JavaScript
In this article, we will see the fundamentals of public, private, and protected scopes in JavaScript. We'll explore how to create these scopes, their practical applications, and the conventions used to simulate access control. Table of Content Private ScopePublic ScopeProtected ScopeScopesPrivate Sc
3 min read
Difference Between Scope and Closures in JavaScript
The scope and closures are fundamental concepts that play a crucial role in how variables are accessed and managed within the functions and blocks of code. In this article, we will learn about the difference between scope and closures in JavaScript. What is Scope?The Scope in JavaScript refers to th
2 min read