JavaScript: Introduction to Scope

Mayank Chaudhari
3 min readJul 4, 2022

--

What is Scope?

Scope determines the visibility or accessibility of a variable or other resource in the area of your code.

You can think of scope in JavaScript as a semitransparent bag containing names of variables and functions. While you are in the bag you can clearly see what is outside of it, but nobody from the outside can look into your bag.

Global Scope

There’s only one Global scope in the JavaScript document. The area outside all the functions is consider the global scope and the variables defined inside the global scope can be accessed and altered in any other scopes.

//global scope
var fruit = 'apple'
console.log(fruit); //apple
function getFruit(){
console.log(fruit); //fruit is accessible here
}
getFruit(); //apple

Local Scope

Variables declared inside the functions become Local to the function and are considered in the corresponding local scope. Every Functions has its own scope. Same variable names can be used in different functions because they are bound to the respective functions and are not mutual visible.

//global scope
function foo1(){
//local scope 1
function foo2(){
//local scope 2
}
}
//global scope
function foo3(){
//local scope 3
}
//global scope

Local scope can be divided into function scope and block scope. The concept of block scope is introduced in ECMA script 6 (ES6) together with the new ways to declare variables — const and let.

Function Scope

Whenever you declare a variable in a function, the variable is visible only within the function. You can’t access it outside the function. Variables defined with var , let , as well as const keywords confirm to the function scope.

function foo(){
var fruit ='apple';
console.log('inside function: ',fruit);
}
foo(); //inside function: apple
console.log(fruit); //error: fruit is not defined

Block Scope

A block scope generally appears within if, switch conditions or for and while loops. Generally speaking, whenever you see {curly brackets}, it is a block. You can have block scope even if you are not defining any loop or conditional and it is valid. In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block. The keyword var which corresponds to older syntax does not confirm to block scope.

function foo(){
if(true){
var fruit1 = 'apple'; //exist in function scope
const fruit2 = 'banana'; //exist in block scope
let fruit3 = 'strawberry'; //exist in block scope
}
console.log(fruit1); //apple
console.log(fruit2); //error: fruit2 is not defined
console.log(fruit3); //error: fruit3 is not defined
}
foo();

Lexical Scope

Another point to mention is the lexical scope. Lexical scope means the children scope have the access to the variables defined in the parent scope. The children functions are lexically bound to the execution context of their parents.

function foo1(){
var fruit1 = 'apple';
const fruit2 = 'banana';
let fruit3 = 'strawberry';
function foo2(){
console.log(fruit1);
console.log(fruit2);
console.log(fruit3);
}
foo2();
}
foo1();//result:
//apple
//banana
//strawberry

Want to learn and start using modern JavaScript, TypeScript and modern web frameworks like React and Next.js quickly and efficiently, check out my course on Next.js: React + Next JS with TypeScript.

--

--

Mayank Chaudhari

Technical Writer | Developer | Researcher | Freelancer | Open Source Contributor