The foundation stones of every JavaScript program.

When a craftsman builds a house, he first gathers containers and materials.
In JavaScript:

  • Variables are the containers.
  • Data Types are the materials stored inside them.

Without understanding these two, programming becomes memorization instead of understanding.

1. What is a Variable?

A variable is a named storage location used to hold data.

Think of it like a labeled box:

let name = "Anas";

Here:

  • name → variable name
  • "Anas" → value stored inside it

2. Why Do We Need Variables?

Imagine writing this repeatedly:

console.log("Anas");
console.log("Anas");
console.log("Anas");

Now if the name changes, you must edit everywhere.

Using variables:

let name = "Anas";

console.log(name);
console.log(name);
console.log(name);

Change once:

name = "Khan";

Everything updates automatically.

This is efficient, scalable, and professional.

3. Rules for Naming Variables

Valid

let userName;
let age2;
let _total;
let $price;

Invalid

let 2age;      // Cannot start with number
let user-name; // Hyphen not allowed
let let;       // Reserved keyword

4. Ways to Declare Variables

JavaScript provides 3 keywords:

  1. var
  2. let
  3. const

5. var (Old Method)

Before 2015, developers mainly used var.

var city = "Mumbai";

Problems with var

  • Function scoped
  • Can be redeclared
  • Causes confusion in large applications

Example:

var x = 10;
var x = 20;

console.log(x);

Output:

20

This flexibility often creates bugs.

6. let (Modern Recommended)

Used when value may change.

let age = 21;

age = 22;

Features

  • Block scoped
  • Cannot redeclare in same scope
  • Safer than var

Example:

let marks = 80;

// marks = 90 → allowed

7. const (Constant Variable)

Used when value should NOT change.

const pi = 3.14159;

Trying to change:

pi = 5;

Output:

Error

8. Difference Between var, let, and const

Feature var let const
Scope Function Block Block
Redeclare Yes No No
Reassign Yes Yes No
Modern Usage Rare Common Very Common

9. What is a Data Type?

A data type tells JavaScript what kind of value is stored.

Example:

let name = "Anas";
let age = 21;
  • "Anas" → String
  • 21 → Number

JavaScript treats them differently.

10. Types of Data in JavaScript

JavaScript data types are divided into:

A. Primitive Data Types

Simple single values.

  1. String
  2. Number
  3. Boolean
  4. Undefined
  5. Null
  6. BigInt
  7. Symbol

B. Non-Primitive (Reference) Data Types

Complex structures.

  1. Object
  2. Array
  3. Function

11. String Data Type

Used for text.

let name = "Anas";
let city = 'Mumbai';

Both single and double quotes work.

String Example

let message = "Welcome to JavaScript";

console.log(message);

Output:

Welcome to JavaScript

String Concatenation

let firstName = "Anas";
let lastName = "Khan";

console.log(firstName + " " + lastName);

Output:

Anas Khan

12. Number Data Type

Used for integers and decimals.

let age = 21;
let price = 99.99;

Arithmetic Example

let a = 10;
let b = 5;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

Output:

15
5
50
2

13. Boolean Data Type

Represents:

  • true
  • false

Used heavily in conditions and decision-making.

let isStudent = true;
let isLoggedIn = false;

Example

let age = 20;

console.log(age >= 18);

Output:

true

14. Undefined

A variable declared but not assigned a value.

let country;

console.log(country);

Output:

undefined

15. Null

Represents intentional empty value.

let data = null;

Meaning:

“There is nothing here intentionally.”

16. Difference Between Undefined and Null

Undefined Null
Value not assigned Empty value assigned intentionally
Automatic Manually assigned

Example:

let a;
let b = null;

17. BigInt

Used for very large integers.

let bigNumber = 123456789012345678901234567890n;

Notice the n at end.

18. Symbol

Creates unique identifiers.

let id = Symbol("id");

Mostly used in advanced programming.

19. Object Data Type

Objects store multiple related values.

let student = {
    name: "Anas",
    age: 21,
    city: "Mumbai"
};

Accessing Object Values

console.log(student.name);
console.log(student.age);

Output:

Anas
21

20. Array Data Type

Arrays store multiple values in order.

let fruits = ["Apple", "Mango", "Banana"];

Access Array Values

console.log(fruits[0]);

Output:

Apple

21. Function Data Type

Functions are reusable blocks of code.

function greet() {
    console.log("Assalamu Alaikum");
}

Calling function:

greet();

Output:

Assalamu Alaikum

22. Checking Data Types with typeof

JavaScript provides typeof.

let name = "Anas";

console.log(typeof name);

Output:

string

More Examples

console.log(typeof 100);

Output:

number

console.log(typeof true);

Output:

boolean

23. Dynamic Typing in JavaScript

JavaScript is dynamically typed.

Meaning:

A variable can change data types.

let value = 10;

value = "Hello";

Perfectly valid.

24. Type Conversion

Sometimes JavaScript converts types automatically.

Example:

console.log("5" + 2);

Output:

52

Because number 2 becomes string "2".

Explicit Conversion

String to Number

Number("100");

Number to String

String(100);

25. Truthy and Falsy Values

In JavaScript, some values behave like true or false.

Falsy Values

false
0
""
null
undefined
NaN

Everything else is mostly truthy.

Example

let username = "";

if(username){
    console.log("Welcome");
} else {
    console.log("Please enter username");
}

Output:

Please enter username

26. Practical Real-World Example

const studentName = "Anas";
let marks = 85;
let passed = true;

console.log("Student:", studentName);
console.log("Marks:", marks);
console.log("Passed:", passed);

Output:

Student: Anas
Marks: 85
Passed: true

27. Best Practices

Use const by default

const country = "India";

Use let when value changes

let score = 0;

Avoid var

Old projects may use it, but modern development prefers let and const.

28. Common Beginner Mistakes

Mistake 1

const age = 20;
age = 21;

Error because const cannot change.

Mistake 2

console.log(name);

let name = "Anas";

Error because let is not accessible before declaration.

29. Mini Practice Questions

Predict Output

1

let x = "5";
let y = 2;

console.log(x + y);

Answer:

52

2

let isRain = false;

console.log(typeof isRain);

Answer:

boolean

3

let value;

console.log(value);

Answer:

undefined

30. Final Summary

Concept Meaning
Variable Container for storing data
Data Type Type of stored value
let Variable that can change
const Fixed variable
String Text
Number Numeric values
Boolean true/false
Object Collection of properties
Array Ordered collection
Function Reusable code block

Final Thought

In JavaScript, variables are like vessels, and data types are the nature of what flows within them.
Master these deeply, and the doors of DOM manipulation, APIs, React, Node.js, and full-stack development begin to open naturally.

A strong foundation saves years of confusion later.

[Mid-Post Ad Placeholder]