JS Variables Guide: How to Declare and Use Them

// Using let: can be reassigned, block-scoped
let currentScore = 0;
currentScore = 10; // Allowed: let variables can be reassigned
 
// Using const: cannot be reassigned, block-scoped
const MAX_RETRIES = 3;
// MAX_RETRIES = 5; // Error: Assignment to constant variable
 
// Using var: can be reassigned, function-scoped (legacy)
var playerName = "Alice";
playerName = "Bob"; // Allowed: var variables can be reassigned

// Declaration only (no value assigned yet)
let temperature;
console.log(temperature); // undefined (declared but not initialized)
 
// Initialization (assigning the first value)
temperature = 22.5;
console.log(temperature); // 22.5
 
// Declaration + initialization in one step (recommended)
let humidity = 65;
console.log(humidity); // 65
 
// const MUST be initialized at declaration
const API_URL = "https://api.example.com";
// const API_KEY; // SyntaxError: Missing initializer in const declaration

// Multiple declarations (technically valid but harder to read)
let x = 1, y = 2, z = 3;
 
// Preferred: one declaration per line for clarity
let width = 800;
let height = 600;
let depth = 100;

// String: text data
const firstName = "Sarah";
const greeting = `Hello, ${firstName}!`; // Template literal
 
// Number: integers and decimals (no separate int/float types)
const age = 28;
const price = 49.99;
const negative = -15;
 
// Boolean: true or false
const isActive = true;
const hasPermission = false;
 
// Undefined: variable declared but not assigned
let middleName;
console.log(middleName); // undefined
 
// Null: intentionally empty value
const selectedItem = null;
 
// BigInt: very large integers (append n)
const largeNumber = 9007199254740991n;
 
// Symbol: unique identifier (advanced use)
const id = Symbol("user-id");

// Object: collection of key-value pairs
const user = {
  name: "Sarah",
  age: 28,
  role: "developer"
};
 
// Array: ordered list of values
const scores = [95, 87, 92, 78, 88];
 
// Function: reusable block of code
const calculateAverage = (numbers) => {
  const sum = numbers.reduce((total, n) => total + n, 0);
  return sum / numbers.length;
};
 
console.log(calculateAverage(scores)); // 88

const config = { theme: "dark", fontSize: 16 };
 
// This is allowed: modifying a property
config.theme = "light";
config.language = "en";
console.log(config); // { theme: "light", fontSize: 16, language: "en" }
 
// This is NOT allowed: reassigning the variable
// config = { theme: "blue" }; // TypeError: Assignment to constant variable

const temperature = 35;
 
if (temperature > 30) {
  const message = "It's hot outside!";
  let warningLevel = "high";
  console.log(message);      // "It's hot outside!"
  console.log(warningLevel); // "high"
}
 
// console.log(message);      // ReferenceError: message is not defined
// console.log(warningLevel); // ReferenceError: warningLevel is not defined
// Both variables are inaccessible outside the if block

function processOrder(items) {
  if (items.length > 0) {
    var discount = 0.1; // var ignores block scope
  }
  // discount is accessible here because var is function-scoped
  console.log(discount); // 0.1
}
 
processOrder(["laptop", "mouse"]);

// Global variables (accessible everywhere)
const APP_NAME = "RuneHub";
let visitorCount = 0;
 
function incrementVisitor() {
  visitorCount += 1; // Can access global variable
  console.log(`${APP_NAME} visitor #${visitorCount}`);
}
 
incrementVisitor(); // "RuneHub visitor #1"
incrementVisitor(); // "RuneHub visitor #2"

// REASSIGNMENT: changing the variable's value entirely
let count = 5;
count = 10; // Reassignment: count now holds 10
 
// const prevents reassignment
const limit = 100;
// limit = 200; // TypeError: Assignment to constant variable
 
// MUTATION: changing the internals of a reference type
const cart = ["apple", "banana"];
cart.push("cherry"); // Mutation: modifying the array's contents
console.log(cart);   // ["apple", "banana", "cherry"]
// This works because we did not reassign cart,
// we changed the contents of the array it references
 
// Reassignment vs mutation with objects
const settings = { volume: 50 };
settings.volume = 80;        // Mutation: OK with const
// settings = { volume: 80 }; // Reassignment: Error with const

// Building up a result step by step
const items = [
  { name: "Notebook", price: 12.99 },
  { name: "Pen Set", price: 8.49 },
  { name: "Backpack", price: 45.00 },
  { name: "Calculator", price: 24.99 }
];
 
let totalCost = 0; // Accumulator: will be reassigned, so use let
 
for (const item of items) {
  totalCost += item.price;
}
 
const TAX_RATE = 0.08; // Constant: will not change
const tax = totalCost * TAX_RATE;
const finalTotal = totalCost + tax;
 
console.log(`Subtotal: $${totalCost.toFixed(2)}`);  // $91.47
console.log(`Tax: $${tax.toFixed(2)}`);              // $7.32
console.log(`Total: $${finalTotal.toFixed(2)}`);     // $98.79

// Use const for configuration objects: the reference stays constant
const appConfig = {
  apiBaseUrl: "https://api.example.com",
  maxRetries: 3,
  timeoutMs: 5000,
  features: {
    darkMode: true,
    notifications: true,
    analytics: false
  }
};
 
// Access and use configuration values
function fetchData(endpoint) {
  const url = `${appConfig.apiBaseUrl}${endpoint}`;
  const timeout = appConfig.timeoutMs;
  console.log(`Fetching ${url} with ${timeout}ms timeout`);
}
 
fetchData("/users"); // "Fetching https://api.example.com/users with 5000ms timeout"

// Assign different values based on conditions
const hour = new Date().getHours();
 
let period;
if (hour < 12) {
  period = "morning";
} else if (hour < 17) {
  period = "afternoon";
} else {
  period = "evening";
}
 
// Shorter version with ternary operator
const isMorning = hour < 12 ? "Yes" : "No";
 
// Default values with nullish coalescing
const userTheme = null;
const activeTheme = userTheme ?? "system"; // "system" (because userTheme is null)
 
console.log(`Good ${period}! Theme: ${activeTheme}`);

const name = "Alice";
 
function greet() {
  const name = "Bob"; // Shadows the outer 'name'
  console.log(name);  // "Bob" (not "Alice")
}
 
greet();
console.log(name); // "Alice" (outer variable unaffected)