# JavaScript 101: Understanding Variables and Data Types

Imagine you are moving into a new house. You have several boxes, and you label them: "Kitchen Utensils," "Books," or "Clothes." In programming, **variables** are those boxes. They are named containers used to store data values so we can use them later in our code.

Without variables, we’d have to remember every single value manually. Instead, we give them a name, and JavaScript remembers the value for us!

## 1\. How to Declare Variables: Var, Let, and Const

In the old days of JavaScript, we only had `var`. Today, we have better tools. Here is how you "label your boxes":

*   `var`: The old way. It’s flexible but can lead to bugs because it doesn’t follow strict rules about where it can be used.
    
*   `let`: The modern way to declare a variable that **can change**. Use this for things like a counter or a user's score.
    
*   `const`: Short for "constant." Use this for values that **should never change**, like your birthdate or a fixed tax rate.  
    
    ![](https://cdn.hashnode.com/uploads/covers/696b2022eaf9a23c860920ff/0b8f5e57-d43c-4102-8001-9cc49e335f6f.png align="center")
    

* * *

## 2\. Primitive Data Types: What’s Inside the Box?

In JavaScript, the "stuff" we put in our boxes comes in different flavors. These are called **Data Types**. Here are the five basics:

1.  **String**: Text data wrapped in quotes.
    
    *   *Example:* `"Prakash"` or `'JavaScript'`
        
2.  **Number**: Any number, whether it’s a whole number or a decimal.
    
    *   *Example:* `25` or `99.9`
        
3.  **Boolean**: A simple logical value—either `true` or `false`.
    
    *   *Example:* `isStudent = true`
        
4.  **Null**: This represents an intentional empty value. You are saying, "This box is empty on purpose."
    
5.  **Undefined**: This happens when you have a box but haven't put anything in it yet.
    

* * *

## 3\. The Big Differences: A Quick Comparison

To help you decide which declaration to use, here is a simple breakdown:

<table style="min-width: 100px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p><strong>Feature</strong></p></td><td colspan="1" rowspan="1"><p><strong>var</strong></p></td><td colspan="1" rowspan="1"><p><strong>let</strong></p></td><td colspan="1" rowspan="1"><p><strong>const</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Can be updated?</strong></p></td><td colspan="1" rowspan="1"><p>Yes</p></td><td colspan="1" rowspan="1"><p>Yes</p></td><td colspan="1" rowspan="1"><p><strong>No</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Can be re-declared?</strong></p></td><td colspan="1" rowspan="1"><p>Yes</p></td><td colspan="1" rowspan="1"><p>No</p></td><td colspan="1" rowspan="1"><p>No</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Scope</strong></p></td><td colspan="1" rowspan="1"><p>Function Scope</p></td><td colspan="1" rowspan="1"><p>Block Scope</p></td><td colspan="1" rowspan="1"><p>Block Scope</p></td></tr></tbody></table>

### What is "Scope"? (Beginner-Friendly Explanation)

Think of **Scope** as the "visibility" of your variable.

*   **Global Scope:** Like a street light—everyone on the street can see it.
    
*   **Block Scope (**`let`**/**`const`**):** Like a lamp inside your bedroom—you can see it while you're in the room, but people outside in the hallway can't see it. This makes your code much safer and prevents "name collisions."
    

![](https://cdn.hashnode.com/uploads/covers/696b2022eaf9a23c860920ff/597cf819-76a7-44cc-9073-81979db85f15.png align="center")

* * *

## 4\. Assignment: Experimenting with Code

Let's look at how these behave in a real program.

JavaScript

```plaintext
// 1. Declaring our variables
const name = "Prakash Jha"; 
let age = 24;
let isStudent = true;

console.log(name);      // Output: Prakash Jha
console.log(age);       // Output: 24
console.log(isStudent); // Output: true

// 2. Trying to change values
age = 25;               // This works fine! 
console.log(age);       // Output: 25

// 3. The Const Test
// name = "Rahul";      // ERROR! Uncaught TypeError: Assignment to constant variable.
```

**Observation:** As you can see, `let` allowed us to update the `age`, but `const` threw an error when we tried to change the `name`. This is exactly why we use `const`—to protect data that shouldn't be touched!

* * *