JavaScript Variables: const, let, var and Scope

JavaScript variables give names to values used by a program. Modern JavaScript uses const when a binding should not be reassigned and let when its value needs to change. var remains part of JavaScript and appears in older code, but its function-scoped behavior makes it less predictable for new code.

Basic declarations:

const siteName = "plus2net";
let visitors = 10;
visitors += 1;
console.log(siteName, visitors);

Variables are case-sensitive, must use valid identifiers, and have scope rules that determine where they can be accessed.

Declaring Variables with const, let and var Top ↑

const course = "JavaScript";
let score = 75;
var legacyValue = "older style";

const and let are block-scoped. var is function-scoped (or global/module scoped depending on context) and can be redeclared in ways that often surprise beginners.

JavaScript Variable Naming Rules Top ↑

• Names are case-sensitive: total and Total are different identifiers.
• A normal identifier can start with a letter, underscore (_), or dollar sign ($).
• Later characters can include digits.
• Spaces and punctuation such as hyphens cannot be used in ordinary identifier names.
• Reserved words such as for and class cannot be used as variable names.
• Use descriptive camelCase names for most local variables.

const user2 = "Sam";
const _count = 5;
const $element = document.querySelector("#result");

// Invalid:
// const 2user = "Sam";
// const for = 5;
// const user-name = "Sam";

The original page stated that an ampersand (&) could be used in a variable name. That is incorrect for a normal JavaScript identifier, so this modernization corrects it.

Declaration, Initialization and Reassignment Top ↑

Declaration creates the binding. Initialization supplies its first value. Assignment changes a value later.

let city;           // declared, value is undefined
city = "Hyderabad"; // assignment
city = "Pune";      // reassignment

const country = "India"; // declaration + initialization

A const declaration must be initialized immediately and cannot later be reassigned.

Variables and Dynamic Types Top ↑

JavaScript is dynamically typed. A variable declared with let can later reference a value of another type, although changing types without a good reason can make code harder to understand.

let value = 25;
console.log(typeof value); // number

value = "25";
console.log(typeof value); // string

See the dedicated typeof tutorial, parseInt(), and parseFloat().

Uninitialized let and undefined Top ↑

A declared let variable without an initializer has the value undefined after its declaration is executed.

let result;
console.log(result);        // undefined
console.log(typeof result); // "undefined"

Do not confuse this with accessing a let binding before its declaration; that is a temporal dead zone error, discussed below.

Global, Function and Block Scope Top ↑

Scope controls where a binding can be accessed. Variables declared outside a function or block may belong to a wider scope. Function parameters and declarations inside a function are local to that function. let and const also respect block scope.

const greeting = "Hello";

function showGreeting() {
  const name = "Asha";
  console.log(greeting, name);
}

showGreeting();
// console.log(name); // ReferenceError

if (true) {
  let blockValue = 10;
  const message = "inside";
  console.log(blockValue, message);
}

// console.log(blockValue); // ReferenceError

This modernizes the original page's local/global-variable lesson without losing the distinction it was teaching.

Variable Shadowing Top ↑

An inner scope can declare a variable with the same name as an outer scope. The inner declaration temporarily hides, or shadows, the outer one.

const message = "outside";

function showMessage() {
  const message = "inside";
  console.log(message);
}

showMessage();          // inside
console.log(message);   // outside

Shadowing is valid but can become confusing when overused.

Hoisting and the Temporal Dead Zone Top ↑

var declarations are hoisted and initialized with undefined. let and const bindings are also created for their scope before the declaration line, but they cannot be accessed until execution reaches the declaration. That inaccessible period is called the temporal dead zone.

console.log(oldValue); // undefined
var oldValue = 5;

// console.log(newValue); // ReferenceError
let newValue = 5;

Do not use hoisting as a coding technique. Declare variables close to where they are first needed.

const with Objects and Arrays Top ↑

const prevents reassignment of the binding; it does not freeze the object or array stored in it.

const student = { name: "Ravi" };
student.name = "Riya"; // allowed

const scores = [70, 80];
scores.push(90);        // allowed

// student = {};        // TypeError: reassignment is not allowed

If immutability is required, that is a separate design decision; const alone does not recursively make an object immutable.

Declaring Variables with Destructuring Top ↑

Array and object destructuring can declare several bindings from an existing value.

const user = { name: "Maya", age: 24 };
const { name, age } = user;

const colors = ["red", "green"];
const [firstColor, secondColor] = colors;

console.log(name, age, firstColor, secondColor);

Global Variables and the window Object Top ↑

In a classic browser script, some top-level var declarations become properties of window, while top-level let and const do not. Module code has its own module scope. Avoid relying on writable globals because they create name collisions and hidden dependencies.

var legacyGlobal = "visible on window in a classic script";
let modernGlobal = "not a window property";

console.log(window.legacyGlobal);
console.log(window.modernGlobal); // undefined

Variables Across Parent and Child Windows Top ↑

The original tutorial demonstrated reading a parent-window global through window.opener. That mechanism still exists in some same-origin situations, but modern security features such as noopener can deliberately remove the opener relationship. Do not design new applications around sharing writable globals between windows.

When two browsing contexts intentionally need to communicate, prefer explicit messaging such as window.postMessage() with strict origin checks. The older parent/child-window example is retained here as context rather than recommended architecture.

Common Variable Mistakes Top ↑

• Creating accidental globals by assigning to an undeclared identifier.
• Using var without understanding that blocks do not scope it.
• Reassigning a const binding.
• Assuming const makes arrays or objects immutable.
• Using a let or const binding before its declaration.
• Reusing the same short name across many scopes until the code becomes difficult to follow.

Related Tutorials Top ↑

Continue with typeof, functions and scope, JavaScript page structure, parseInt(), and parseFloat().

← Adding JavaScript typeof →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: