Scope

Definition and importance of scope

• In this blog , we will go over the concept of scope and execution context which is super important when dealing with multiple functions and variables . Every scope provides a certain execution context within which variables and functions are identified while at the same time being non identified outside of that specific execution context .

- Overview of different types of scope in JavaScript

• There are different types of scope , the one with the least limitations is the global execution context followed by function scope , block scope and lexical scope . Those concepts will be elaborated further on throughout the blog .

I.Global Scope

• Global scope to me is the comfort zone since any variable or function could be used in any other function without the need to worry about its execution context . This is thanks to the fact that any function or variable declared and assigned in global execution context is identifiable within any other scope .

Example of a global variable

const globalVar = 10;

function globalFunction() {
    // Accessing the global variable within the function
    console.log(globalVar);
}

// Calling the global function
globalFunction();

• In the following code , globalVar is declared and assigned within a global execution context , this means that globalVar could be referenced and is identified anywhere across our code which is super convenient but should be analyzed since sometimes we don't want people to have access to all of variables or functions for security purposes. This is where declaring variables within functions becomes super handy .

II.Function Scope and Block Scope

• Function Scope and Block scope are when things start getting a little bit confusing but carefully analyzing the concept will make everything clear . Function scope covers functions and variables declared within a function while block scope encompasses expressions such as if statements(conditionals) or loops . Both scopes exhibit similar characteristics where any variables or function declared within a function (function scope ) or within expressions such as loops or conditional statements are only limited by the execution context of the functions or the expressions. So such variables would not be identifiable within other functions .

Example of a variable declared within a function

function localFunction() {
    // Local variable within the function
    const localVar = 20;
    console.log(localVar);
}

localFunction(); // Calling the local function
localVar; //localVar would not be identified here because it is outside its scope 

• In the code snippet above localVar is only identifiable within the LocalFunction.

Example of a variable declared within an expression(conditional statement)

if (true) {
  // Block scope
  let blockVar = 30;
  const blockConst = 40;
  console.log(blockVar);    // Output: 30
  console.log(blockConst);  // Output: 40
}

console.log(blockVar);      // Throws ReferenceError: blockVar is not defined
console.log(blockConst);    // Throws ReferenceError: blockConst is not defined

• Similar to the previous example. , blockVar and blockConst are both identifiable only within the conditional statement while it is not identified outside of the expression and this is because of the different scopes and their execution contexts.

III. Lexical Scope (Closures)

• Lexical Scope is where things get tough, but don't worry we will go over the confusing points and clear things up .Each nested function has its own scope, which is a subset of the enclosing function's scope. The nested function can access variables from its own scope, as well as variables from its parent scope and any higher-level scopes. Variables identified within a parent function are also identified within any nested function within the parent function . However , any variable identified within a nested function would only be identified within that function only . In addition ,the nested function is identified within the scope of the parent function but is unidentified within the global scope .

function outerFunction() {
 const outerVar = 'outer';

  function innerFunction() {
    const innerVar = 'inner';
    console.log(innerVar);   // Output: inner
    console.log(outerVar);   // Output: outer
  }

  innerFunction(); // identified within the outerFunction but not in the global scope 
}

outerFunction(); 

• In the code snippet above , outerVar is identified within the scope of both the innerFunction and the outerFunction . However , innerVar is only identified within the scope of the innerFunction . In-addition , the function innerFunction is only identified in the outerFunction scope but is unidentified in the global scope .

• In conclusion , a clear understanding of the effects of scope on the code is crucial to write efficient and functioning code. It is also important to prevent others from changing variables or functions that are not to be altered for security purposes . In my opinion it is a confusing topic when it is encountered for the first time but it gets clearer as we get more experienced .