What is scope?

Scope determines how and from where a variable can be accessed. Whether or not you can access a variable depends on:

Where the variable was created
Where you are when you try to access that variable

There are only two types of scope in JavaScript:

Global scope
Local scope

Local Scope

Each function creates its own scope. We call this function scope.

Variables which are created inside a function cannot be accessed outside the function.

index.js
constcalculateArea=()=>{
constlength=100;
constwidth=50;
console.log(length,width);
}
calculateArea();
//10050

The variables length and width can be accessed within the calculateArea function because the variables and the console.log statement are within the same scope. They are both inside the function.

If we try to access those same length and width variables, we receive an error telling us they are not defined. This is because length and width can only be accessed within the scope they were created (the function).

index.js
constcalculateArea=()=>{
constlength=100;
constwidth=50;
}
console.log(length,width);
//10050

Variables created within a function can only be accessed from within that function.

Global Scope

Global scope is the space outside a function. A variable defined outside a function is available globally, meaning it is available anywhere.

index.js
constlength=100;
constwidth=50;
constcalculateArea=()=>{
console.log(length,width);
}
calculateArea();
console.log(length,width);
//10050
//10050

In this instance, length and width were created outside a function, which means they can be accessed globally.

They can be accessed from the global scope, which is within or outside a function.

You should be careful when creating variables.

Variables created inside a function will automatically become global if it is not created using let, const, or var.

Using 'strict' mode

Strict mode will stop undeclared variables created inside a function from being automatically global.

Variable life-span

Global variables: they exist as long as your application exists. That means if created within a script, they exist as long as the script is running. If accessed by a web page, they exist as long as that window is open.

Local variables: they are created when the function is called, and deleted after.

Closures

A definition taken from 'Secrets of the JavaScript Ninja': A closure is a way to access and manipulate external variables from within a function.

Consider this function. What would you expect age to be?

index.js
letage=10;
constbirthday=()=>{
age++;
}
birthday();
birthday();
birthday();
console.log(age);
//13

The value of age is 13.

The problem here is that any function can alter the age value. Because age is declared globally, its value also changes each time the birthday function is called.

By creating a closure, we ensure that:

age can only be accessed within the birthday function
The value of age is reset each time the birthday function is called

index.js
constbirthday=()=>{
letage=10;
constsetCandles=()=>{
age++
console.log(`Youwillget${age}candles`);
}
setCandles()
}
birthday();
birthday();
birthday();
//Youwillget11candles
//Youwillget11candles
//Youwillget11candles