JS : Scope…Closure…?

Here, let’s talk about basic concepts of scope and closure.

What is Scope?

According to MDN, scoping is about whether it can reference a variable or not. There are quite a few types of scoping in JS. Let’s talk about Global Scope, Function Scope and Block Scope.

Global Scope

var x = 'help'
function help()
{
	console.log(x) //help
}

Variable x in the above example is global variable. Therefore, it can be referenced from everywhere.

Function Scope

function hi()
{
	var x= 'hi'
	console.log(x) //'hi'
}
hi()
console.log(x) //Reference Error

If a variable is defined within a funciton. It is within the function scope. You cannot access the variable from outside of the function

Block Scope

let name = 'dave'
{
  let name = 'James'
  let age = '45';
}
console.log(name); // dave
console.log(age); // ReferenceError

In ES6, you can use block scope. You can only use the variable within a block. The variable “name” in the block is only valid within the block. Therefore the global variable “name” doesn’t change.

Definition of Lexical Scoping

Lexical Scoping means that a variable, could be referenced only within the block it is used. Lexical scoping is also named as static scoping.

On the other hand, dynamic scoping, which is different from lexical scoping, could be referenced out of the block.

Examples of Lexical Scoping

Function scope has priority over variable scope. Therefore, in EX1, the x in inner funciton cannot reference x in outer function. The outer function scope is not a parent of the inner function scope. However, in EX2, inner function is a child of outer function, so inner function scope is within the scope of outer function.

The important thing is that the function scope is defined when it is declared, not when it is called.

EX1

function outer(){
var x = 'outer'
inner()
}
function inner(){
console.log(x)
}
outer() //output : Reference Error

EX2

function outer(){
var x = 'outer'
function inner(){
console.log(x)
}
inner()
}
outer() //output : 'output'

Definition of Scope Chaining

Scope Chaining means that if a variable couldn’t be found in current context, it would be then looked up in the parent context.

Get Bong Mae’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Below example shows that variable word in hello function refers to variable word in hi, when it doesn’t find the variable in current context, and looks up into its parent context.

function  hi()
{
	let word = 'hi'
	hello();
	function hello()
	{
		console.log(word)
	}
}
hi() //'hi'

Definition of Closure

According to MDN,

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

HAHAHA. This could be quite tough to JS newbies like me!

The keypoint is that closure gives access to an outer function’s scope from an inner function.

Let’s dive deep into what it means. However, to understand closure we need to first know the concept of execution context.

execution context

Execution Context means which variable, objects the JavaScript Code can reference and how this is defined. Execution Context is managed by V8 in chrome, spider monkey in firefox.

When a function is called, the function execution context is put in to the call stack. Since java Script is single threaded, only one call stack is managed and the execution context is pushed into the context and popped out when it is exectuted.

Below is a simple picture of how execution context is managed. Even though variable a is defined in the outer function, the inner function can access variable a thanks to closure

function outer()
{
let a = 5
	function inner()
console.log(a) //5
}
return inner
}
outer()

call stack => outer : 1, inner : 2

On the next article, let’s talk about how closure is actually used for.

Ref

• JavaScript: Introduction to Scope (function scope, block scope)
• https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/#:~:text=The static structure of a,declared in their outer scope.