var vs let vs const
var vs let vs const explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
- javascript
- var-vs
Why this matters
If you ship frontend products, var vs let vs const shows up in real code and interviews. This page builds a practical mental model first, then the details.
Core idea
var is function-scoped; let is block-scoped and reassignable; const binds immutably (object contents may still mutate).
Key takeaways
- Know the problem var vs let vs const solves before memorizing APIs
- Prefer a tiny demo you can rewrite from memory
- Name one tradeoff or footgun in interviews
Example
const user = { name: "Ada" };
user.name = "Grace";
How to think about it
Start from the user or system problem this solves. Once the problem is clear, the API or pattern is easier to remember — and easier to reject when it is the wrong tool.
Common mistakes
- Memorizing definitions without writing a demo
- Ignoring edge cases interviewers always probe
- Copying patterns without knowing performance or a11y cost
Interview angle
Be ready to define var vs let vs const in one or two sentences, show a small example, and name one tradeoff. Clear models beat jargon dumps.
Practice
- Explain var vs let vs const out loud in under a minute with no notes.
- Build a minimal demo in the playground or a scratch file.
- Write one production bug this concept would have prevented.
Related on this site
Further reading
Original explanation for Frontend Beauty. We rephrase ideas after studying primary docs — we do not mirror third-party pages.
Related guides
- client offset scroll Dimensionsclient offset scroll Dimensions explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
- PromisesSettlement, chaining, errors, Promise API helpers, and how promises plug into the microtask queue — without cargo-cult async.
- Pub Sub vs ObserverPub Sub vs Observer explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
- getBoundingClientRectgetBoundingClientRect explained for frontend engineers — mental model, examples, common mistakes, and interview tips.
- Hoisting in JavaScriptHoisting in JavaScript explained for frontend engineers — mental model, examples, common mistakes, and interview tips.