? JavaScript Scope

⚡ Quick Overview

In JavaScript, scope controls where variables are accessible in your code. It helps avoid naming conflicts and bugs by defining which parts of the code can use a given variable.

? Key Concepts

Global Scope – variables accessible from anywhere in the script.
Function Scope – variables available only inside a function.
Block Scope – variables available only inside a block ({ }) when using let or const.
var vs let vs const – different scoping rules that affect how variables behave.

? Syntax and Theory

A variable’s scope is determined by where it is declared:

Variables declared outside functions/blocks → global scope.
Variables declared inside a function → function (local) scope.
Variables declared with let / const inside blocks (like if, for) → block scope.
var is not block-scoped, only function-scoped.

? Global Scope

A variable is in global scope if it is declared outside any function or block. It can be accessed and modified from anywhere in the script.

? View Global Scope Example

let globalVar = "I am global";

function showGlobal() {
  console.log(globalVar); // Accessible here
}

showGlobal();
console.log(globalVar);   // Also accessible here

? Function Scope

Variables declared inside a function (using var, let, or const) are only accessible within that function. They cannot be used outside it.

? View Function Scope Example

function myFunc() {
  let localVar = "I am local";
  console.log(localVar);
}

myFunc();
// console.log(localVar); // ❌ Error: localVar is not defined

? Block Scope

With ES6, let and const introduced true block-level scope. A block is any code wrapped in { }, such as an if statement or loop.

? View Block Scope Example

if (true) {
  let blockVar = "I exist only here";
  const blockConst = "Same here";
  console.log(blockVar);
}

// console.log(blockVar);   // ❌ Error: blockVar is not defined

? var vs let vs const

The choice between var, let, and const affects how variables are scoped:

var is function-scoped and can lead to confusing behavior inside blocks.
let is block-scoped and can be reassigned.
const is block-scoped and cannot be reassigned.

? View var vs let Example

function testVarLet() {
  if (true) {
    var x = 10;
    let y = 20;
  }

  console.log(x); // ✅ 10
  // console.log(y); // ❌ Error: y is not defined
}

testVarLet();

? Live Output & Explanation

? What happens when this code runs?

Global scope example: Both showGlobal() and the last console.log print "I am global" because globalVar is accessible everywhere.
Function scope example: localVar can be logged inside myFunc(), but trying to log it outside the function throws an error because it is not defined globally.
Block scope example: blockVar and blockConst exist only inside the if block; accessing them outside causes an error.
var vs let example: x (declared with var) is still accessible outside the if block, but y (declared with let) is not.

? Tips & Best Practices

Prefer let and const to avoid bugs related to var and hoisting.
Declare variables in the smallest possible scope to keep code predictable.
Use const by default and switch to let only when you need to reassign.
Avoid relying on global variables; they can be modified from anywhere and are harder to track.

? Try It Yourself / Practice

Create a variable in global scope and access it inside a function. Then log it again outside the function.
Declare variables using var, let, and const inside an if block and test which ones are accessible outside the block.
Write a function with a local variable and confirm that it cannot be accessed from outside the function.
Refactor some of your old code to replace var with let or const and observe how the scope changes.