Skip to content
-
Subscribe to our newsletter & never miss our best posts. Subscribe Now!
Developer Hint

Simple Coding Tips For Developers.

Developer Hint

Simple Coding Tips For Developers.

  • Home
  • Web Development
  • Tech Explained
  • Developer Tools
  • Contact Us
  • Home
  • Web Development
  • Tech Explained
  • Developer Tools
  • Contact Us
Close

Search

Trending Now:
5 Essential Tools Every Blogger Should Use Music Trends That Will Dominate This Year ChatGPT prompts – AI content & image creation trend Ghibli trend – viral anime-style visual trend
Subscribe
Developer Hint

Simple Coding Tips For Developers.

Developer Hint

Simple Coding Tips For Developers.

  • Home
  • Web Development
  • Tech Explained
  • Developer Tools
  • Contact Us
  • Home
  • Web Development
  • Tech Explained
  • Developer Tools
  • Contact Us
Close

Search

Trending Now:
5 Essential Tools Every Blogger Should Use Music Trends That Will Dominate This Year ChatGPT prompts – AI content & image creation trend Ghibli trend – viral anime-style visual trend
Subscribe
Home/Web Development/JavaScript Variable Declarations: Understanding var, let, and const
Var Vs Let Vs Const In Javascript
Web Development

JavaScript Variable Declarations: Understanding var, let, and const

By Developer Hint
January 26, 2026 2 Min Read
0

Introduction

JavaScript gives us three ways to declare variables: var, let, and const.

At first, they may look similar but they behave very differently when it comes to scope, hoisting, and reassignment. Choosing the wrong one can lead to bugs that are hard to track.

Let’s break them down step by step.

What Is var in JavaScript?

var is the old way of declaring variables in JavaScript.

Example

var name = "Ali";
Key Characteristics
  • Function-scoped
  • Hoisted with undefined
  • Can be redeclared
  • Can be reassigned

Scope Differences

var Scope

var is function-scoped, not block-scoped.

if (true) {
var age = 25;
}
console.log(age); // 25

⚠️ This can cause unexpected behavior.

let and const Scope

let and const are block-scoped.

if (true) {
let city = "Mogadishu";
}
console.log(city); // Error

✔ Much safer and predictable.

Hoisting Behavior Explained

Hoistingwith var

console.log(x);
var x = 10;

Output: undefined

var is hoisted and initialized with undefined.

Hoistingwith let and const

console.log(y);
let y = 5;

❌ Error:

ReferenceError: Cannot access 'y' before initialization

This happens because of the Temporal Dead Zone (TDZ).

Redeclaration Rules

var Allows Redeclaration

var score = 10;
var score = 20;

✔ No error (but risky).

let and const Do NOT

let score = 10;
let score = 20; // Error

✔ Prevents accidental overwrites.

Reassignment Differences

var and let

let count = 1;
count = 2; // Allowed

const

const PI = 3.14;
PI = 3.15; // Error

⚠️ const means the variable reference cannot change.

Important Note About const Objects

You can modify object properties declared with const.

const user = { name: "Ali" };
user.name = "Ahmed"; // Allowed

✔ The reference stays the same.

Comparison Table

Featurevarletconst
ScopeFunctionBlockBlock
HoistedYes (undefined)Yes (TDZ)Yes (TDZ)
RedeclarationYesNoNo
ReassignmentYesYesNo
Recommended❌✅✅

When to Use What

  • ✅ Use const by default
  • ✅ Use let when value needs to change
  • ❌ Avoid var in modern JavaScript

Common Beginner Mistakes

  • Using var out of habit
  • Thinking const means “immutable”
  • Accessing let variables too early
  • Mixing scopes accidentally

Best Practices

  • Always start with const
  • Switch to let only when needed
  • Never use var in modern code
  • Keep variable scopes small and clear

Conclusion

Understanding the differences between var, let, and const is essential for writing clean, predictable JavaScript. Modern JavaScript favors let and const because they reduce bugs and improve readability.

At Developer Hint we focus on explaining JavaScript concepts clearly, helping you write better code with confidence.

Share this:

  • Share on Facebook (Opens in new window) Facebook
  • Share on X (Opens in new window) X
  • Share on Telegram (Opens in new window) Telegram
  • Share on WhatsApp (Opens in new window) WhatsApp
  • Email a link to a friend (Opens in new window) Email
  • Print (Opens in new window) Print

Discover more from Developer Hint

Subscribe to get the latest posts sent to your email.

Content Disclosure
This content was created with the assistance of AI tools and thoroughly reviewed, fact-checked, and refined by a human editor to ensure accuracy, clarity, and usefulness for readers.
Advertisements
banner

Tags:

JavaScriptWeb Development
Author

Developer Hint

Follow Me
Other Articles
What Is Javascript Hoisting
Previous

JavaScript Hoisting Explained: Avoid Common Mistakes

Javascript Arrow Functions Explained With Practical Examples
Next

Understanding JavaScript Arrow Functions with Examples

No Comment! Be the first one.

    Leave a ReplyCancel reply

    Random Posts

    • What Is DNS and How Does It Work? — Explained for BeginnersWhat Is DNS and How Does It Work? — Explained for Beginners
    • CSS Selectors: Class and ID ExplainedCSS Selectors: Class and ID Explained
    • what is the difference between website and webpagewhat is the difference between website and webpage
    • Understanding SSL: Why It’s Essential for Your WebsiteUnderstanding SSL: Why It’s Essential for Your Website
    • Beginner Guide to HTML & CSS (With Examples)Beginner Guide to HTML & CSS (With Examples)

    Popular

    Random Posts

    • What Is a Domain Name and How Does It Work? — Complete Beginner’s GuideWhat Is a Domain Name and How Does It Work? — Complete Beginner’s Guide
    • CSS Box Model Explained Simply (With Practical Examples)CSS Box Model Explained Simply (With Practical Examples)
    • Best Free Tools for Web Developers in 2026Best Free Tools for Web Developers in 2026
    • CSS Transform and Transition: Easy Animation GuideCSS Transform and Transition: Easy Animation Guide
    • CSS Specificity Explained Simply (With Practical Examples)CSS Specificity Explained Simply (With Practical Examples)

    Legal pages

    • About Us
    • Privacy Policy
    • Terms and Conditions
    • Disclaimer

    Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Copyright 2026 — Developer Hint. All rights reserved.

    ►
    Necessary cookies enable essential site features like secure log-ins and consent preference adjustments. They do not store personal data.
    None
    ►
    Functional cookies support features like content sharing on social media, collecting feedback, and enabling third-party tools.
    None
    ►
    Analytical cookies track visitor interactions, providing insights on metrics like visitor count, bounce rate, and traffic sources.
    None
    ►
    Advertisement cookies deliver personalized ads based on your previous visits and analyze the effectiveness of ad campaigns.
    None
    ►
    Unclassified cookies are cookies that we are in the process of classifying, together with the providers of individual cookies.
    None