JavaScript has three ways to declare variables, each with different scoping rules and use cases.
When to Use Each
const: Default choice for most variables
let: When you need to reassign values (counters, flags, accumulators)
var: Rarely needed in modern code; mainly for legacy support or specific patterns
The introduction of let and const in ES6 significantly improved JavaScript's variable scoping and made code more predictable and maintainable.
1. var (Function-Scoped)
var is the original way to declare variables in JavaScript. It has function scope and is hoisted to the top of its scope.
Characteristics:
1. Function-scoped (not block-scoped)
2. Hoisted to the top of its scope
3. Can be redeclared and updated
4. Creates a property on the global object (when declared globally)
// Function-scoped example
function doSomething() {
if (true) {
var x = 10; // Available throughout the function
}
console.log(x); // 10 - accessible outside the block
}
// Hoisting example
console.log(y); // undefined (hoisted but not initialized)
var y = 5;
// Redeclaration
var z = 1;
var z = 2; // No error
console.log(z); // 2
2. let (Block-Scoped)
let was introduced in ES6 and provides block-level scoping, which is generally more predictable.
Characteristics:
1. Block-scoped ({ } boundaries)
2. Not hoisted in the same way as var (temporal dead zone)
3. Can be updated but not redeclared in the same scope
4. Doesn't create properties on the global object
Example Use Cases:
// Block-scoped example
function exampleLet() {
if (true) {
let x = 10; // Only available in this block
console.log(x); // 10
}
// console.log(x); // ReferenceError: x is not defined
}
// Loop variables (ideal use case)
for (let i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i); // Logs 0, 1, 2, 3, 4 (not 5,5,5,5,5 like with var)
}, 100);
console.log(i);
}
// Can be updated but not redeclared
let count = 0;
count = 1; // Allowed
// let count = 2; // SyntaxError: Identifier 'count' has already been declared
3. const (Block-Scoped Constants)
const is also ES6 feature for declaring constants - variables that cannot be reassigned.
Characteristics:
1. Block-scoped like let
2. Must be initialized during declaration
3. Cannot be reassigned after declaration
4. For objects/arrays, the reference is constant but properties/elements can be modified
Example Use Cases:
// Constants that shouldn't change
const PI = 3.14159;
const API_URL = "https://api.example.com";
// Object with const - properties can be modified
const person = {
name: "John",
age: 30
};
person.age = 31; // Allowed - modifying property
// person = {name: "Jane"}; // Error - cannot reassign
// Array with const - elements can be modified
const colors = ["red", "green"];
colors.push("blue"); // Allowed
// colors = ["purple"]; // Error - cannot reassign
// Configuration objects
const CONFIG = {
timeout: 5000,
retries: 3,
baseURL: "https://api.example.com"
};
What Happens When You Don't Declare Variable Types in JavaScript
When you don't use var, let, or const to declare a variable, JavaScript automatically creates a global variable (in non-strict mode). This is generally considered bad practice and can lead to bugs.
Problem Scenario:
// In file1.js
function initApp() {
config = { theme: "dark" }; // Accidentally global
}
// In file2.js (loaded later)
function updateConfig() {
config = { theme: "light" }; // Modifies the same global variable!
}
Solution:
// Always declare variables properly
function initApp() {
const config = { theme: "dark" }; // Properly scoped
return config;
}
function updateConfig(currentConfig) {
return { ...currentConfig, theme: "light" }; // No side effects
}
Best Practices
1. Always declare variables with const, let, or var
2. Use 'use strict' to catch undeclared variables
3. Lint your code - tools like ESLint will flag this error
4. Prefer const/let over var for better scoping
// Good
const calculateTotal = (items) => {
let total = 0;
for (let item of items) {
total += item.price;
}
return total;
};
// Bad (creates global variable)
const calculateTotalBad = (items) => {
total = 0; // Missing declaration!
for (item of items) { // Also missing declaration!
total += item.price;
}
return total;
};