Platform under construction

Values & Types

Intermediate

var, let & const

Variables do not have permanent types in JavaScript. Values have types, and var, let and const decide how names are bound to those values.

const itemPrice = 12;
let itemCount = 5;

itemCount += 1;
console.log(itemPrice * itemCount);

Values & Types

var, let and const are about bindings, scope and reassignment.

JavaScript variables are names that point to values. The value has a type. The variable name itself can later point to a different value unless you used const.

Use const by default when the binding should not be reassigned. Use let when the binding must change. Avoid var in modern code unless you are reading or maintaining older JavaScript.

Important detail: const protects the binding, not the inside of an object. A const object can still have properties changed unless you deliberately freeze or protect it.

const

Block-scoped binding that cannot be reassigned. Best default for stable names.

let

Block-scoped binding that can be reassigned. Use it for counters, changing state and loops.

var

Function-scoped older declaration with hoisting and redeclaration behavior.

Binding vs value

const stops reassignment of the name, but objects and arrays can still be mutated.

Examples

Good type handling makes JavaScript predictable.

Modern declarations show intent

const pricePerItem = 12;
let selectedItems = 15;

selectedItems += 1;

const cartInfo = { name: "Starter plan", items: selectedItems };
cartInfo.items = 6; // object mutation is still allowed

var hides too many decisions

var price = 75;
var price = "75";

if (true) {
  var price = 90;
}

console.log(price); // 90, because var is not block-scoped

Rules that matter

Types are not paperwork. They are behavior.

JavaScript lets values move flexibly, but professional code keeps meaning clear. Convert at boundaries, validate input and choose values that represent the real idea.

Use const first

If a name does not need reassignment, const communicates that immediately.

Use let for real change

Counters, toggles and changing state are good let candidates.

Avoid var in new code

var has older scoping behavior that surprises beginners and complicates maintenance.

Remember object mutation

const user = {} prevents user = anotherObject, but not user.name = "User A".

Keep scope small

Declare variables inside the block or function where they are actually needed.

Name the meaning

itemCount is better than x because the type and purpose are easier to read.

Production thinking

Data quality starts with value quality.

Why does this matter?

Variable declarations are the first line of communication between you and the next developer. They show whether a value is stable, changing or old-style code.

Accessibility

State variables often control visible messages, expanded menus and form feedback. Clear state names reduce bugs in interactive behavior.

Production note

Production JavaScript should avoid accidental globals, var redeclarations and wide scopes. They make bugs harder to find.

SEO note

If client-side rendering depends on state variables, mistakes in bindings can break visible content and links.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Change itemCount to const and see why reassignment fails.
Add a second let variable for discount percentage.
Create a const object and change one of its properties.

Practice assignment

Do this before moving to the next topic.

Write three const declarations.
Write one let declaration that changes after a click.
Explain the difference between changing a binding and mutating an object.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand var, let & const.