# Understanding Variables and Data Types in JavaScript

### **Topics to Cover**

1.  What variables are and why they are needed
    
2.  How to declare variables using `var`, `let`, and `const`
    
3.  Primitive data types (string, number, boolean, null, undefined)
    
4.  Basic difference between `var`, `let`, and `const`
    
5.  What is scope (very beginner-friendly explanation)
    

## What variables are and why they are needed

Variables are like boxes that store data inside them. They are the basic elements of any code, they are used all the time, for the simple reason that they store data.

Now, why are they needed? Well, any program revolves around data, data manipulation, data storage, transformation, etc. So, variables are the building blocks of any program.

Now, how do we use these variables, or how do we start.  
The 1st step is declaration. It means, to pick up a name for the variable.  
2nd step is initialisation. It means assigning it to a value. For example :

```plaintext
a = 5;
```

\= is the assignment operator. It is used to assign values.

Now there are certain keywords used to declare variables, and the same can be used to initialise them too. These are let, var, const.

Now why 3 ways. Well, each one of them have different purposes

`var` was used in old JavaScript programs, value once initialised can be changed later in the program. The reason it's no longer used is because it is leaky in nature. Think of it as a box with holes, so the values can get outside the scope. We will look into scope in just a minute.

`let` is used in modern syntax, and values once initialised can be changed later in the program.

`const` : values are fixed and can't be changed after initialisation. a `const` variable cannot be declared without an initial value in JavaScript, as it can't be changed later.

## How to declare variables using `var`, `let`, and `const`

Declaration

```plaintext
var a;
let b;
```

Initialisation

```plaintext
a = 5;
b = 6;
```

for const

```plaintext
const a = true;
a = false; // this is invalid
```

Now did you see, we can initialise variables to any value: number, string, booleans, etc

Also, there are certain rules about variable declaration:

1\. Variable declaration cannot start with a number  

```plaintext
const 1variablename = 2;
```

This is invalid.

2\. Missing quotes in string

```plaintext
const name = kushagra;  //this is invalid
const name = "kushagra"   // this is valid
```

this is because, JS intreprets kushagra as variable, so quotes are used.

## Primitive data types (string, number, boolean, null, undefined)

Data types are the types of data stored in variable. That is, the type of object you store inside a box.

There are two kinds of data types:

**Primitive data types:**

String: Text inside "", or '', or \`\`

```plaintext
let name = "kushagra";
```

Number: Any numerical value

```plaintext
let num = 2;
```

boolean: true or false value

```plaintext
let flag = true;
```

null: empty value

undefined: value not defined yet

```plaintext
let a; // this is undefined, value is not assigned yet
a = null;  // now, this is null, it is used for empty value
```

#### **Non-Primitive (Reference) Types: "Box within a Box"**

Objects: key value pairs inside a block

```plaintext
let obj = {
    name: "kushagra",
    age: 21,
}
```

Arrays: values stored in a sequence

```plaintext
let arr = [1,2,3];
```

Functions: Specialised objects, that allows us to reuse the repetitive code, it is callable.

```plaintext
function double(x){
    return x*2;
}
```

Primitive data types store values directly onto addresses

While non primitive data types store reference of values, i.e., address points to another address which points to value.

Now when value is copied from primitives, and changed, then no change is reflected in the original data type.

```plaintext
let name = "kushagra";
let fullname = name;
fullname = "changed" // will not change the value of name 
```

In non-primitves: the reference is copied, so change in value is reflected in the original data

```plaintext
let obj1 = { name: "Alice" };
let obj2 = obj1; // Only the reference is copied
obj2.name = "Bob";
console.log(obj1.name); // Output: "Bob" — change is reflected   
```

## What is scope

Scope can be thought of as box's boundary. A variable inside a box cannot be accessed outside the box. This is called scope.

Scope can be **Global or local.**

**Global Scope** is the outermost scope, it has access to all variables.

**Local Scope** is the box defined within a box or global scope.

```plaintext
let example1 = 42;  // this is global scope
{
    let example2 = 20; // this is local scope
}
```

Now let's talk about var's leaky property.

A variable declared using var, inside a local block, can be accessed outside this block, that is globally. This can cause name and scope conflicts with other variables, that's why it isn't used anymore.