JavaScript Variables

Variables are the fundamental building blocks of any programming language. They store data that can be used and manipulated throughout your program.

📝 Variable Declaration: var, let, const

JavaScript provides three ways to declare variables, each with different scoping and reassignment rules.

Keyword	Scope	Reassignable	Redeclarable	Use Case
`var`	Function	✅ Yes	✅ Yes	Legacy code (avoid in modern JS)
`let`	Block	✅ Yes	❌ No	Variables that change
`const`	Block	❌ No	❌ No	Constants that don't change

⚠️ Modern Best Practice

Use const by default, and only use let when you need to reassign a variable. Avoid var in modern JavaScript code.

💡 Memory Aid:

const - For constant values
let - When you need to let the value change
var - Variable (older way, avoid)

Try It Yourself:

JavaScript Editor

🎯 Variable Scope

Understanding Scope

Scope determines where variables are accessible in your code. JavaScript has:

Global Scope - Accessible everywhere
Function Scope - Accessible only within a function (var)
Block Scope - Accessible only within a block {} (let, const)

🔍 Scope Examples:

// Global scope
                let global = "I'm everywhere";

                function test() {
                // Function scope (var)
                var functionScoped = "I'm in function";
                
                if (true) {
                    // Block scope (let, const)
                    let blockScoped = "I'm in block";
                }
                }

JavaScript Editor

⬆️ Variable Hoisting

Hoisting is JavaScript's behavior of moving declarations to the top of their scope before code execution.

✅ var hoisting:

var declarations are hoisted and initialized with undefined

console.log(x); // undefined
var x = 5;

❌ let/const hoisting:

let and const are hoisted but not initialized (Temporal Dead Zone)

console.log(x); // Error
let x = 5;

📚 Temporal Dead Zone (TDZ)

The time between entering scope and being declared where variables cannot be accessed. This helps catch errors and write more predictable code.

🎯 Best Practice:

Declare variables at the top of their scope to avoid hoisting confusion and TDZ errors.

JavaScript Editor

🏷️ Naming Conventions

JavaScript Naming Rules

Names can contain letters, digits, underscores, and dollar signs
Names must begin with a letter, $, or _
Names are case sensitive (myVar ≠ myvar)
Reserved words cannot be used as names

Naming Styles

camelCase - variables and functions
PascalCase - classes and constructors
UPPER_CASE - constants
kebab-case - HTML attributes and CSS classes

JavaScript Editor

// JavaScript Naming Conventions

// ✅ Good variable names
let userName = "john_doe";
let itemCount = 42;
let isLoggedIn = true;
const MAX_USERS = 100;
let apiKey = "abc123";
let firstName = "John";
let totalPrice = 99.99;

// ❌ Bad variable names (avoid these)
let a = "test";           // Too vague
let n = 42;               // Not descriptive
let flag = true;          // What does this flag represent?
let my_variable = "old";  // Snake case (not conventional in JS)

// Camel Case (standard for variables and functions)
let camelCaseVariable = "standard in JavaScript";
let calculateTotalPrice = () => {};

// Pascal Case (standard for classes and constructors)
class UserProfile {
  constructor(name) {
    this.name = name;
  }
}

// UPPER_CASE (standard for constants)
const API_BASE_URL = "https://api.example.com";
const DEFAULT_TIMEOUT = 5000;

console.log("Good naming makes code readable!");
console.log("userName:", userName);
console.log("itemCount:", itemCount);
console.log("MAX_USERS:", MAX_USERS);

🎯 Pro Tips:

Use descriptive names (userAge vs a)
Be consistent with your naming style
Use verbs for functions (calculateTotal)

Use booleans that sound like yes/no questions (isActive)
Avoid single letter names except in loops
Make names pronounceable and meaningful

🎮 Practice: User Profile System

Apply what you've learned! This example uses different variable types to create a user profile system. Try modifying the values and see what happens.

JavaScript Editor

// Practice: User Profile System
// Try modifying the values and see what happens!

// User Information
const USER_ID = "USR_001";
let userName = "Alice Johnson";
let userAge = 28;
let isPremiumMember = true;
let loginCount = 15;

// User Preferences
let theme = "dark";
let language = "English";
let notificationsEnabled = true;

// Calculate some derived values
let yearsUntil30 = 30 - userAge;
let memberStatus = isPremiumMember ? "Premium" : "Standard";
let nextLoginNumber = loginCount + 1;

// Display user profile
console.log("=== USER PROFILE ===");
console.log("User ID:", USER_ID);
console.log("Name:", userName);
console.log("Age:", userAge, "(Years until 30:", yearsUntil30 + ")");
console.log("Member Status:", memberStatus);
console.log("Login Count:", loginCount, "(Next login:", nextLoginNumber + ")");
console.log("Theme:", theme);
console.log("Language:", language);
console.log("Notifications:", notificationsEnabled ? "ON" : "OFF");

// Try to update some values (some will work, some will cause errors)
userAge = 29; // This works - let variables can be reassigned
loginCount = 16; // This also works

// USER_ID = "USR_002"; // This would cause an error - const cannot be reassigned

console.log("\n=== UPDATED PROFILE ===");
console.log("Updated Age:", userAge);
console.log("Updated Login Count:", loginCount);

// Challenge: Add more user properties and display them!

💪 Challenges:

Add a lastLogin date variable
Create a userLevel based on login count
Add more user preferences

Try to reassign the USER_ID constant
Create a function to update user profile
Add validation for user age

📚 Summary

Key Takeaways:

Use const for values that don't change
Use let for variables that need reassignment
Avoid var in modern JavaScript
Understand scope and hoisting behavior

Best Practices:

Use descriptive, camelCase names
Declare variables at the top of their scope
Initialize variables when declaring them
Use constants for magic numbers and configuration

Ready to learn about the different types of data these variables can hold?

Next: Data Types →

📋 Variables Quick Reference

Declaration:

let variableName = value;const CONSTANT_NAME = value;var oldVariable = value;

Reassignment:

variableName = newValue; CONSTANT_NAME = value; Error!

Multiple Variables:

let a = 1, b = 2, c = 3;

← Introduction Data Types →

JavaScript Tutorial

JavaScript Variables

📝 Variable Declaration: var, let, const

⚠️ Modern Best Practice

💡 Memory Aid:

Try It Yourself:

🎯 Variable Scope

Understanding Scope

🔍 Scope Examples:

⬆️ Variable Hoisting

✅ var hoisting:

❌ let/const hoisting:

📚 Temporal Dead Zone (TDZ)

🎯 Best Practice:

🏷️ Naming Conventions

JavaScript Naming Rules

Naming Styles

🎯 Pro Tips:

🎮 Practice: User Profile System

💪 Challenges:

📚 Summary

Key Takeaways:

Best Practices:

📋 Variables Quick Reference

Declaration:

Reassignment:

Multiple Variables:

Follow Us

Our Tools

Our Company

Special Tools