JavaScript Scopes - Global Scope, Function Scope, Block Scope and Module Scope

Learn the fundamentals of Javascript to become a good developer.
﻿
In this article, we are going to explain what is scope in Javascript, how many scope are there ? and how they work ? So keep reading it's simple and short !
﻿
As you may already know, Scope is one of the most important concepts in programming language. Every variable, function, expressions, objects, module has its scope in Javascript. 
﻿
What is scope ?﻿
In Javascript, objects, variables and functions that are "visible" or "accessible" inside the current context of execution are said to be within the scope. So scope defines the visibility and accessibility of a variable and objects in your context.
﻿
There are different types of scopes :
﻿
Global scope
Function scope
Block scope
Module scope
﻿
We will elaborate one by one in the next step but worth to mention that before ES6 (released in 2015), there are only Global scope and function scope.
﻿
Note in Javascript, objects and functions are variable and function is object.
﻿
﻿
Consider this snippet :

function myFunc () {
    const javascript = "The King of Web"
}

console.log(javascript); // ReferenceError: javascript is not defined

Here we try to access variable javascript  but it is not accessible outside the function myFun and you will get a ReferenceError.
﻿
What Is Global scope ?﻿
In JavaScript, variables declared outside a block or outside a function become global variables.
Global variables are accessible on a web page but not in Node.js notes that global variables are not accessible only to the actual file unless you explicitly import/export them. We will talk about that later in module scope.
﻿
=> So a global variable has global scope.

const tuto = "Global Variable";

function myFunc() {
  console.log(tuto); // Global Variable
}

console.log(tuto); // Global Variable

function secondFunc(params) {
  console.log(tuto); // Global Variable
}

Explain: tuto is declared outside a function, it's global variable. You can access it anywhere in your code.
﻿
﻿
What Is Function Scope ?﻿
A local variable to the function has a function scope. Variable declared inside a function is not accessible outside the actual function. Each function has its own scope. No matter how the variable is declared: with var, let or const, it's the same. 
﻿
﻿

function myFunc() {
  const myVarInsideFunc = "Function scope";

  const innerFunction = () => {
    console.log(myVarInsideFunc); //  "Function scope"
  };
}
console.log(myVarInsideFunc); // throw ReferenceError

Note the myVarInsideFunc, it is only visible (accessible) inside the myFunc function. You can acces "myVarInsideFunc" inside innerFunction. innerFunction is within the scope of myFunc.
﻿
﻿
Block Scope﻿
There was no Block Scope before ES6. ES6 add two powerfull keywords in Javscript  to declare variable: let and const. Only variable declared with let and const can have block scope, variable declared with var cannot have block scope.
﻿
All variable inside a block has a block scope : inside if statement, switch, for loop etc. They are not visible outside the actual block.
﻿
﻿

if (condition) {
  // laptop has a scope inside this {}. Block scope
  const laptop = "MacBook"; // this variable is accessible only inside the if statement
} else {
    console.log(laptop); // ReferenceError: laptop is not defined
}

let count = 0;

while (count < 100) {
 // modifier has a scope inside this {}. Block scope
  const modifier = 5;
  count += modifier;
}

console.log(modifier); // ReferenceError: modifier is not defined

You are now  capable of understanding what's going on. right ?
﻿
Here the only thing you need to note is that a variable declared inside {} is not visible (accessible) outside that block.
﻿
﻿
Module scope﻿
In module scope, variable declared inside module is accessible outside the module via import/export. Variables need to be explicitly exported and imported before you can use them.  

// in factorial.js

const factorial = function fac(n) {
    return n < 2 ? 1 : n * fac(n - 1);
}

If you want to use this function in index.js, you need to export it first and the import it.

// in factorial.js

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
};
export { factorial }; // named export
export default factorial; // default export

And then import in index.js

// // in index.js

import { factorial } from "./factorial"; // if exported with named export
import factorial from "./factorial"; // if exported with default export

factorial(5); // 120

Conclusion﻿
You are now able to explain what is scope and how they work. Here is a recap of what we have learnt :
﻿
Global scope : Variable declared outside a function or block has a global scope.
Module scope: Variable declared inside a module is not accessible outside the actual module unless it is exported explicitly.
Function scope: Variable declared inside a function has a function scope and only visible inside the actual function
Block scope: Variable declared inside a block is accessible only in the actual block. variable declared with var keyword cannot have a block scope.
﻿
Thank you for reading my post, so see you next time !
﻿
Don't forget to add a comment! 
﻿
﻿
 

By Aina Flaccon, Developer && Technical Writer

13 September 2022 at 10 h 09

I am Aina Flaccon, a Technical Writer possionate with new technology and new tools. Yes I write, read and share !!!

JavaScript Scopes - Global Scope, Function Scope, Block Scope and Module Scope

What is scope ?

What Is Global scope ?

What Is Function Scope ?

﻿

Block Scope

Module scope

Conclusion

﻿

﻿

`What Is Global scope ?`