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.

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

  // console.log(b); // ReferenceError
  // let b = 10;
}

demo();

---

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.