What is Scope actually ?
Scoping is determining where variables, functions, and objects are accessible in your code during runtime. This means the scope of a variable(where it can be accessed) is controlled by the location of the variable declaration.
In JavaScript there are two types of scope:
- Local Scope
- Global Scope
Before jumping into Local Scope
and Global Scope
, Let's a have look on Block
and Function
Here's a new keyword Block Scope / Function Scope
. right ? What's these actually?
Well, It's defination is defined in itself. π sounds crazy? Don't worry. I'll explain it now.
A Block is created with a pair of Curly braces
{ }
function functionScope() {
// This a Block Scope.
// It's also a Function Scope.
// All codes inside this function are `function scoped` along with `block scope`.
}
if (CONDITION) {
// This is a Block Scope
}
Local Scope:
If varibales, funcitons, objects are declared inside a Block, It's called Local Scope.That's mean, A local Scope is created inside a
Block / Function
function localScope() {
// declear variables inside this block;
const countryName = 'Bangladesh';
console.log(`I love my country ${countryName}`); // I love my country Bangladesh
}
// if we print the variable outside of that block,
console.log(`I love my country ${countryName}`); // Uncaught ReferenceError: countryName is not defined
Global Scope:
If variables, functions and objects are declared outside a curly brace/Globally, are called global scope.
// declare our variables outside of any curly brace
const name = 'Shaon Kabir';
const age = 22;
const married = false;
function hello() {
console.log(name) // Shaon Kabir
console.log(age) // 22
console.log(married) // false
// we haven't declared anything here,
// but we can still have access on our variables beacuse they are declared globlly.
}
// We can print our variables value everywhere.
console.log(name) // Shaon Kabir
console.log(age) // 22
console.log(married) // false
Global + Local Scope Example:
// This function is created globally, we can get access on it from anywhere.
function globalFunction() {
// declear variables
const language = "JavaScript";
console.log("I am executing from GLOBAL function");
// create a local function
function localFunction() {
console.log("I love to code in" + language);
// Here, we have access to "language" variable because it's declared in `this`(localFunction) Parent scope
}
// Call innerFunction
localFunction();
}
// What if happen, If we call the inner Function outside of global Function ?
localFunction(); // Uncaught ReferenceError: localFunction is not defined
One last things, we've noticed that somethings is happending inside the localFunction. we've talked about Parent scope. Let's learn about it
Lexical Scoping:
β A relation between Parent Function and Child Function is called
Lexical Scoping
π₯Child can access Parent's Properties/variables/methods.
Here's
globalFunction
have a innerFunction namedlocalFunction
which is also a local function ofglobalFunction
. That's mean, there no existance oflocalFunction
outside ofglobalFunction
. so we've to call this innerFunction inside the Block.
Also, variablelanguage
is declared outside oflocalFunction
but, still it've the access on it. Because, In JavaScript, Child can access Parent's Properties/variables/methods.
This is my first blog post on dev community π₯. If you find any typing mistake, sorry for that :(
Top comments (1)
Amazing β€οΈ