# JavaScript Variables Explained Clearly: Values, Types, and How Data Really Works

Day 02 of **40 Days of JavaScript** is where JavaScript starts to feel *real*. Today’s focus is on **variables**, how values are stored, and why JavaScript behaves the way it does when data changes.

If variables are not clear, everything that follows—functions, objects, React state, debugging—will feel confusing. So the goal here is not speed, but clarity.

If you skipped [Day 01](https://blog.greenroots.info/javascript-explained-from-scratch), it’s strongly recommended to complete it first. This lesson assumes your environment is already set up.

## **What You’ll Learn in This Session**

In this session, we explore what variables are, how assignment works, how JavaScript treats primitive and non-primitive values, and why let, const, and var behave differently. We also introduce memory concepts that explain many “weird” JavaScript behaviours developers face later.

## **Watch the Video**

%[https://youtu.be/tVqy4Tw0i64] 

If you prefer learning visually, this video guides you through every concept step by step, featuring live coding and demos.

## **What Is a Variable, Really?**

A variable is a **named storage location**.

Think of it as writing your friend’s address on a piece of paper. The paper is the variable. The address written on it is the value. You carry the paper so you can reuse the information later.

In JavaScript, variables allow us to store and reuse data.

```javascript
let city = "Bangalore";
```

Here, `city` is the storage, and `Bangalore` is the value inside it.

## **Declaring Variables in JavaScript**

Modern JavaScript provides three keywords for declaring variables.

```javascript
var age = 30;
let name = "Tapas";
const country = "India";
```

The difference between them is not in syntax but **in behaviour**.

* `var` allows redeclaration.
    
* `let` allows reassignment but not redeclaration.
    
* `const` allows neither redeclaration nor reassignment.
    

Understanding this difference early prevents many bugs later.

## **Assignment vs Reassignment**

Assignment means putting a value into a variable. Reassignment means replacing the old value with a new one.

```javascript
let fruit = "Mango";
fruit = "Kiwi";
```

The variable fruit still exists, but the value inside it has changed. The old value is replaced.

## **Why var Is Dangerous**

With var, redeclaration is allowed.

```javascript
var address = "Bangalore";
var address = "USA";

console.log(address); // USA
```

This behaviour caused confusion and bugs for years because the same variable could be declared multiple times without warning.

That’s why modern JavaScript prefers let and const.

### **How** `let` **Fixes the Problem**

With let, redeclaration is not allowed, but reassignment is.

```javascript
let address = "Bangalore";
address = "USA";

console.log(address); // USA
```

Trying to redeclare it results in an error.

```javascript
let address = "Bangalore";
let address = "USA"; // Error
```

This forces cleaner, more predictable code.

## **Why** `const` **Exists**

const is used when a variable should never change.

```javascript
const pi = 3.14;
pi = 3.14159; // Error
```

This is extremely useful for values that must remain stable, such as configuration values or fixed references.

## **Primitive Data Types in JavaScript**

Primitive values are the most basic data types.

```javascript
let userName = "Alex";       // string
let age = 25;               // number
let isStudent = true;       // boolean
let salary;                 // undefined
let bonus = null;           // null
```

Primitive values are **passed by value**.

```javascript
let a = 10;
let b = a;

b = 20;

console.log(a); // 10
console.log(b); // 20
```

Here, b receives a copy of a. Changing b does not affect a.

## **Undefined vs Null (Very Important)**

If a variable is declared but not assigned, it is undefined.

```javascript
let score;
console.log(score); // undefined
```

If a variable is explicitly assigned null, it means “no value intentionally”.

```javascript
let score = null;
console.log(score); // null
```

This distinction becomes critical when working with APIs and conditions.

## **Non-Primitive (Reference) Types**

Objects and arrays are non-primitive values.

```javascript
let student = {
  name: "Alice",
  age: 22,
  enrolled: true
};

let numbers = [1, 2, 3, 4];
```

These values are **stored in memory**, and variables hold a reference to them.

```javascript
let user1 = { name: "Sam" };
let user2 = user1;

user2.name = "Alex";

console.log(user1.name); // Alex
```

Both variables point to the same object. This behavior surprises many developers and is the foundation of bugs in real applications if not understood.

## **Stack vs Heap (High-Level View)**

JavaScript stores data in memory.

Primitive values are stored directly in **stack memory**.

Non-primitive values are stored in **heap memory**, and variables store references to them.

You don’t need to master memory management yet, but knowing this difference explains why reference values behave differently.

## **Rules for Naming Variables**

JavaScript enforces grammar rules.

Variable names:

• Must start with a letter, underscore, or dollar sign

• Cannot start with a number

• Cannot use reserved keywords

• Are case-sensitive

Valid examples:

```javascript
let _count = 10;
let $price = 99;
let userName = "Tapas";
```

Invalid examples:

```javascript
let 2day = "Monday";     // invalid
let user-name = "Sam";  // invalid
let for = 10;            // invalid
```

Beyond rules, naming should be meaningful and readable. A variable name should explain its purpose without comments.

## **Code Examples on GitHub**

All code demonstrated in this session is available in the GitHub repository linked below.

%[https://github.com/tapascript/40-days-of-javascript/tree/main/day-02] 

## **Assignment Tasks**

* ✅ Task 1: Declare variables for a person’s name, age, isStudent status, and favorite programming language.
    
* ✅ Task 2: Print the values to the console.
    
* ✅ Task 3: Try reassigning values to let and const variables and observe errors.
    
* ✅ Task 4: Create an object and an array, assign them to new variables, modify, and observe changes.
    

## **What’s Next?**

In **Day 03**, we’ll explore operators and expressions, building directly on variables and values.

## **Part of the 40 Days of JavaScript Series**

* [**Full Video Playlist**](https://www.youtube.com/playlist?list=PLIJrr73KDmRw2Fwwjt6cPC_tk5vcSICCu)
    
* [**Daily Tasks & Assignments**](https://github.com/tapascript/40-days-of-javascript)
    
* [**Community Discussions**](https://discord.gg/ux9BchWEW3)
    
* [**Progress Tracker**](https://topmate.io/tapasadhikary/382755?utm_source=public_profile&utm_campaign=tapasadhikary)
    

Let’s build JavaScript confidence. One solid step at a time 🚀

---

Liked it? Please let me know with your comments and likes. ❤️

Let's connect:

* [**tapaScript on YouTube**](https://www.youtube.com/tapasadhikary?sub_confirmation=1)
    
* [**Check out my FREE Courses & Books**](https://www.tapascript.io/)
    
* [**X(Twitter)**](https://twitter.com/tapasadhikary)
    
* [**LinkedIn**](https://www.linkedin.com/in/tapasadhikary/)
    
* [**GitHub**](https://github.com/tapascript)