Understanding Variables and Data Types in JavaScript

Variables what they are actually?

Definition: A variable is a named location in memory used to store data whose value can change during the execution of a program.

In simple terms, variables are nothing more than containers (imagine a box) that store some value (i.e., data). Each container (i.e., box) has a label/name through which we can identify and differentiate between them.

The box name or container name can't be changed once declared, but the items stored in the box, i.e., data, can change, except with const.

let age = 20;   // variable name: age

You can change the data:

age = 21;

But you cannot rename the variable like this:

age → years   // not possible

If you want a new name, you must create a new variable and set the reference to old name

let years = age;

---

Methods to declare in JavaScript

1} VAR declaration:

var is the old way to declare variables (before ES6).

var name = "Jivesh";
var age = 20;

Points to note down:

• Can be redeclared

• Can be updated

• Function scoped (Accessed within the function declared)

Example:

var x = 10;
var x = 20;   // redeclared allowed
x = 30;       // updation allowed

2}Let Declaration:

let was introduced in ES6 and is the modern way to declare variables that may change.

let city = "Pune";
let score = 95;

Points to note down:

• Cannot be redeclared

• Can be updated

• Block scoped ({ })

Example:

let a = 10;
a = 20;      // updation allowed

let a = 30;  // Error (cannot redeclare)

Example of block scope:

{
    let num = 50;
}
console.log(num); // Error

3}Const Declarition:

const is used for variables whose value should not change.

const pi = 3.14;
const country = "India";

Points to note down:

• Cannot be redeclared

• Cannot be updated

• Block scoped

Example:

const x = 10;
x = 20;   // Error

Important Note (Objects with const)

const person = {
    name: "Jivesh"
};

person.name = "Rahul";   //allowed

The object properties can change, but the variable reference cannot. In simple terms, you can't redeclare the object, but you can modify its properties.

---

Comparison Table of var, let, and const

Feature	var	let	const
Scope	Function scoped	Block scoped	Block scoped
Redeclaration	Allowed	Not allowed	Not allowed
Reassignment	Allowed	Allowed	Not allowed
Hoisting	Hoisted and initialized with undefined	Hoisted but not initialized	Hoisted but not initialized
Introduced in	ES5 (older JS)	ES6	ES6
Use Case	Old JavaScript code	When value may change	When value should remain constant

---

So what should you use?

Modern JavaScript developers typically use const by default. Use let only when values need to change, and try to avoid using var, as it doesn't support hoisting.

---

What is Scope?

Scope means the area of a program where a variable can be accessed (used).

In JavaScript there are mainly three types of scope:

1. Global Scope

2. Function Scope

3. Block Scope

Above in types of declaration we saw that some are Function Scope and Some are Blocked scopes. Lets now understang what they actually mean

The behavior of these scopes depends on how the variable is declared using var, let, or const.

---

Global Scope

A variable declared outside all functions and blocks is in global scope.

It can be accessed anywhere in the program.

Example

var a = 10;
let b = 20;
const c = 30;

function show() {
    console.log(a);
    console.log(b);
    console.log(c);
}

show();

Explanation

All variables (a, b, c) are declared globally, so they can be used inside functions or blocks.

✔ Works with var, let, and const.

---

Function Scope

A variable declared inside a function is accessible only inside that function.

This type of scope mainly applies to var.

Example

function test() {
    var x = 10;
    console.log(x); // works
}

test();

console.log(x); // error

Explanation

x exists only inside the function.

var variables are function scoped, meaning they are available everywhere inside that function.

Block Scope

A block is any code inside { }, such as:

• if

• for

• while

• switch

Variables declared with let and const follow block scope.

Example

if (true) {
    let x = 10;
    const y = 20;
}

console.log(x); // error
console.log(y); // error

Explanation

x and y exist only inside the block.

This is why let and const are block scoped.

Important Difference Example

if (true) {
    var a = 10;
    let b = 20;
    const c = 30;
}

console.log(a); // works
console.log(b); // error
console.log(c); // error

Explanation

• var ignores block scope → accessible outside

• let follows block scope → only inside block

• const follows block scope → only inside block

  

---

What are Data Types?

Now that we know variables are like containers or boxes, we need to talk about what goes inside them.

Imagine you are packing for a move. You have a box for "Clothes" and a box for "Liquids." You wouldn't pour soup directly into a cardboard box, right? Everything has a specific type.

In programming, the computer needs to know exactly what kind of data it is holding.Telling the computer the data type helps it understand exactly what it can and cannot do with that information and how will that be stored.

Primitive Data Types (The Basics)

In JavaScript, data types are divided into two main categories: Primitive and Non-Primitive (Objects). For now, let's focus on Primitives.

"primitive" means it is the most basic, simple building block in the language. Think of primitives like individual Lego bricks. They hold exactly one single value.

There are 5 main primitive data types you will use every day:

1} String (Text and Words)

A string is just a fancy programmer word for "text." It can be a single letter, a full sentence, or even a paragraph. To tell the computer "Hey, this is text!", you just wrap it in quotation marks (either single ' ' or double " ").
generally single' ' is considered good for a character and " "for a group of character

Example:

JavaScript

let firstName = "Jivesh";
let message = 'Learning JS is fun!';
let age = "23"; // Note: Quotes make this a String, not a Number!

2} Number (Math and Counting)

This is exactly what it sounds like Unlike some other programming languages that make you use different types for whole numbers and decimals and Integers, JavaScript keeps it friendly and groups them all together under "Number." You type these without quotes.

Example:

let age = 20;
let pi = 3.14;
let temperature = -5;

3} Boolean (True or False)

Think of a Boolean as YES or NO. In code, we call these true or false (all lowercase, no quotes). These are super helpful when you want your code to make decisions.

Example:

JavaScript

let isLoggedIn = true;
let isGameOver = false;

4} Undefined (The "I don't know yet" box)

Remember how we said variables are boxes? Imagine you build a box and put a label on it, but you haven't actually put anything inside the box yet. If you ask JavaScript what is inside, it will say undefined. It means the variable exists, but a value hasn't been assigned to it yet.

Example:

let score; 
console.log(score); // Output: undefined

5} Null (The "Intentionally Empty" box)

null is very similar to undefined, but with one big difference: you do it on purpose. If undefined is an empty box you forgot to fill, null is a box that you specifically packed with "nothing." You are explicitly telling the computer, "I want this to be empty right now."

Example:

JavaScript

let currentWinner = null; // We don't have a winner yet, but we are tracking it.

(Note for completeness: JavaScript recently added two more advanced primitives called Symbol and BigInt, but for basic coding, the 5 above are your bread and butter! . Check them on MDM or wait for my artical notification )

---