DEV Community

Cover image for Understanding `let`, `const`, and `var` in JavaScript: A Beginner's Guide
Vijay Kumar
Vijay Kumar

Posted on

Understanding `let`, `const`, and `var` in JavaScript: A Beginner's Guide

If you're new to JavaScript or trying to strengthen your foundations, one of the first confusing things you’ll encounter is the difference between let, const, and var. They all declare variables, but the way they behave under the hood is quite different—and understanding them can save you from some tricky bugs down the road.

Let’s break it down in a way that actually sticks.


The Evolution of Variable Declarations

Back in the early days of JavaScript, there was only var. It did the job—but not without quirks. As JavaScript evolved, developers needed more control and predictability. Enter let and const, introduced in ES6 (2015). These newer keywords offer better scoping and help prevent unintentional errors.


1. var: The Old-School Way

  • Function Scoped: var is scoped to the function in which it's declared. If it's declared outside of any function, it becomes globally scoped.
  • Hoisting: Variables declared with var are hoisted to the top of their scope—but only the declaration, not the value.
console.log(a); // undefined
var a = 10;
Enter fullscreen mode Exit fullscreen mode

You don’t get an error above because the declaration var a is hoisted. But since the value 10 hasn’t been assigned yet, you get undefined.

  • Redeclaration is Allowed:
var a = 5;
var a = 10; // No error
Enter fullscreen mode Exit fullscreen mode

This can lead to confusion and bugs, especially in large codebases.


2. let: The Modern and Safer Option

  • Block Scoped: Unlike var, let is scoped to the block ({}) in which it’s defined.
{
  let x = 20;
}
console.log(x); // ReferenceError
Enter fullscreen mode Exit fullscreen mode

This keeps your variables more localized and avoids accidental overwriting.

  • Hoisting, But Not Usable Before Declaration: Technically, let is hoisted, but it's in a "temporal dead zone" until the line where it's defined.
console.log(x); // ReferenceError
let x = 10;
Enter fullscreen mode Exit fullscreen mode
  • No Redeclaration in the Same Scope:
let y = 10;
let y = 20; // SyntaxError
Enter fullscreen mode Exit fullscreen mode

This helps you catch mistakes early.


3. const: Lock the Variable

  • Block Scoped: Like let, const is also block scoped.
  • Must Be Initialized: You have to assign a value when you declare it.
const z; // SyntaxError
Enter fullscreen mode Exit fullscreen mode
  • Cannot Be Reassigned: Once a const is assigned, you can’t reassign it.
const pi = 3.14;
pi = 3.1415; // TypeError
Enter fullscreen mode Exit fullscreen mode

But note: if the value is an object or array, the contents can still be changed!

const arr = [1, 2, 3];
arr.push(4); // This works
arr = [5, 6]; // TypeError
Enter fullscreen mode Exit fullscreen mode

So, Which One Should You Use?

Here’s a good rule of thumb:

  • Use const by default.
  • Use let only when you know the value will change.
  • Avoid var unless you’re working with legacy code.

This pattern leads to more readable and predictable code. It makes your intent clear: const means “I don’t want this value to change,” and let means “this might change later.”


Final Thoughts

Understanding the difference between let, const, and var isn’t just about knowing syntax. It’s about writing safer, cleaner, and more maintainable JavaScript. These keywords might look small, but they carry powerful behavior that affects your entire program.

Take the time to experiment, read errors carefully, and notice the patterns. As your skills grow, you'll start making these decisions almost automatically—and that’s when you know you’re leveling up as a developer.


Have questions about where to use let or const? Ask away in the comments—let’s learn together!

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.