Understanding JavaScript Data Types: A Comprehensive Guide to Primitive and Reference Types with Examples

JavaScript has several built-in data types, which can be categorized into two broad groups:

🗹 Primitive Types

🗹 Non-Primitive (Reference) Types.

Aspect	Primitive Data Types	Reference Data Types
Examples	Number, String, Boolean	Object, Array, Function
Storage	Stack	Heap
Mutability	Immutable	Mutable
Value Type	Stored as value	Stored as reference
Passing in Function	Passed by value	Passed by reference
Type Checking	typeof	typeof, instanceof
Performance	Faster	Slower

Now,

⌬ Storage

➕ Primitive Data Types: Stored in the stack (fixed memory allocation)

let x = 10;
let y = x; // Copies the value
y = 20;
console.log(x); // 10 (original value remains unaffected)

➕ Reference Data Types: Stored in the heap (dynamic memory allocation).

let obj1 = { name: 'Alice' };
let obj2 = obj1; // Copies the reference, not the value
obj2.name = 'Bob';
console.log(obj1.name); // "Bob" (original value is affected)

⌬ Mutability

➕ Primitive Data Types: Immutable (cannot be changed after creation).

let str = "Hello";
str[0] = "h"; // No effect
console.log(str); // "Hello" (strings are immutable)

➕ Reference Data Types: Mutable (values can be changed).

let arr = [1, 2, 3];
arr[0] = 10;
console.log(arr); // [10, 2, 3]

⌬ Value vs Reference

➕ Primitive Data Types: Stored as values. Directly hold the data.

let a = 5;
let b = a;
b = 10;
console.log(a); // 5 (original value is unaffected)

➕ Reference Data Types: Stored as references to memory locations.

let objA = { key: 'value' };
let objB = objA;
objB.key = 'newValue';
console.log(objA.key); // "newValue" (both reference the same object)

---

JavaScript Data Types

Type	Examples
Primitive Types	➀ Number ➁ String ➂ Boolean ➃ Undefined ➄ Null
Non-Primitive Types	➀ Object ➁ Array ➂ Function

---

❐ Now write Primitive type with deatils

Primitive data types are immutable and stored by value.

✚ Number

let age = 25; // Integer
let pi = 3.14159; // Floating-point
let negativeNumber = -42; // Negative number
let exponential = 1.23e4; // 12300 in exponential notatio

✚ String

let singleQuote = 'Hello, world!';
let doubleQuote = "JavaScript is awesome!";
let templateLiteral = `This is a template literal`;

let multiLine = `This is a multi-line string.`;
console.log(`Name: ${singleQuote}, Length: ${singleQuote.length}`);

✚ Boolean
➭ Represents a logical value: true or false.

let isJavaScriptFun = true;
let isOver18 = false;

console.log(typeof isJavaScriptFun); // "boolean"
console.log(5 > 2); // true
console.log(10 === '10'); // false

✚ Undefined
➭ A variable is declared but not assigned a value.

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

✚ Null
➭ Represents the intentional absence of any value (empty or unknown).

let y = null;
console.log(y); // null
console.log(typeof y); // "object" (this is a quirk in JavaScript)

---

❐ Now write Non-Primitive type with deatils

Non-primitive data types are mutable and stored by reference..

✚ Object

let person = {
  name: 'John',
  age: 30,
  isStudent: false,
  hobbies: ['reading', 'gaming'],
  address: {
    city: 'New York',
    zip: '10001',
  },
};

console.log(person.name); // "John"
console.log(person.address.city); // "New York"
console.log(typeof person); // "object"

✚ Array

let fruits = ['Apple', 'Banana', 'Cherry'];
let mixedArray = [1, 'Hello', true, null, undefined];

console.log(fruits[0]); // "Apple"
console.log(mixedArray.length); // 5
console.log(typeof fruits); // "object" (arrays are objects in JS)

✚ Function
➭ Represents a logical value: true or false.

function greet(name) {
  return `Hello, ${name}!`;
}

let sum = function(a, b) {
  return a + b;
};

let multiply = (x, y) => x * y;

console.log(greet('Alice')); // "Hello, Alice!"
console.log(sum(3, 4)); // 7
console.log(multiply(5, 6)); // 30
console.log(typeof greet); // "function"