JavaScript Data Types (Basics)

JavaScript data types define the kind of value a variable can hold.

👉 There are two main categories:

1. Primitive Data Types
2. Non-Primitive (Reference) Data Types

---

🔹 1. Primitive Data Types

Primitive types store single values and are immutable.

✅ 1. Number

Represents both integers and floating-point numbers.

let age = 25;
let price = 99.99;

---

✅ 2. String

Represents text (inside quotes).

let name = "Deepesh";
let message = 'Hello World';

---

✅ 3. Boolean

Represents true or false.

let isLoggedIn = true;
let isAdmin = false;

---

✅ 4. Undefined

A variable declared but not assigned a value.

let x;
console.log(x); // undefined

---

✅ 5. Null

Represents intentional absence of value.

let data = null;

---

✅ 6. BigInt

Used for very large integers.

let bigNumber = 123456789012345678901234567890n;

---

✅ 7. Symbol

Used for unique identifiers.

let id = Symbol("userId");

---

🔹 2. Non-Primitive (Reference) Data Types

These store collections or complex data.

---

✅ 1. Object

Key-value pairs.

let user = {
  name: "Deepesh",
  age: 25,
  isActive: true
};

---

✅ 2. Array

Ordered list of values.

let fruits = ["apple", "banana", "mango"];

---

✅ 3. Function

A block of reusable code.

function greet() {
  return "Hello!";
}

---

🔹 typeof Operator

Used to check the data type.

console.log(typeof 10);          // number
console.log(typeof "Hello");     // string
console.log(typeof true);        // boolean
console.log(typeof undefined);   // undefined
console.log(typeof null);        // object (known JS bug)
console.log(typeof {});          // object
console.log(typeof []);          // object

---

⚠️ Important Notes

• null returns "object" → historical bug in JavaScript
• Arrays are technically objects
• Functions are also treated as objects

---

🧠 Quick Summary Table

Type	Example
Number	10, 3.14
String	"Hello"
Boolean	true, false
Undefined	let x;
Null	null
BigInt	123n
Symbol	Symbol("id")
Object	{name: "John"}
Array	[1,2,3]
Function	function(){}

---

🚀 Simple Example Combining All

let user = {
  name: "Deepesh",     // string
  age: 25,             // number
  isLoggedIn: true,    // boolean
  balance: 1000000000000000000n, // BigInt
  id: Symbol("id"),    // symbol
  hobbies: ["coding", "music"], // array
  address: null        // null
};console.log(typeof user);

Operators in JavaScript are symbols used to perform operations on variables and values. They are essential for writing logic, calculations, and conditions

1. Arithmetic Operators

Used for mathematical calculations.

Operator	Description	Example
+	Addition	5 + 2 = 7
-	Subtraction	5 - 2 = 3
*	Multiplication	5 * 2 = 10
/	Division	10 / 2 = 5
%	Modulus (remainder)	5 % 2 = 1
**	Exponentiation	2 ** 3 = 8

Example:

let a = 10;
let b = 3;console.log(a + b); // 13
console.log(a % b); // 1

---

2. Assignment Operators

Used to assign values to variables.

Operator	Example	Meaning
=	x = 5	Assign 5
+=	x += 3	x = x + 3
-=	x -= 2	x = x – 2
*=	x *= 2	x = x * 2
/=	x /= 2	x = x / 2

Example:

let x = 5;
x += 3; // 8

---

3. Comparison Operators

Used to compare two values (returns true/false).

Operator	Description
==	Equal (value only)
===	Strict equal (value + type)
!=	Not equal
!==	Strict not equal
>	Greater than
<	Less than
>=	Greater than or equal
<=	Less than or equal

Example:

console.log(5 == "5");   // true
console.log(5 === "5");  // false

---

4. Logical Operators

Used to combine conditions.

Operator	Description
&&	AND
`
!	NOT

Example:

let age = 20;if (age > 18 && age < 30) {
  console.log("Young adult");
}

---

5. Unary Operators

Operate on a single operand.

Operator	Description
++	Increment
--	Decrement
typeof	Returns type
!	Logical NOT

Example:

let num = 5;
num++; // 6console.log(typeof num); // number

---

6. Ternary Operator

Short form of if-else.

Syntax:

condition ? value1 : value2;

Example:

let age = 18;
let result = age >= 18 ? "Adult" : "Minor";

---

7. Special Operators

Some useful additional operators:

Operator	Description
?.	Optional chaining
??	Nullish coalescing
in	Check the property in the object
instanceof	Check object type

Example:

let user = {};
console.log(user?.name); // undefined (no error)let value = null ?? "default";
console.log(value); // "default"

---

✅ Summary

• Arithmetic → calculations
• Assignment → assign values
• Comparison → compare values
• Logical → combine conditions
• Ternary → short if-else
• Special → modern JS features

---

What Are Variables in JavaScript?

In JavaScript, variables are declared using var, let, and const. These keywords define how variables behave in terms of scope and mutability. Modern JavaScript development strongly favors let and const because they provide better control and reduce unexpected bugs. If you’re building dynamic websites or applications, understanding variables is absolutely essential because they drive logic, interactivity, and data handling.

Why Variables Matter in Programming

Variables allow your program to process user input, perform calculations, and manage application state. Think of them as the memory of your application. Without variables, even simple tasks like storing a username or calculating a total price would be impossible.

Real-Life Analogy for Variables

Consider a backpack you carry every day. You can put books, gadgets, or food inside it. Some items you replace frequently, while others stay the same. That’s exactly how variables behave depending on how you declare them.

---

Types of Variable Declarations

Understanding var

The var The keyword is the oldest method for declaring variables in JavaScript. It is function-scoped, meaning it is accessible throughout the function in which it is defined. One unique characteristic of var is that it allows both redeclaration and reassignment, which can sometimes introduce bugs if not handled carefully.

var name = "John";
var name = "Doe"; // Allowed
console.log(name); // Output: Doe

Because of these limitations, developers rarely use var in modern applications unless maintaining legacy code.

---

Understanding let

The let keyword was introduced in ES6 and is now widely used. It provides block-level scope, meaning the variable is only accessible within the block {} where it is defined. This makes code more predictable and easier to debug.

let age = 25;
age = 30; // Allowed
// let age = 35; ❌ Not allowed

Using let ensures that variables don’t accidentally leak outside their intended scope.

---

Understanding const

The const keyword is used to declare variables whose values should not change. Once assigned, a const variable cannot be reassigned. However, if the variable holds an object or array, its internal properties can still be modified.

const country = "India";
// country = "USA"; ❌ Error

This makes const ideal for values that should remain constant throughout the program.

---

Key Differences Between var, let, and const

Scope Explained

Keyword	Scope Type
var	Function/Global
let	Block
const	Block

---

Reassignment vs Redeclaration

Keyword	Reassign	Redeclare
var	Yes	Yes
let	Yes	No
const	No	No

---

Hoisting Behavior

JavaScript uses a mechanism called hoisting, where variable declarations are moved to the top of their scope during execution. However, var is initialized with undefined, while let and const remain uninitialized until execution reaches their declaration.

---

Rules for Naming Variables

Valid Naming Conventions

• Start with a letter, _, or $
• Can include numbers (not at the beginning)
• Case-sensitive

Common Mistakes to Avoid

• Using reserved keywords
• Starting names with numbers
• Using unclear variable names

---

Rules to define a variable name

✅ 1. Allowed Characters

• Variable names can contain:
  • Letters (a–z, A–Z)
  • Digits (0–9)
  • Underscore (_)
  • Dollar sign ($)

✔ Example:

let name;
let user1;
let _count;
let $price;

---

❌ 2. Cannot Start with a Number

• A variable name must NOT start with a digit

❌ Wrong:

let 1name;

✔ Correct:

let name1;

---

❌ 3. No Spaces Allowed

• Variable names cannot contain spaces

❌ Wrong:

let user name;

✔ Correct:

let userName;

---

❌ 4. Cannot Use Reserved Keywords

• You cannot use JavaScript reserved words like:
  • let, var, const, if, else, function, etc.

❌ Wrong:

let var = 10;

---

✅ 5. Case Sensitive

• JavaScript is case-sensitive

let name = "John";
let Name = "Doe"; // different variable

---

✅ 6. Use Meaningful Names (Best Practice)

• Always use descriptive names

✔ Good:

let userAge = 25;
let totalPrice = 100;

❌ Bad:

let x = 25;

---

✅ 7. Use camelCase (Convention)

• JavaScript commonly uses camelCase

✔ Example:

let firstName;
let totalAmount;

---

✅ 8. Avoid Special Characters

• Do NOT use symbols like @, #, %, etc.

❌ Wrong:

let user@name;

---

✅ 9. Use let, const, or var

• Modern JavaScript prefers:
  • let → for changeable values
  • const → for constants

let age = 20;
const PI = 3.14;

---

• Dummy Page
• Login Page

Text Fields

Enter address

Radio Buttons

Male
Female
Other

Checkboxes

Java
Python
Selenium

Dropdown (Select)

–Select Country– India USA UK Australia

Multi Select Dropdown

Python Selenium Playwright API Testing

Buttons

Normal Button
Submit
Reset

JavaScript Alerts

Simple Alert
Confirm Alert
Prompt Alert

File Upload

Date and Time Pickers

Links

Open Google
Go to Bottom

Web Table

ID	Name	Role
1	Deepesh	Trainer
2	Rahul	Tester
3	Anita	Developer

Iframe

Hidden Element

Enabled & Disabled Fields

Image

Mouse Hover

Hover Over Me

Bottom of Page

This is the bottom of the page for scrolling practice.

Ultimate Automation Practice Page

Auto Suggestions (Google Style)

AJAX Success & Network Failure

Load Success Simulate Network Failure

Stale Element Simulation

Click to Replace Me

Drag and Drop

Drag Me

Drop Here

Keyboard Actions

Nested Shadow DOM

• Dummy Booking