JavaScript Variables Guide

Variables store data in JavaScript. They are like labeled boxes. You put a value inside and use the label later. This article covers everything you need to know.

We will explore declaration, assignment, scope, and hoisting. Beginners will find clear examples. Code snippets show real usage.

What Are Variables?

A variable holds a value. It can be a number, text, object, or function. You declare a variable before using it. JavaScript gives three keywords: var, let, and const.

Each keyword behaves differently. Choose the right one for your task. Let's see them in action.

Declaring with var

var is the old way. It has function scope. This means it works inside the function where declared. If declared outside, it becomes global.

var can be redeclared and updated. This can cause bugs. Many developers avoid it now.

// Declare a var variable
var name = "Alice";
console.log(name); // Output: Alice

// Redeclare var (allowed)
var name = "Bob";
console.log(name); // Output: Bob

// Update var
name = "Charlie";
console.log(name); // Output: Charlie

Scope example with var: Inside a function, var stays local. Outside, it becomes global.

function testVar() {
  var x = 10;
  if (true) {
    var x = 20; // Same variable, not block-scoped
    console.log(x); // Output: 20
  }
  console.log(x); // Output: 20 (leaked out)
}
testVar();

Declaring with let

let is modern. It has block scope. This means it works only inside the curly braces {} where declared. Use let for values that change.

let cannot be redeclared in the same scope. But it can be updated.

// Declare a let variable
let age = 25;
console.log(age); // Output: 25

// Update let (allowed)
age = 26;
console.log(age); // Output: 26

// Redeclare let in same scope (error)
// let age = 30; // SyntaxError: Identifier 'age' has already been declared

Block scope with let: The variable stays inside the block.

function testLet() {
  let y = 5;
  if (true) {
    let y = 15; // Different variable, block-scoped
    console.log(y); // Output: 15
  }
  console.log(y); // Output: 5 (safe)
}
testLet();

Declaring with const

const stands for constant. It also has block scope. You cannot update or redeclare a const variable after assignment. It must have a value when declared.

Use const for values that never change. For objects and arrays, the reference is constant, but the content can change.

// Declare a const variable
const PI = 3.14159;
console.log(PI); // Output: 3.14159

// Update const (error)
// PI = 3.14; // TypeError: Assignment to constant variable

// Redeclare const (error)
// const PI = 3; // SyntaxError: Identifier 'PI' has already been declared

Const with objects: The object itself can be modified.

const person = { name: "John" };
person.name = "Jane"; // Allowed
console.log(person.name); // Output: Jane

// Reassign const (error)
// person = { name: "Mike" }; // TypeError: Assignment to constant variable

Variable Scope

Scope determines where a variable is accessible. Three types exist: global, function, and block.

Global scope: Variables declared outside any function or block. Accessible everywhere.

Function scope: Variables declared inside a function. Only accessible inside that function.

Block scope: Variables declared with let or const inside {}. Only accessible inside that block.

// Global variable
let globalVar = "I am global";

function myFunction() {
  // Function-scoped variable
  var functionVar = "I am local to function";
  console.log(globalVar); // Accessible
  console.log(functionVar); // Accessible
}

myFunction();
console.log(globalVar); // Accessible
// console.log(functionVar); // ReferenceError: functionVar is not defined

Hoisting

Hoisting is JavaScript's default behavior. It moves declarations to the top of their scope before code execution. Only the declaration, not the assignment, is hoisted.

var declarations are hoisted and initialized with undefined. let and const are hoisted but not initialized. They are in a "temporal dead zone" until the declaration line.

// var hoisting example
console.log(myVar); // Output: undefined (hoisted)
var myVar = 10;
console.log(myVar); // Output: 10

// let hoisting example (temporal dead zone)
// console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = 20;
console.log(myLet); // Output: 20

// const hoisting example
// console.log(myConst); // ReferenceError: Cannot access 'myConst' before initialization
const myConst = 30;
console.log(myConst); // Output: 30

Naming Conventions

Variable names must follow rules. They can contain letters, digits, underscores, and dollar signs. They cannot start with a digit. Use camelCase for readability.

Good names:userName, totalPrice, isActive. Avoid:x, data1, temp.

Use meaningful names. This makes code self-documenting. For example, let userAge = 30; is clear.

Best Practices

Always use const by default. Only use let when you need to reassign. Avoid var in modern code.

Declare variables at the top of their scope. This improves readability and avoids hoisting surprises.

Initialize variables when declared. This prevents undefined errors.

Use strict mode ("use strict") to catch common mistakes. It makes debugging easier.

"use strict";

// Best practice example
const MAX_COUNT = 100;
let currentCount = 0;

function increment() {
  currentCount++;
  if (currentCount > MAX_COUNT) {
    console.log("Limit reached");
  }
}

increment();
console.log(currentCount); // Output: 1

Common Mistakes

Forgetting to declare a variable creates a global variable. This can cause conflicts.

Using var in loops can lead to unexpected behavior. let fixes this by creating a new binding each iteration.

// var in loop (common mistake)
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // Output: 3, 3, 3 (all same)
  }, 100);
}

// let in loop (correct)
for (let j = 0; j < 3; j++) {
  setTimeout(function() {
    console.log(j); // Output: 0, 1, 2 (each iteration)
  }, 100);
}

Conclusion

JavaScript variables are fundamental. Use const for constants, let for changing values, and avoid var. Understand scope and hoisting to write bug-free code. Practice with examples to build strong skills.

Now you know how to declare, assign, and manage variables. Apply these concepts in your projects. Happy coding!