JavaScript Scope Interview Questions

The three types of scope

1. Global scope

Variables declared outside any function or block. In browsers, they become properties of window. Visible everywhere in your program.

var appName = 'JSPrep'

function anywhere() {
  console.log(appName)  // 'JSPrep' ✓ — visible from anywhere
}

2. Function scope

Variables declared inside a function exist only within that function, created when it runs, destroyed when it returns.

function makeGreeting() {
  var message = 'Hello'
  console.log(message)  // 'Hello' ✓
}

makeGreeting()
console.log(message)  // ReferenceError — doesn't exist here

3. Block scope

let and const are block-scoped — they exist only within the { } block they're declared in. var ignores block boundaries entirely.

if (true) {
  let blockVar = 'block-scoped'
  var funcVar  = 'function-scoped'
}

console.log(funcVar)   // 'function-scoped' — var leaked out
console.log(blockVar)  // ReferenceError — let stayed inside

The scope chain

When JavaScript looks up a variable, it searches the current scope first, then moves outward until it finds it or reaches global scope. If still not found: ReferenceError.

const global = 'global'

function outer() {
  const outerVar = 'outer'

  function inner() {
    const innerVar = 'inner'

    console.log(innerVar)   // found in inner ✓
    console.log(outerVar)   // not in inner → found in outer ✓
    console.log(global)     // not in outer → found in global ✓
    console.log(missing)    // not anywhere → ReferenceError ✗
  }

  console.log(innerVar)  // ReferenceError — can't look inward
}

Lexical scope — location of definition, not call

Scope is fixed at the point where the function is written. Calling it from a different location does not change what it can see.

const x = 'global x'

function readX() {
  console.log(x)  // always reads from where readX was DEFINED
}

function other() {
  const x = 'local x'
  readX()           // still prints 'global x', not 'local x'
}

other()  // 'global x'

Variable shadowing

When an inner scope declares a variable with the same name as an outer one, the inner version shadows the outer. The outer still exists — it's just unreachable from within.

let score = 100

function game() {
  let score = 50       // shadows outer score — different variable
  console.log(score)   // 50
}

game()
console.log(score)     // 100 — outer untouched

Classic bug: you intend to modify the outer variable but accidentally declare a new inner one instead. Use ESLint's no-shadow rule to catch this.

Module scope (ES modules)

Every ES module file has its own scope. Top-level variables are not global — only explicitly exported values are accessible to other modules.

// utils.js
const secret = 'internal'    // module-scoped only
export const PI = 3.14159    // accessible to importers

// main.js
import { PI } from './utils.js'
console.log(PI)      // 3.14159 ✓
console.log(secret)  // ReferenceError

IIFE — scope isolation before modules

Before ES modules, the Immediately Invoked Function Expression created private scope to avoid polluting globals. You'll see this pattern in legacy code.

(function() {
  var private = 'only exists in here'
  // all internal logic here
})()

console.log(private)  // ReferenceError — perfectly isolated

Common scope bugs

// Bug 1: Forgetting var/let/const creates a global
function setName() {
  name = 'Alice'   // no declaration — accidentally global in non-strict mode
}

// Bug 2: var leaks out of for loops
for (var i = 0; i < 3; i++) {}
console.log(i)  // 3 — leaked. Use let instead.

// Bug 3: let in a block, used outside it
if (condition) {
  let result = compute()
}
return result  // ReferenceError — result died with the block