← Back to JavaScript Course | Chapter 1: Basics & Syntax | Lesson 7 of 12

JS Variables

Think of a labeled storage box in a warehouse, you write a name on the box, put something inside it, and from then on anyone who knows the label can find and use whatever's stored there. A variable in JavaScript works the same way, it's a named container that holds a value, a number, a piece of text, or something more complex, so your code can refer back to that value by name instead of retyping it everywhere. JavaScript gives you three ways to create these containers, var, let, and const, and knowing when to use each is one of the first real decisions you make writing any script, from a tiny demo to a full application like the ones behind cookiescursor.com.

In this page:

  1. var, let, and const at a Glance
  2. Declaration and Initialization
  3. Naming Rules
  4. Hoisting
  5. Choosing Between var, let, and const
Syntax
javascript 
var variableName = value;
let variableName = value;
const variableName = value;

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

javascript 
// Declare the variable `oldStyle`, set to "function-scoped"
// Declare the variable `oldStyle`, set to "function-scoped"
var oldStyle = "function-scoped";
// Declare the variable `modern`, set to "block-scoped"
// Declare the variable `modern`, set to "block-scoped"
let modern = "block-scoped";
// Declare the constant `fixed`, set to "block-scoped, cannot reassign"
// Declare the constant `fixed`, set to "block-scoped, cannot reassign"
const fixed = "block-scoped, cannot reassign";
// Print `oldStyle, modern, fixed` to the console
// Print `oldStyle, modern, fixed` to the console
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

javascript 
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

javascript 
// Declare the variable `_underscoreStart`, set to `1`
// Declare the variable `_underscoreStart`, set to `1`
let _underscoreStart = 1;
let $dollarStart = 2;
// Declare the variable `tutorialCount`, set to `3`
// Declare the variable `tutorialCount`, set to `3`
let tutorialCount = 3;
// Print `_underscoreStart, $dollarStart, tutorialCount` to the console
// Print `_underscoreStart, $dollarStart, tutorialCount` to the console
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

javascript 
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

javascript 
const pi = 3.14159; // never reassigned
let counter = 0;     // will change
counter = counter + 1;
console.log(pi, counter);
Live Example
Related Topics

JS Comments · JS Let · JS Syntax · JS Const

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using var out of habit in new code, when let and const offer safer, more predictable scoping in modern JavaScript.
  2. Trying to use a variable before it has been declared, which behaves differently depending on whether var, let, or const was used.
  3. Choosing vague variable names like data or temp, which make code much harder to understand months later.
Chapter Summary
  • 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.
Browser Support

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:

← Previous Lesson JS Comments Next Lesson → JS Let

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.