Understanding Scope in Javascript

Table of Contents

• Introduction
• Types of Scope
• Global Scope
• Local Scope
  • Function Scope
  • Block Scope
• Lexical Scope

Introduction

Scope in javascript refers to the part of your code in which variables, functions, and objects are visible and can be used. It refers to the context in which the declared variables are accessible.

In general, scope determines whether, in a particular part of the program, the declared variable, function or object is available for use or not.

Types of Scope

• Global Scope
• Local Scope

Global Scope

The global scope is the outermost scope in your program. Global scope is already accessible to you when you start writing a new javascript program. Anything you declare in the global scope is available for use throughout the program.

Variables declared outside functions or code blocks(if, while, for, {}) are in the global scope of the program.

//global scope
var globalVar = "I am a global var";

function newFunc(){
	console.log(globalVar);
}

//Output: I am a global var
console.log(globalVar); 

//Output: I am a global var
newFunc();

Local Scope

In javascript, the local scope is created by functions and blocks(if, while, for, {}). Any variable declared inside a local scope is available in that scope only.

For var, the local scope is only created by functions whereas let and const respects block scoping as well.

Function Scope

A function creates a local scope in javascript. Any variables declared using var, let and const are locally scoped inside a function and is accessible only inside of it.

//global scope
function func(){
 var funcVar = 'I am function var';
 let funcLet = 'I am function let';
}

//output:  Uncaught ReferenceError: funcVar is not defined
console.log(funcVar);

//output: Uncaught ReferenceError: funcLet is not defined
console.log(funcLet);

Block Scope

Block statements also create local scope in Javascript. Variables declared using let and const are placed inside the block scope. But for var, the local scope is created by functions only.

//global scope
{
	var blockVar = 'I am block var';
	let blockLet = 'I am block let';
	const blockConst = 'I am bock const';
}
//output:  I am block var
console.log(blockVar);

//output: Uncaught ReferenceError: blockLet is not defined
console.log(blockLet);

//output: Uncaught ReferenceError: blockConst is not defined
console.log(blockConst);

Lexical Scope

Functions declared separately do not have access to each other's scope in a program. But how does scope works when a function is declared inside other functions?

When functions are nested, the inner function has access to the scope of the parent function. Thus, the inner function can access variables defined inside parent function, but the opposite is not true. The parent function cannot access variables declared inside the inner function. In this case, inner function is said to have lexical scope.

// GLOBAL SCOPE
var globalVar = 'I am global var';

function outerFunc(){
	// function scope 1
  	var funcVar = 'I am function var';
   	var innerFunc = function(){
    		// function scope 2
    		//output: I am global var 
		console.log(globalVar);
		//output:  I am function var
    		console.log(localVar);
 	}
}

If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.

We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels (twitter, Facebook, LinkedIn).