Scopes in Javascript

manhsteven

The article will help if you are learning javascript or get confused in output question or even find difficult to understanding other core concepts of javascript.

What are scopes?

The scope is the accessibility of variables, functions, or objects in some particular part of your code during runtime.

They came into existence when the principle of least privilege was applied in programming language designs.

Why should we care to learn it?

They provide some level of security to your code, i.e are only used when they are really needed.
Scoping parts of your code help improve efficiency, track and reduce bugs
It also solves the naming problem when you have variables with the same name but in different scopes, so reduce namespace collision.

What are the types of scope?

Global and Local
Lexical
Block
Public and Private

Global Scope and Local Scope

Any variable declared outside of a function belongs to the global scope and is therefore accessible and can be altered from anywhere in your code.

Variables defined inside a function are in the local scope. They have a different scope for every call of that function. This means that variables having the same name can be used in different functions. This is because those variables are bound to their respective functions, each having different scopes, and are not accessible in other functions.

New functions = new local scope — that’s the rule.

Lexical Scope

When a function within another function, the inner function has access to the scope in the outer function, this is called Lexical Scope — also referred to as Static Scope as it may only be called (referenced) from within the block of code in which it is defined.

JavaScript starts at the innermost scope and searches outwards until it finds the variable/object/function it was looking for.

The important thing to remember is that the Lexical scope does not work backward. i.e we cannot access comments variable in SocialMedia function and in the Platform function in above example.

Other Example:

function a() {
    const a = 1;
    console.log(a)
    return function b() {
        const a = 2
        console.log(a)
        return function c() {
            const a  =3
            console.log(a)
        }
    }
}

1
2
3

function a() {
    const a = 1;
    console.log(a)
    return function b() {
        console.log(a)
        return function c() {
            console.log(a)
        }
    }
}

1
1
1

Block Scope

Block statements like if and switch conditions or for and while loops and {} unlike functions, don’t create a new scope.

var name = "Mouse";
{
  // Local
  var name = "Cat";
  console.log(name); // Cat
}
console.log(name); // Cat

Other exmple:

for (var i = 0; i < 3; i++) {
  setTimeout(function() { console.log(i); }, 1000);
}
// 3,3,3

for (let i = 0; i < 3; i++) {
  setTimeout(function() { console.log(i); }, 1000);
}
// 0 1 2

Explain:

The reason is due to how scopes work in JavaScript. In the first example, when using var to declare the variable i, i is created in the scope of the parent function containing the for loop. So, when the setTimeout functions are called, they access the same i variable within the same scope. However, at the time the setTimeout functions are executed, the for loop has already completed, and the value of i is 3. Therefore, when the setTimeout functions execute, they will print the value 3 three times.

In the second example, when using let to declare the variable i, i is created in a new scope for each iteration of the loop. This means that each setTimeout function will access the i variable within its own separate scope. Hence, when the setTimeout functions execute, they will print the values 0, 1, and 2 respectively, corresponding to the values of i in each iteration.

Public and Private scopes

Wrapping functions from the public (global) scope save them from vulnerable attacks. But in JavaScript, there is no such thing as public or private scope. However, we can emulate them though.

The return statement of the modulePattern contains our public functions. The private functions are just those that are not returned. Not returning functions makes them inaccessible outside of the modulePattern namespace. But our public functions can access our private functions which make them handy for helper functions.

src: https://towardsdatascience.com/still-confused-in-js-scopes-f7dae62c16ee

Web3 Developers Community Forum