Surya JS Journey

Learn JavaScript through concepts, code, and guided practice.

A focused workspace for concept study, interactive examples, visual explanations, and challenge solving.

Core JavaScriptBeginner

Scope

Scope determines where variables are visible and which parts of your code can access them.

JavaScript uses lexical scope, which means variable access depends on where code is written, not where a function is called. You work with global scope, function scope, and block scope. Understanding scope is essential because closures, shadowing, and accidental global leaks all come from how variables are resolved.

Explanation

JavaScript uses lexical scope, which means variable access depends on where code is written, not where a function is called. You work with global scope, function scope, and block scope. Understanding scope is essential because closures, shadowing, and accidental global leaks all come from how variables are resolved.

Key Points

  • Variables declared inside a block with `let` or `const` stay inside that block.
  • Functions can read variables from outer scopes unless a closer name shadows them.
  • Lexical scope is decided when code is written, not when it later runs.

Common Mistakes

  • Assuming `var` behaves like block-scoped `let` or `const`.
  • Reusing the same variable name and forgetting an inner declaration shadows the outer one.
  • Creating globals accidentally by assigning undeclared variables in sloppy code.

Practice Workspace

scope.js

Edit the code, run it in the browser, and inspect the console output below. Reset restores the original snippet for this page.

Editor

9 lines

Output

0 entries

Mode

practice

Workspace Notes

Changes stay local until you run the code. Reset restores the original snippet immediately for another pass.

Live editing

Safe to change before every run.

Fast reset

Return to the original starter instantly.

scope.js
9 linesMonaco Editor
Loading...

Editor Actions

Use the editor to explore the example, then run it to inspect the console.

Console0 entries

Run the code to see output here.

Expected Output

inner
outer

Continue in Playground

Open this concept example in the shared playground to keep experimenting without leaving the broader workspace flow.

Open in Playground

Related Concepts

Closure

Closures let inner functions keep access to variables from the scope where they were created.

Hoisting

Hoisting describes how JavaScript processes declarations before executing code line by line.

Execution Context

An execution context is the environment JavaScript creates to evaluate code, track variables, and determine `this`.

Practice Challenges

Fix a scope shadowing bug

8 min

Correct a function so it logs the local value first and the outer value second without mixing the two scopes.