JavaScript

Scope in JavaScript refers to the context in which variables are declared and accessed. It determines the accessibility (visibility) of variables.

---

1. Types of Scope

a. Global Scope

A variable declared outside of any function or block has a global scope. It is accessible from anywhere in the code.

let globalVar = "I am global";

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

printGlobal();

b. Local/Function Scope

Variables declared inside a function are only accessible within that function.

function greet() {
  let message = "Hello!";
  console.log(message);
}

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

c. Block Scope

Variables declared with let or const inside a block {} are only accessible within that block.

{
  let blockScoped = "Block scoped variable";
  console.log(blockScoped);
}
// console.log(blockScoped); // Error: blockScoped is not defined

Note: var is not block scoped—it is function scoped.

---

2. Scope Chain

When trying to access a variable, JavaScript looks in the current scope. If not found, it moves up the scope chain until it reaches the global scope.

let outer = "Outer variable";

function outerFunction() {
  let inner = "Inner variable";

  function innerFunction() {
    console.log(outer); // Found in the outer scope
    console.log(inner); // Found in the parent function
  }

  innerFunction();
}

outerFunction();

---

3. Lexical Scope

JavaScript uses lexical scoping, meaning the scope is determined at the time of writing code, not at runtime.

function outer() {
  let x = 10;

  function inner() {
    console.log(x); // Accessible because inner is lexically inside outer
  }

  return inner;
}

let innerFunc = outer();
innerFunc(); // Outputs: 10

---

4. Variable Shadowing

A variable declared in a local scope with the same name as one in a higher scope will shadow the outer variable.

let value = "global";

function test() {
  let value = "local";
  console.log(value); // Outputs: local
}

test();

---

5. Hoisting and Scope

Variable declarations (var, let, const) are hoisted, but only var is initialized as undefined.

Hoisting means the JavaScript engine moves declarations to the top of their scope before executing the code.

Example with var

function demoVar() {
  console.log(a); // undefined
  var a = 5;
}

demoVar();

Example with let and const

function demoLetConst() {
  // console.log(b); // ReferenceError: Cannot access 'b' before initialization
  let b = 10;
}

demoLetConst();

Variables declared with let and const are hoisted but are not accessible before their declaration. This is known as the Temporal Dead Zone (TDZ).

---

6. Best Practices

• Use let and const instead of var to avoid scope confusion.
• Keep variables in the smallest scope necessary.
• Avoid polluting the global scope.
• Use functions and blocks to create isolated scopes.

---

7. Conclusion

Understanding scope in JavaScript is essential for writing efficient, error-free code. It helps manage variable accessibility, avoid conflicts, and maintain clean coding practices. Always be mindful of where and how you declare your variables.