DEV Community

Cover image for Understanding JavaScript Variables: var, let, and const
Chetan Gupta
Chetan Gupta

Posted on

Understanding JavaScript Variables: var, let, and const

#webdev #javascript #beginners #programming

When I first started learning JavaScript, variables confused me more than callbacks.
I kept asking myself:

Why does JavaScript have three ways to declare a variable?
And why does my code break when I use var?

If you’re learning JavaScript variables, or working with modern frontend and backend JavaScript frameworks, this guide is for you. I’ll walk you through var, let, and const in a simple, real-world way — no robotic definitions, just practical understanding.

JavaScript variables illustration

Why JavaScript Variables Matter (More Than You Think)

Variables are everywhere in JavaScript — whether you’re building a UI with React, Vue, or Angular, or writing backend logic using Node.js, Express, or NestJS.

Every modern JavaScript library or framework relies heavily on proper variable scoping.
And trust me, choosing the wrong one can lead to bugs that are very hard to debug.

The Three JavaScript Variable Types

JavaScript gives us:

  • var (the old-school one)
  • let (modern & flexible)
  • const (modern & safe)

Let’s break them down one by one.

var – The Legacy Variable (Use With Caution ⚠️)

var has been around since the early days of JavaScript.
You’ll still see it in older codebases, but it’s not recommended anymore.

Example: 

var name = "Chetan";
var name = "JavaScript Dev";

console.log(name); // JavaScript Dev
Enter fullscreen mode Exit fullscreen mode

Problems with var:

  • ❌ Function-scoped (not block-scoped)
  • ❌ Can be redeclared
  • ❌ Causes unexpected bugs due to hoisting

Scope Example: 

if (true) {
  var language = "JavaScript";
}

console.log(language); // JavaScript (leaks outside block!)
Enter fullscreen mode Exit fullscreen mode

This behavior is one reason developers moved away from var.

let – The Go-To Choice for Changing Values ✅

let was introduced in ES6 and honestly changed the game.

Example: 

let framework = "React";
framework = "Vue";

console.log(framework); // Vue
Enter fullscreen mode Exit fullscreen mode

Why I Prefer let:

  • ✔ Block-scoped
  • ✔ Cannot be redeclared in the same scope
  • ✔ Perfect for loops and condition-based logic

Scope Example: 

if (true) {
  let backend = "Node.js";
}

// console.log(backend); ❌ ReferenceError
Enter fullscreen mode Exit fullscreen mode

This makes let much safer for frontend and backend JavaScript development.

const – My Default Choice for Clean Code 🔒

If a variable should not change, I always use const.

Example: 

const library = "React";

// library = "Angular"; ❌ Error
Enter fullscreen mode Exit fullscreen mode

Important Thing to Know:

const does not mean immutable — it just means you can’t reassign it.

const tools = ["React", "Node.js", "Express"];

tools.push("MongoDB");
console.log(tools);
Enter fullscreen mode Exit fullscreen mode

This is why const works perfectly with:

  • Objects
  • Arrays
  • Configuration values
  • API endpoints

Most modern JavaScript developers default to const and only use let when necessary.

JavaScript Scope Explained (In Simple Words)

Scope defines where a variable is accessible.

Keyword Scope Type
var Function scope
let Block scope
const Block scope

Understanding JavaScript scope is critical when working with:

  • React hooks
  • Angular services
  • Vue composition API
  • Node.js backend logic

How Modern Frameworks Use let and const

Popular JavaScript frameworks and libraries like:

  • React
  • Angular
  • Vue
  • Svelte
  • Node.js
  • Express
  • Next.js

…all follow modern JavaScript standards.

You’ll rarely see var in production-level frontend or backend code anymore.

Example from React:

const App = () => {
  const title = "Understanding JavaScript Variables";
  let views = 100;

  return <h1>{title}</h1>;
};
Enter fullscreen mode Exit fullscreen mode

My Personal Rule for JavaScript Variables

This is what I personally follow (and recommend):

  1. Use const by default
  2. Switch to let only if the value changes
  3. Avoid var completely

This rule alone has saved me from countless bugs.

The JavaScript Community Agrees 💛

One thing I love about the JavaScript community is how openly knowledge is shared.

If you check:

  • Dev.to articles
  • Medium blogs
  • GitHub repositories
  • Stack Overflow discussions

You’ll notice a strong preference for let and const.
It’s a community-driven evolution, not just a language update.

Final Thoughts (From One Developer to Another)

Understanding var, let, and const is a small step — but it has a huge impact on how clean, readable, and bug-free your JavaScript code becomes.

Whether you’re building:

  • Frontend apps with React or Angular
  • Backend APIs with Node.js
  • Or learning JavaScript from scratch

Mastering variable scope will level you up faster than you expect 🚀

Top comments (0)