Day 1: Variables, Data Types & Operators

📓✨ JavaScript Notes 🚀

---

🧱 Variables, Data Types & Operators 📚

📦 Variables 🗂️

Variable 📦 → a labeled box that stores a value that can be used later. 🏷️

You can create it with:

• let 🆕
• const 🔒
• var 📜

	var	let	const
Scope 🌍	Function-scoped ✅	Block-scoped 🧱	Block-scoped 🧱
Reassignable ✏️	✅	✅	❌
Redeclarable 🔁	✅	❌	❌

let score = 10;
score = 20;      // ✅ reassignable
// Block-scoped 🧱

const score = 20;
score = 10;       // ❌ can't — unreassignable 🔒
// Block-scoped 🧱

Block-scoped 🧱 → let and const only exist inside the { } they were created in.

Function-scoped 🏠 → means var also exists throughout the whole function { }, ignoring inner block boundaries. 🚪

function test() {
  if (true) {
    var leaked = "I escape the block!";                // 💨 function-scoped
    const trapped = "I stay inside the block!";        // 🔒 block-scoped
    let alsoTrapped = "I also stay inside the block!"; // 🔒 block-scoped

    // Inside the block: all three are visible
    console.log(leaked);      // "I escape the block!" ✅💨
    console.log(trapped);     // "I stay inside the block!" ✅🔒
    console.log(alsoTrapped); // "I also stay inside the block!" ✅🔒
  }

  // Outside the block, still inside the function
  console.log(leaked); // "I escape the block!" ✅💨

  // Uncomment ONE line at a time to see the error:
  // console.log(trapped);     // ReferenceError: trapped is not defined ❌🔒
  // console.log(alsoTrapped); // ReferenceError: alsoTrapped is not defined ❌🔒
}

test();

// Outside the function
// console.log(leaked); // ReferenceError: leaked is not defined ❌

N/B 📌⚠️

• let → can't be redeclared 🚫🔁
  • Can be reassigned ✏️✅
• const → can't be redeclared 🚫🔁
  • Can't be reassigned 🚫✏️

- Changing the *contents depends on the value: primitives are immutable 🧊, objects/arrays are mutable 🧩 *

const person = {
  name: "Brian",   // 👤
  age: 28          // 🎂
};

person.age = 29;        // ✅ works — mutating a property 🔧
person.name = "John";   // ✅ works too 🔧

const person = { name: "Brian", age: 28 };
person = { name: "John", age: 29 }; // ❌ TypeError: Assignment to constant variable 🔒

const fruits = ["apple", "grape"];  // 🍎🍇🍊
fruits.push("orange");
console.log(fruits); // ["apple", "grape", "orange"] 🧺✅

📦 Data Type 🗂️

Primitive/Immutable (Cannot be changed) 🧊🔒

• Strings 🔤, Number 🔢, Boolean ✅❌, undefined, null, Symbol , BigInt

let name = "Brian";          // String 🔤
let age = 22;                // Number 🔢 (integers and decimals, e.g. 3.14)
let isStudent = true;        // Boolean ✅❌ (true or false)
let nothingYet;              // undefined 🤷 (declared, but no value assigned)
let empty = null;            // null 🚫 (intentionally "no value")
let id = Symbol("id");       // Symbol 🆔 (a unique identifier)
let big = 9007199254740993n; // BigInt 🔟 (huge integers, note the n at the end)

Mutable 🧩🔓 — objects, Arrays, functions

let name = "Brian";        // 👤
let age = 22;              // 🎂
let arr = ["apple", "grape", "banana"];   // 🍎🍇🍌
functions -> function(){} -> function     // ⚙️

• objects → { } → object 📦
• arrays → [1,2,3] → arrays, technically an object 📋
• functions → function(){} → function ⚙️
• Map 🗺️

Special Quirks

• console.log(typeof NaN) → number ⚠️🤯
• console.log(typeof null) → object ⚠️🐛 (an old bug that was never fixed, to avoid breaking existing code 😅)

🎣 Hoisting 🪝

Hoisting → JavaScript registers declarations before running the code, so they behave as if lifted 🔼 to the top of their scope. Only the declaration is lifted, not the value assigned to it. 📌

console.log(a);   // undefined 🤷
var a = 5;

var a → hoisted ✅🔼

• Before assignment → undefined 🤷
• 5 → after the assignment line runs ✏️

console.log(b);   // ReferenceError 💥
let b = 5;

let/const...(Also hoisted 🔼 but stay in TDZ — Temporary Dead Zone ⛔)

---

🧮 Operators

1.### ➕ Arithmetic Operators

• + — add ➕
• - — subtract ➖
• * — multiply ✖️
• / — divide ➗
• % — remainder 🍕
• ** — exponent (power) ⚡

let power = 5 ** 2;   // 25
let total = 7 % 3;    // 1

2.### 📝 Assignment Operators

• = — assign 📥
• += -= *= /= — do the operation, then assign the result 🔁
• **= — raise to a power, then assign ⚡

let x = 10;
x += 2;   // 12
x **= 2;  // 144

3.### ⚖️ Comparison Operators

• == — loose equal (allows type conversion) 🤏
• === — strict equal (no type conversion) 🎯
• != — loose not-equal
• !== — strict not-equal
• > — greater than
• < — less than
• >= — greater than or equal
• <= — less than or equal

console.log(5 == "5");   // true  (values match after conversion)
console.log(5 === "5");  // false (types differ) ✅ prefer === in almost all cases

4.### 🔀 Logical Operators

• && — AND: both sides must be true 🤝
• || — OR: at least one side must be true 🔀
• ! — NOT: flips true/false 🔄

console.log(true && false); // false
console.log(true || false); // true
console.log(!true);         // false

5.### 🕳️ Null Coalescing ❓➡️
(if the name/thing is null or undefined use...)

?? → 🔄

let name = null;   // 🚫
let result = name ?? "Unknown";
console.log(result); // "Unknown" 🏷️

?? → use the right side only if the left is null or undefined
|| → use the right side if the left is any falsy value (0, "", false, ...)

let count = 0;
console.log(count || 10); // 10 ❌ (0 is falsy, so || skips it)
console.log(count ?? 10); // 0  ✅ (0 is not null/undefined, so ?? keeps it)

---

6.### 🔗 Optional Chaining ⛓️
(Allows you to safely access a property that might not exist 🛡️)

?. → if the object/thing is null or undefined, stop and return undefined instead of crashing

let person = {};

console.log(person.address.city);         // ❌ TypeError: Cannot read properties of undefined
console.log(person.address?.city);        // undefined 🤷
console.log(person?.address?.city);       // undefined 🤷‍♂️ (can chain as many `?.` as needed)

---

7.### ➕➖ Increment / Decrement Operators 🔼🔽
(increases/decreases a value by 1)

• ++ → increases value by 1 ⬆️
• -- → decreases value by 1 ⬇️

let count = 5;
count++;
console.log(count); // 6 🔢

---

8.### ❓ Ternary Operator 🎭
(short "if...then")

• ? → used to test condition → value 🧐
• : → if not → then... ➡️

let age = 90;
let result = age >= 60 ? "Grandfather" : "Not a Grandfather"; // 👴
console.log(result); // "Grandfather" 🎉

---

9.### 🔍 Type Operators 🕵️
(work with types → what a value's type is)

typeof → examine primitive and non-primitive types 🔬
instanceof → checks if an object is an instance of a particular constructor/class(ONLY on Non-Primitive types) 🏗️

let score = 10;    // 🎯
console.log(typeof score); // number 🔢

Non-primitive types: typeof can't tell arrays apart ⚛️

let numbers = [];
console.log(typeof numbers); // "object" (arrays are technically objects) 📋

let numbers = [];
console.log(numbers instanceof Array); // true ✅

---

10.### 🔢 Binary Operators 🧮⚡

• Bit → 0 or 1 🔘
• Computers 💻 represent numbers using Binary

Decimal (10 digits): 0123456789 🔟
Binary represents numbers using powers of 2 ⚡:

• 2⁰- 1
• 2¹- 2
• 2²- 4
• 2³- 8

-The bigger the decimal number, the more bits you need to represent it in binary.

-Start every bit position at 0 — your blank template, e.g. for 4 bits: 0 0 0 0 (positions worth 8, 4, 2, 1).

• 2⁰- 1- 0
• 2¹- 2- 0
• 2²- 4- 0
• 2³- 8- 0

"If we want to find which numbers make 5, we follow this steps —" 🧮-
**"5 is within 1 → 8 (and we want 4 digits)"
This is saying: 5 fits somewhere in the range covered by 4 bits (which spans 0 up to 15, using the positions 8-4-2-1). So we set up our blank template with 4 zero-slots:

8 4 2 1
0 0 0 0

Step through each position, largest to smallest:

8 → does 8 fit into 5? No → bit stays 0
4 → does 4 fit into 5? Yes → bit becomes 1, remainder = 5 − 4 = 1
2 → does 2 fit into 1? No → bit stays 0
1 → does 1 fit into 1? Yes → bit becomes 1, remainder = 1 − 1 = 0

"5 = 4 + 1"
That's the record of which powers of 2 actually got used — you only picked up a 1 at the 4-slot and the 1-slot, nothing else. Adding those back up (4 + 1 = 5) confirms you found the right combination.

"5 = 0101 ✅"
That's just reading the four slots left to right in the order you filled them:

8 → 0
4 → 1
2 → 0
1 → 1

→ 0101

6 = 4 + 2

• 8 → 0
• 4 → 1
• 2 → 1
• 1 → 0

6 = 0110 ✅

---

🔢 Bitwise Operators ⚡

• & — AND ➕
• | — OR 🔀
• ^ — XOR ⚡
• ~ — NOT 🔄
• << — left shift ⬅️
• >> — right shift ➡️
• >>> — zero-fill right shift ➡️0️⃣

& → AND (both bits must be 1) 🤝

Rule 📏

1 & 1 → 1  ✅
1 & 0 → 0  ❌
0 & 1 → 0  ❌
0 & 0 → 0  ❌

i.e 5 & 3

5 → 0101
3 → 0011
------
0001 → came out 1 🎯

---

| → OR (at least one must be 1) 🔀

Rule 📏

1 | 1 → 1  ✅
1 | 0 → 1  ✅
0 | 1 → 1  ✅
0 | 0 → 0  ❌

i.e 4 | 6

4 → 0100
6 → 0110
------
0110 → came out as 0110, same as 6 🎯

---

⚡ XOR 🎲

(bits must be different)

Rule 📏

1 ^ 1 = 0  🔁
1 ^ 0 = 1  🔀
0 ^ 1 = 1  🔀
0 ^ 0 = 0  🔁

i.e 5 ^ 3

5 → 0101
3 → 0011
------
6 → 0110  🎯

---

🚫 NOT 🔄

(bits are flipped to the opposite bit)

~5 → -6  🔃  (JS flips all 32 bits; only the last 4 are shown as 1010)

We use the method ~n = -(n+1) → easier than calculating it directly 💡🧠

---

⬅️ Left Shift << ⏪

(Shift every bit to the left and fill the empty spots on the right with 0. Each shift doubles the number.)

5 << 1 → 1010  # 10  🔟
5 << 2 → 10100 # 20  2️⃣0️⃣
5 << 3 → 101000 # 40 4️⃣0️⃣

What it means:

3 << 1 → 0011 → 0110 #6   6️⃣
3 << 2 → 0011 → 01100 #12 🔟➕2️⃣

💬 After the 1st left shift, the next shift you just add a zero and go on. ➕0️⃣

---

➡️ Right Shift >> ⏩

(You move every bit to the right — you do a reverse of left shift 🔄)

5 → 0101
3 → 0011

5 >> 1 → 0010 #2   2️⃣
3 >> 1 → 0001 #1   1️⃣

---

➡️➡️ >>> (also known as unsigned right shift) 0️⃣

• It always fills the left side with 0 ⬅️0️⃣
• It's a bit more advanced for the basics we are covering here 🎓

---

11.### 🔗 Comma Operator 🔢,🔢

Only the last value is kept. 🏆

let a = (1 + 2, 3 + 4);
console.log(a); // 7 🎯

---

12.### 🔤 String Operator ➕📝
The + operator can also concatenate strings. 🧷

let first = "Brian";
let last = "Kipchirchir";
let full = first + " " + last;
console.log(full); // "Brian Kipchirchir" 👤

---

Comments

[Jon Randy 🎖️]

One thing - the % operator is the 'remainder' operator, not 'modulus'. JS does not have a built-in modulus operation. Remainder and modulus operations are similar but NOT the same.

developer.mozilla.org/en-US/docs/W...

[Brian Kipchirchir]

Thank you sir for the correction.I appreciate that.