DEV Community: Abhishek Bankar

Variables in JavaScript: var, let and const

Abhishek Bankar — Fri, 18 Sep 2026 17:09:16 +0000

When we write a program, we work with different types of data and information.

For example, an application may need to store a user's name, age, product price, login status, or some other information.

But how do we store this information so that we can use it again in different parts of our program?

This is where variables come into the picture.

What Is a Variable?

A variable is a name that allows us to work with a value or piece of data in our program.

For example:

let userName = "John Doe";

console.log(userName);
console.log(userName);
console.log(userName);

Instead of writing "John Doe" every time we need the value, we can store it in a variable called userName and use that variable whenever we need it.

This makes our code more readable and allows us to reuse values throughout our program.

So, at a basic level:

A variable gives a name to a value so that we can use that value in our program.

Declaring a Variable

Declaring a variable means telling JavaScript that we want to create a variable with a particular name.

JavaScript provides three keywords for declaring variables:

var
let
const

For example:

let userName;

Here, we have declared a variable called userName, but we haven't assigned a value to it yet.

We can also declare and initialize a variable at the same time:

let userName = "John Doe";

Here, userName is declared and initialized with the value "John Doe".

So there is a small difference between declaration and initialization:

let userName;                 // Declaration

let userName = "John Doe";    // Declaration + Initialization

Assigning a Value to a Variable

Assignment means giving a value to a variable.

For example:

let userName;

userName = "John Doe";

The variable is declared first, and the value is assigned later.

Variables declared with let and var can also be reassigned:

let userName = "John Doe";

userName = "Jane Doe";

After the second line, userName contains "Jane Doe" instead of "John Doe".

This is called reassignment.

`var` in JavaScript

var is one of the keywords JavaScript provides for declaring variables.

A variable declared using var can be initialized when it is declared:

var age = 30;

It can also be reassigned later:

var age = 30;

age = 31;

After the second line, age contains 31.

One important characteristic of var is that it allows redeclaration in the same scope:

var age = 30;

var age = 31;

This is valid JavaScript.

The same variable name can be declared again using var.

This is one of the behaviors that makes var different from let and const.

`let` in JavaScript

let is another keyword used to declare variables.

A let variable can be declared without a value:

let age;

Or it can be initialized when it is declared:

let age = 30;

A variable declared with let can be reassigned:

let age = 30;

age = 31;

However, let cannot be redeclared in the same scope:

let age = 30;

let age = 31; // Error

The scope-related behavior of let becomes more important when we study scope in detail.

`const` in JavaScript

const is used when a variable binding should not be reassigned.

Unlike let and var, a const variable must be initialized when it is declared.

This works:

const age = 30;

But this does not:

const age; // Error

A value must be provided when a const variable is declared.

A const variable cannot be reassigned:

const age = 30;

age = 31; // Error

It also cannot be redeclared in the same scope:

const age = 30;

const age = 31; // Error

One important detail is that const prevents reassignment of the variable binding. It does not mean that every value stored in a const variable is automatically immutable. We will explore that distinction later when we discuss objects, references, and mutation.

`var` vs `let` vs `const`

Now that we have looked at each keyword separately, let's compare them.

Feature	`var`	`let`	`const`
Can be declared without a value	Yes	Yes	No
Can be initialized during declaration	Yes	Yes	Yes
Can be reassigned	Yes	Yes	No
Can be redeclared in the same scope	Yes	No	No

For example:

var count = 1;
count = 2; // Allowed

let count = 1;
count = 2; // Allowed

const count = 1;
count = 2; // Error

Because of these differences, modern JavaScript code generally uses let and const instead of var.

When Should We Use `let` and `const`?

A simple rule is:

Use const by default. Use let when you know the variable needs to be reassigned.

For example, if a value does not need to change:

const productName = "Laptop";
const productPrice = 999;

If a value needs to change during program execution:

let score = 0;

score = 10;
score = 20;

A counter is a good example of something that may change:

let counter = 0;

counter = counter + 1;

Using const when reassignment isn't required can also help prevent accidental reassignment.

What about var?

var is still valid JavaScript, but it is generally avoided in modern JavaScript code because it has older scoping and redeclaration behavior that can make code harder to reason about.

Understanding those behaviors will become much clearer when we study scope, hoisting, and the Temporal Dead Zone.

Naming Variables

Choosing good variable names is an important part of writing readable code.

Compare:

const firstName = "John";

with:

const x = "John";

Both are valid, but firstName immediately tells us what the value represents.

A good variable name should be:

Meaningful
Descriptive
Easy to understand
Consistent with the project's naming conventions

Rules for JavaScript Variable Names

JavaScript has specific rules for variable names.

1. A variable name cannot start with a number

let 1user; // Invalid

But numbers can be used after the first character:

let user1; // Valid

2. A variable name can start with a letter, `_`, or `$`

let userName;
let _count;
let $price;

These are valid variable names.

3. Spaces are not allowed

let user name; // Invalid

Instead, we can use camelCase:

let userName;

4. Special characters such as `-` are not allowed in normal variable names

let user-name; // Invalid

The - character is interpreted as the subtraction operator.

5. Variable names are case-sensitive

JavaScript treats uppercase and lowercase letters as different.

For example:

let userName = "John";
let username = "Jane";

These are two different variables.

Similarly:

let age;
let Age;
let AGE;

are all different identifiers.

6. Reserved keywords cannot be used as variable names

JavaScript has keywords that have a special meaning in the language.

For example:

let const; // Invalid
let class; // Invalid
let function; // Invalid

These words already have a defined purpose in JavaScript.

7. Use meaningful names

Prefer:

const productPrice = 999;
const customerName = "John Doe";
const isLoggedIn = true;

over:

const x = 999;
const a = "John Doe";
const flag = true;

The goal isn't to make variable names unnecessarily long. The goal is to make the code easy to understand.

8. Follow a consistent naming convention

A common convention for JavaScript variables is camelCase:

const firstName = "John";
const productPrice = 999;
const isUserLoggedIn = true;

Consistent naming makes code easier to read, especially when working on a large application with multiple developers.

A Simple Mental Model

One way to think about a variable is as a name associated with a value.

With let, the variable can be reassigned:

userName
   ↓
"John"

   ↓ reassignment

userName
   ↓
"Jane"

With const, the variable binding cannot be reassigned:

userName
   ↓
"John"

   ↓ reassignment

   ❌ Not allowed

This gives us a simple mental model:

var
→ Can be reassigned
→ Can be redeclared in the same scope

let
→ Can be reassigned
→ Cannot be redeclared in the same scope

const
→ Cannot be reassigned
→ Cannot be redeclared in the same scope

One Last Question

At this point, we know how to create variables and how var, let, and const behave.

But there is another important question:

Why does JavaScript care about where a variable is declared?

For example, why does JavaScript use the concept of "same scope" when deciding whether a variable can be redeclared?

And why do var, let, and const behave differently depending on where they are declared?

That takes us to the next topic:

Scope, Hoisting and the Temporal Dead Zone

Understanding these concepts will take our simple understanding of variables and turn it into a much stronger mental model of how JavaScript actually works.

What Is JavaScript & How Does It Run?

Abhishek Bankar — Tue, 15 Sep 2026 11:15:38 +0000

When we open a website, we usually see text, images, buttons, forms, menus, animations, and many other elements.

HTML gives the page its structure. CSS controls how those elements look. But something is still missing.

What happens when we click a button?

What happens when a menu opens?

How does a website validate a form, fetch data from a server, or update part of the page without reloading the entire page?

This is where JavaScript comes in.

What Is JavaScript?

JavaScript is a programming language used to add behavior and logic to applications.

On the web, JavaScript makes webpages interactive. It can respond to user actions, change content on a page, validate user input, communicate with servers, and perform application logic.

But JavaScript is not limited to browsers. It can also be used for server-side development, desktop applications, development tools, and many other types of software.

At a simple level, you can think of JavaScript as the language that allows us to describe what an application should do.

For example:

const name = "Abhishek";

console.log(name);

Here, we are giving JavaScript instructions. A JavaScript environment processes those instructions and produces the corresponding result.

That basic idea is important: we write instructions in JavaScript, and a JavaScript environment executes them.

HTML, CSS and JavaScript

A web application usually involves three technologies with different responsibilities.

HTML - Structure

HTML defines the structure and content of a webpage.

For example:

<button>Buy Now</button>

HTML tells the browser that there is a button on the page.

CSS - Presentation

CSS controls how that HTML is presented.

It can control things such as:

Colors
Fonts
Spacing
Size
Layout
Positioning
Responsive behavior

JavaScript - Behavior

JavaScript adds behavior and application logic.

For example, when a user clicks Buy Now, JavaScript can respond to that action and perform some operation.

A simple way to remember the difference is:

HTML        → What exists?
CSS         → How does it look?
JavaScript  → What does it do?

A simple real-world analogy

One analogy I find useful when learning this is to think of a webpage as a human body.

HTML        → Skeleton / structure
CSS         → Appearance
JavaScript  → Brain / behavior

The analogy isn't technically perfect, but it gives us a simple mental model.

The skeleton gives the body its structure, appearance makes it look the way it does, and the brain controls behavior.

Similarly, HTML defines the structure, CSS controls presentation, and JavaScript handles behavior and logic.

Where Does JavaScript Run?

JavaScript needs an environment capable of understanding and executing JavaScript code.

Two common environments are:

Web browsers
Node.js

JavaScript in the Browser

When JavaScript runs inside a browser such as Chrome, Firefox, or Safari, the browser provides an environment in which JavaScript can execute.

Different browsers use different JavaScript engines.

For example:

Browser	JavaScript Engine
Chrome	V8
Firefox	SpiderMonkey
Safari	JavaScriptCore

The browser does much more than just execute JavaScript. It also provides APIs that allow JavaScript to interact with the webpage and the browser environment.

This is what makes browser-based JavaScript useful for building interactive web applications.

For example, JavaScript running in a browser can respond to a button click, update the page, read user input, or request data from a server.

JavaScript with Node.js

JavaScript can also run outside the browser.

This is where Node.js comes in.

Node.js is a JavaScript runtime that allows JavaScript to run outside a browser. It uses Google's V8 JavaScript engine and provides additional capabilities needed for server-side and general-purpose development.

For example, JavaScript running in Node.js can be used to build:

Web servers
APIs
Backend applications
Command-line tools
Development tooling

One distinction is especially important here:

JavaScript
    ↓
Programming language

V8
    ↓
JavaScript engine

Node.js
    ↓
JavaScript runtime built around V8

So Node.js is not a JavaScript engine.

It uses the V8 engine to execute JavaScript and provides additional runtime capabilities around it.

This distinction becomes increasingly important as we start learning how JavaScript works outside the browser.

What Is a JavaScript Engine?

A JavaScript engine is software designed to process and execute JavaScript code.

Different environments can use different engines.

For example:

Chrome     → V8
Firefox    → SpiderMonkey
Safari     → JavaScriptCore
Node.js    → V8

When we write JavaScript, the engine takes that source code and processes it so that the instructions can actually be executed by the computer.

A simplified mental model looks like this:

JavaScript Source Code
          ↓
    JavaScript Engine
          ↓
       Execution
          ↓
        Result

The actual internals are more complicated than this. A JavaScript engine doesn't simply read our code and execute each line exactly as written.

It parses and processes the code and performs various execution and optimization steps.

For now, we don't need to go deep into those details.

The important idea is:

A JavaScript engine is the software responsible for processing and executing JavaScript code.

We'll come back to what happens inside the engine later when we explore JavaScript's execution model and engine performance in more detail.

What Happens When JavaScript Code Runs?

Consider this code:

const name = "Abhishek";

console.log(name);

At a high level, we can think about what happens like this:

JavaScript source code
        ↓
JavaScript engine
        ↓
Code is processed
        ↓
Instructions are executed
        ↓
"Abhishek" is printed

The first statement creates a variable called name and gives it the value "Abhishek".

The second statement asks JavaScript to print the value stored in name to the console.

The important part is that the JavaScript source code we write is not directly understood by the computer as-is. A JavaScript engine is responsible for processing that code and executing it.

There is a lot more happening behind the scenes, but understanding this basic flow gives us the right starting point.

Later, when we learn about execution contexts, the call stack, memory, parsing, compilation, and optimization, this simple model will become much more detailed.

Statements and Expressions

JavaScript code contains different kinds of constructs. Two important concepts are statements and expressions.

An expression is something that produces a value.

For example:

10 + 20

produces:

A variable reference can also be part of an expression:

name

A statement, on the other hand, represents an instruction or action that JavaScript can execute.

For example:

const age = 30;

This is a variable declaration statement.

Statements can contain expressions.

For example:

const total = 10 + 20;

Here:

10 + 20

is an expression that produces 30, while the complete line is a variable declaration statement.

We don't need to go too deep into statements and expressions yet. The important thing to remember is:

Expressions produce values. Statements perform actions or represent instructions.

This distinction becomes much more useful as JavaScript code becomes more complex.

Putting Everything Together

We can now build a simple mental model of JavaScript.

And when thinking about a web application:

HTML
  ↓
Structure

CSS
  ↓
Presentation

JavaScript
  ↓
Behavior + Logic

JavaScript is therefore much more than just a way to make buttons clickable.

It is a programming language capable of handling application logic and running in different environments.

The browser provides an environment where JavaScript can interact with webpages and browser features. Node.js provides a runtime for executing JavaScript outside the browser. Underneath these environments, JavaScript engines process and execute the JavaScript code we write.

If there is one mental model I would keep from this article, it is this:

HTML        → What exists?
CSS         → How does it look?
JavaScript  → What does it do?

Once this foundation is clear, the next question naturally becomes:

How does JavaScript actually store and manage the values we create in our programs?

That's where variables come in.

DEV Community: Abhishek Bankar

Variables in JavaScript: var, let and const

What Is a Variable?

Declaring a Variable

Assigning a Value to a Variable

var in JavaScript

let in JavaScript

const in JavaScript

var vs let vs const

When Should We Use let and const?

Naming Variables

Rules for JavaScript Variable Names

1. A variable name cannot start with a number

2. A variable name can start with a letter, _, or $

3. Spaces are not allowed

4. Special characters such as - are not allowed in normal variable names

5. Variable names are case-sensitive

6. Reserved keywords cannot be used as variable names

7. Use meaningful names

8. Follow a consistent naming convention

A Simple Mental Model

One Last Question

Scope, Hoisting and the Temporal Dead Zone

What Is JavaScript & How Does It Run?

When we open a website, we usually see text, images, buttons, forms, menus, animations, and many other elements.

What Is JavaScript?

HTML, CSS and JavaScript

HTML - Structure

CSS - Presentation

JavaScript - Behavior

A simple real-world analogy

Where Does JavaScript Run?

JavaScript in the Browser

JavaScript with Node.js

What Is a JavaScript Engine?

What Happens When JavaScript Code Runs?

Statements and Expressions

Putting Everything Together

`var` in JavaScript

`let` in JavaScript

`const` in JavaScript

`var` vs `let` vs `const`

When Should We Use `let` and `const`?

2. A variable name can start with a letter, `_`, or `$`

4. Special characters such as `-` are not allowed in normal variable names