In JavaScript, scope is a fundamental concept that governs the accessibility and lifecycle of variables and functions. It essentially creates a boundary for your variables, determining from which parts of the code you can access them, which is crucial for preventing naming conflicts and writing modular code.

Global Scope: Accessible everywhere (generally avoided for good practice).

A variable declared at the top level of a JavaScript file, outside of any function or block, is in the global scope. This makes it accessible from anywhere in your code, but relying on global variables is often discouraged as it can lead to unintentional modifications and make your program harder to reason about.

Example 1: Basic Global Variable Access

// This variable is in the global scope because it's not inside a function or block.
let heroName = "Gandalf";

function revealHero() {
  // This function can access 'heroName' because it is a global variable.
  console.log(`Our hero is ${heroName}.`);
}

revealHero(); // Outputs: Our hero is Gandalf.

Explanation: The heroName variable is declared globally, so the revealHero function can easily access and use its value. This is the most straightforward example of variable visibility across different parts of the code.

Example 2: Modifying a Global Variable from a Function

// A global variable holding the initial power level.
let powerLevel = 9000;

function increasePowerLevel() {
  // This function accesses and modifies the global 'powerLevel'.
  powerLevel = powerLevel + 1;
}

increasePowerLevel();
console.log(powerLevel); // Outputs: 9001

Explanation: Functions have read and write access to global variables. Here, increasePowerLevel directly modifies the value of powerLevel, and the change persists outside of the function.

Example 3: Accidental Global Variable Creation

function declareSecretWeapon() {
  // 'use strict'; would prevent this from happening.
  // Assigning to a variable without declaring it first makes it global.
  secretWeapon = "Excalibur";
}

declareSecretWeapon();
console.log(secretWeapon); // Outputs: "Excalibur"

Explanation: When you assign a value to a variable that hasn't been declared with var, let, or const, JavaScript "helpfully" creates that variable in the global scope. This is a common source of bugs and is forbidden in strict mode.

Example 4: Global Variable Name Conflict (Shadowing)

// A global variable for a character's alignment.
let alignment = "Lawful Good";

function checkAlignment() {
  // This is a new local variable that "shadows" the global one.
  let alignment = "Chaotic Neutral";
  console.log(`Alignment inside function: ${alignment}`);
}

checkAlignment(); // Outputs: Alignment inside function: Chaotic Neutral
console.log(`Alignment outside function: ${alignment}`); // Outputs: Lawful Good

Explanation: Declaring a new variable with the same name inside a function creates a local variable. This local variable takes precedence within its scope, temporarily "shadowing" the global one without changing its value.

Example 5: Global Scope and the Browser's window Object

// Global variables declared with 'var' are added to the browser's window object.
var globalMessage = "Hello from the global scope!";

function checkWindow() {
  // You can access the variable directly or as a property of 'window'.
  console.log(window.globalMessage);
}

checkWindow(); // Outputs: Hello from the global scope!

Explanation: In web browsers, global variables declared using var become properties of the window object. Note that this behavior is specific to var and does not apply to variables declared with let or const.

Example 6: Accessing Global Variables from Nested Functions

// A global configuration setting.
const MAX_RETRIES = 3;

function outerOperation() {
  function innerOperation() {
    // The deeply nested function can still access the global scope.
    console.log(`Maximum retries allowed: ${MAX_RETRIES}`);
  }
  innerOperation();
}

outerOperation(); // Outputs: Maximum retries allowed: 3

Explanation: JavaScript's scope chain allows inner functions to look "upwards" for variables. If a variable isn't found in the local or parent scopes, the engine checks the global scope, making MAX_RETRIES accessible here.

Example 7: Global const Cannot Be Reassigned

// A global constant holding an API key.
const API_KEY = "xyz123-abc456";

function attemptToChangeKey() {
  try {
    // This will cause an error because a const cannot be reassigned.
    API_KEY = "new-key-789";
  } catch (error) {
    console.error(error.message);
  }
}

attemptToChangeKey(); // Outputs: Assignment to constant variable.
console.log(API_KEY); // Outputs: xyz123-abc456

Explanation: Using const for global variables is a great practice for values that should never change, like an API key. This example shows that any attempt to reassign a global constant will result in a TypeError, protecting its value.