JS Variables
In this page:
var, let, and const at a Glance
var is the original way to declare a variable, function-scoped and somewhat loose in its rules, while let and const, introduced later, are block-scoped and offer more predictable behavior for modern code.
Note: As a starting rule, default to const, switch to let only when you know a value needs to change, and avoid var in new code.
Warning: var variables can be redeclared and are function-scoped, which can lead to bugs that let and const are specifically designed to prevent.
Example: var, let, and const at a Glance
var oldStyle = "function-scoped";
let modern = "block-scoped";
const fixed = "block-scoped, cannot reassign";
console.log(oldStyle, modern, fixed);Declaration and Initialization
Declaration is the act of creating a variable's name, while initialization is giving it a first value, and JavaScript lets you do both together or declare a variable first and assign it a value later.
Note: const requires declaration and initialization to happen together, you cannot declare a const without immediately giving it a value.
Warning: A let variable that is declared but never initialized holds the special value undefined until you assign something to it.
Example: Declaration and Initialization
let city; // declaration
city = "Paris"; // initialization
console.log(city);Naming Rules
Variable names must start with a letter, underscore, or dollar sign, can contain numbers after the first character, cannot use reserved keywords, and are case sensitive.
Note: Choose descriptive, specific names, like tutorialCount rather than n, it pays off enormously as a codebase grows.
Warning: Starting a variable name with a number, like 1stPlace, is invalid and causes an immediate syntax error.
Example: Naming Rules
let _underscoreStart = 1;
let $dollarStart = 2;
let tutorialCount = 3;
console.log(_underscoreStart, $dollarStart, tutorialCount);Hoisting
Hoisting is JavaScript's behavior of processing variable declarations before running the code line by line, but var and let/const behave very differently, var is hoisted and initialized as undefined, while let and const are hoisted but remain inaccessible until their declaration line runs.
Note: Even though var technically works before its declaration line, always declare variables at the top of the scope you use them in for clarity.
Warning: Accessing a let or const variable before its declaration throws a ReferenceError, a safety feature var does not have.
Example: Hoisting
console.log(hoistedVar); // undefined, not an error
var hoistedVar = 5;Choosing Between var, let, and const
In modern JavaScript, const is the default choice for any value that won't be reassigned, let is used when a value genuinely needs to change over time, and var is generally avoided in new code due to its looser, less predictable scoping rules.
Note: If your code runs fine after switching a let to const, that's a strong signal const was the better original choice.
Warning: Choosing let everywhere out of uncertainty, even for values that never change, makes it harder for readers to spot which values actually do change.
Example: Choosing Between var, let, and const
const pi = 3.14159; // never reassigned
let counter = 0; // will change
counter = counter + 1;
console.log(pi, counter);- Using var out of habit in new code, when let and const offer safer, more predictable scoping in modern JavaScript.
- Trying to use a variable before it has been declared, which behaves differently depending on whether var, let, or const was used.
- Choosing vague variable names like data or temp, which make code much harder to understand months later.
- A variable is a named container for a value, created with var, let, or const.
- Declaration creates the variable, and initialization gives it its first value, they can happen together or separately.
- Variable names must follow specific rules and, due to hoisting, var and let/const behave differently before their declaration line.
var, let, and const are all supported in every modern browser, though let and const require a reasonably modern engine, standard since 2015 and universal today.
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: