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

Variables: var, let, const

JavaScript variables can be declared with `var`, `let`, or `const`, and each one has different scope and reassignment behavior.

Modern JavaScript primarily uses `let` and `const`. `let` allows reassignment, while `const` prevents rebinding the variable name. `var` is older, function-scoped, and behaves differently with hoisting, so understanding the distinction is important for reading legacy code and avoiding scope bugs.

Explanation

Modern JavaScript primarily uses `let` and `const`. `let` allows reassignment, while `const` prevents rebinding the variable name. `var` is older, function-scoped, and behaves differently with hoisting, so understanding the distinction is important for reading legacy code and avoiding scope bugs.

Key Points

  • `let` and `const` are block-scoped.
  • `const` prevents rebinding but does not make object contents immutable.
  • `var` is function-scoped and has different hoisting behavior from `let` and `const`.

Common Mistakes

  • Assuming `const` makes arrays or objects deeply immutable.
  • Using `var` in new code and introducing scope confusion.
  • Reassigning a `const` and expecting it to work like `let`.

Practice Workspace

variables-declarations.js

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

Editor

7 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.

variables-declarations.js
7 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

1
2
3

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

Scope

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

Hoisting

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

Objects

Objects store related data and behavior as key-value pairs and are one of JavaScript’s core building blocks.

Practice Challenges

Choose the right declaration

6 min

Replace the wrong declaration so the counter can change and the lesson title stays constant.

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.