Scope

Scope in JavaScript defines where variables and functions are accessible in your code. Because JavaScript runs in various environments (like a browser or Node.js), scope behavior can be nuanced.

There are four primary levels of scope, from highest to lowest:

1. Global Scope

Variables declared globally have the highest level of scope and can be accessed from anywhere in your code.

• In browsers, global variables become properties of the window object. (e.g., window.myGlobalVar = 'hello')
• In Node.js, they are properties of the global object.

2. Module Scope

In modern JavaScript (ES Modules), variables declared at the top level of a module are scoped specifically to that module file. They do not automatically leak into the global scope. We will explore modules deeper in a later chapter.

3. Function Scope

Variables declared with the legacy var keyword are limited to function scope. They are accessible only within that function and any nested functions inside it, but they ignore smaller block structures like if statements.

4. Block Scope

ES6 introduced block scope via the let and const keywords. A “block” is typically defined by curly braces {}, such as inside if statements or for loops. Variables declared with let and const are strictly confined to their specific block, making them predictable and preventing accidental variable collisions.

Practical Example

A common bug involves nested functions declaring a variable with the same name as an outer variable, unintentionally “shadowing” it.

function getMessageStatus(message) {
  let messageStatus = "processing";

  function isValidLength(msg) {
    // This creates a NEW block-scoped variable that shadows the outer one
    let messageStatus = "invalid"; 

    if (msg.length > 0) {
      messageStatus = "valid";
    }

    // It only returns the inner variable
    return messageStatus; 
  }

  // To fix the bug, you must capture the return value and assign it to the outer scope
  messageStatus = isValidLength(message);
  
  return messageStatus;
}