Variables

var let const

var (Legacy)

var name = 'John';
var name = 'Jane'; // Allowed (re-declaration)
name = 'Bob';      // Allowed (re-assignment)

Characteristics:

• Function-scoped (not block-scoped)
• Hoisted to top of function
• Can be re-declared and reassigned
• Global when declared outside functions

let (Modern)

let age = 25;
// let age = 30;  // Error: re-declaration
age = 26;         // Allowed (re-assignment)

Characteristics:

• Block-scoped
• Not hoisted (Temporal Dead Zone)
• Cannot be re-declared
• Can be reassigned

const (Modern)

const PI = 3.14159;
// PI = 3.14;  // Error: re-assignment
// const PI;   // Error: missing initializer

Characteristics:

• Block-scoped
• Not hoisted (Temporal Dead Zone)
• Cannot be re-declared or reassigned
• Must be initialized

When to Use Each

// Use const by default
const API_URL = 'https://api.example.com';

// Use let when value changes
let counter = 0;
counter++;

// Avoid var in modern code
// var is only needed for very old browser support

Common Mistakes

// Wrong: using var in loops
for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Output: 5, 5, 5, 5, 5

// Correct: using let in loops
for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Output: 0, 1, 2, 3, 4

Variable Naming

Rules

// Must start with letter, _, or $
let name = 'John';    // Valid
let _private = true;  // Valid
let $element = null;  // Valid
let 1name = 'Error';  // Invalid

// Can contain letters, digits, _, $
let firstName = 'John';  // Valid
let user_name = 'Jane';  // Valid
let user-name = 'Error'; // Invalid (hyphen)

// Case sensitive
let Name = 'John';
let name = 'Jane';  // Different variable

Conventions

// camelCase (most common)
let firstName = 'John';
let getUserData = function() { };

// PascalCase (classes, components)
class UserComponent { }

// UPPER_SNAKE_CASE (constants)
const MAX_RETRIES = 3;
const API_BASE_URL = 'https://api.example.com';

// _prefix (private convention)
let _internalState = {};

Reserved Words

// Cannot use as variable names
let if = 'Error';       // Error
let class = 'Error';    // Error
let return = 'Error';   // Error
let const = 'Error';    // Error

// These are reserved for future use
let implements = 'Error';
let interface = 'Error';
let package = 'Error';
let private = 'Error';
let protected = 'Error';
let public = 'Error';
let static = 'Error';

Meaningful Names

// Bad
let x = 10;
let data = {};
let temp = null;

// Good
let itemCount = 10;
let user = {};
let currentUser = null;

Scope Introduction

Scope determines where variables are accessible.

Global Scope

let globalVar = 'I am global';

function example() {
  console.log(globalVar); // Accessible
}

Function Scope

function example() {
  var localVar = 'I am local';
  console.log(localVar); // Accessible
}

console.log(localVar); // Error: localVar is not defined

Block Scope

if (true) {
  let blockLet = 'I am block scoped';
  var blockVar = 'I am function scoped';
}

console.log(blockVar);  // Works (var is function scoped)
console.log(blockLet);  // Error: blockLet is not defined

Scope Chain

let outer = 'outer';

function outerFunc() {
  let middle = 'middle';
  
  function innerFunc() {
    let inner = 'inner';
    console.log(outer);  // Accessible
    console.log(middle); // Accessible
    console.log(inner);  // Accessible
  }
  
  innerFunc();
}

Temporal Dead Zone

// TDZ for let and const
console.log(myVar);  // undefined (hoisted)
var myVar = 5;

console.log(myLet);  // Error: Cannot access before initialization
let myLet = 10;