JavaScript null vs undefined: What's the difference

🔍 JavaScript Quirk: == vs === (this will surprise you) Most devs say: 👉 “Always use ===” But do you know WHY? 👇 console.log(0 == false); console.log("" == false); console.log(null == undefined); 💥 Output: true true true Wait… WHAT? 😳 Why this happens? Because == does type coercion 👉 It converts values before comparing Step by step: ✔ false → 0 ✔ "" → 0 So internally: 0 == 0 // true 👉 Special case: null == undefined → true (but NOT equal to anything else) Now compare with === 👇 console.log(0 === false); console.log("" === false); 💥 Output: false false Because === checks: ✔ Value ✔ Type No conversion. No surprises. Now the WEIRDEST one 🤯 console.log([] == false); 💥 Output: true Why? [] → "" → 0 false → 0 👉 0 == 0 Yes… JavaScript really did that 😅 💡 Takeaway: ✔ == tries to be “smart” (and fails) ✔ === is strict and predictable ✔ Use === by default 👉 "Always use ===" is not a rule… It’s survival advice. 🔁 Save this (you’ll forget this later) 💬 Comment "===" if this clicked ❤️ Like for more JS quirks #javascript #frontend #codingtips #webdevelopment #js #developer

🔍 JavaScript Bug You Might Have Seen (typeof null === "object") You write this: console.log(typeof null); // ? What do you expect? 👉 "null" But you get: 👉 "object" 🤯 Wait… null is NOT an object… So why is JavaScript saying this? This happens because of a historical bug in JavaScript 📌 What’s going on? In the early days of JavaScript: 👉 Values were stored in a low-level format 👉 Objects were identified by a specific type tag Unfortunately… 👉 null was given the same tag as objects So: typeof null === "object" 📌 Important point: 👉 This is NOT correct behavior 👉 But it was never fixed (for backward compatibility) 📌 So how do you check for null? ❌ Don’t do this: typeof value === "null" ✔ Do this instead: value === null 💡 Takeaway: ✔ typeof null returns "object" (bug) ✔ It’s a legacy behavior in JavaScript ✔ Always check null using === null 👉 Not everything in JavaScript makes sense… some things just stayed for history 😄 🔁 Save this before it confuses you again 💬 Comment “null” if this surprised you ❤️ Like for more JavaScript deep dives #javascript #frontend #codingtips #webdevelopment #js #developer

🔍 JavaScript Bug You Might Have Seen (typeof null === "object") You write this: console.log(typeof null); // ? What do you expect? 👉 "null" But you get: 👉 "object" 🤯 Wait… null is NOT an object… So why is JavaScript saying this? This happens because of a historical bug in JavaScript 📌 What’s going on? In the early days of JavaScript: 👉 Values were stored in a low-level format 👉 Objects were identified by a specific type tag Unfortunately… 👉 null was given the same tag as objects So: typeof null === "object" 📌 Important point: 👉 This is NOT correct behavior 👉 But it was never fixed (for backward compatibility) 📌 So how do you check for null? ❌ Don’t do this: typeof value === "null" ✔ Do this instead: value === null 💡 Takeaway: ✔ typeof null returns "object" (bug) ✔ It’s a legacy behavior in JavaScript ✔ Always check null using === null 👉 Not everything in JavaScript makes sense… some things just stayed for history 😄 🔁 Save this before it confuses you again 💬 Comment “null” if this surprised you ❤️ Like for more JavaScript deep dives #javascript #frontend #codingtips #webdevelopment #js #developer

🔍 JavaScript Quirk: Hoisting (var vs let vs const) JavaScript be like: 👉 “I know your variables… before you even write them” 😅 Let’s see the magic 👇 console.log(a); var a = 10; 💥 Output: undefined Wait… no error? 🤯 Why? Because `var` is **hoisted** 📌 What is Hoisting? Hoisting is JavaScript’s behavior of **moving variable and function declarations to the top of their scope before execution**. 👉 JS internally does this: var a; console.log(a); // undefined a = 10; So the variable exists… but has no value yet. Now try with `let` 👇 console.log(b); let b = 20; 💥 Output: ReferenceError ❌ Same with `const` 👇 console.log(c); const c = 30; 💥 Error again ❌ Why? Because `let` & `const` are also hoisted… BUT they live in something called: 👉 “Temporal Dead Zone” (TDZ) Translation: 🧠 “You can’t touch it before it’s declared” --- 💡 Simple Breakdown: ✔ `var` → hoisted + initialized as `undefined` ✔ `let` → hoisted but NOT initialized ✔ `const` → same as let (but must assign value) 💀 Real dev pain: Using `var`: 👉 “Why is this undefined?” Using `let`: 👉 “Why is this error?” JavaScript: 👉 “Figure it out yourself” 😎 💡 Takeaway: ✔ Avoid `var` (legacy behavior) ✔ Prefer `let` & `const` ✔ Understand hoisting = fewer bugs 👉 JS is not weird… You just need to know its secrets 😉 🔁 Save this before hoisting confuses you again 💬 Comment “TDZ” if this finally made sense ❤️ Like for more JS quirks #javascript #frontend #codingtips #webdevelopment #js #developer

🔍 JavaScript Behavior You Might Have Seen (Hoisting) You write this: console.log(a); var a = 10; You expect: 👉 ReferenceError But you get: 👉 undefined 🤯 Now try this: console.log(b); let b = 20; 👉 This time you get: ReferenceError ❌ Same with: console.log(c); const c = 30; 👉 Error again ❌ Now look at functions 👇 sayHi(); function sayHi() { console.log("Hello"); } 👉 This works ✅ But this doesn’t: sayHello(); const sayHello = function () { console.log("Hello"); }; 👉 ReferenceError ❌ Why different behavior? This happens because of Hoisting 📌 What is Hoisting? 👉 Hoisting is JavaScript’s behavior of moving declarations to the top of their scope before execution. 📌 What’s actually happening? ✔ var: var a; console.log(a); // undefined a = 10; 👉 Hoisted + initialized ✔ let / const: 👉 Hoisted but NOT initialized 👉 Access before declaration → ReferenceError 👉 (Temporal Dead Zone) ✔ Function declarations: function sayHi() {} 👉 Fully hoisted (can be called before definition) ✔ Function expressions: const sayHello = function () {} 👉 Behave like variables 👉 Not usable before declaration 💡 Takeaway: ✔ var → hoisted + initialized ✔ let / const → hoisted but restricted (TDZ) ✔ Function declarations → fully hoisted ✔ Function expressions → NOT hoisted like functions 👉 Same concept… different rules 🔁 Save this before hoisting confuses you again 💬 Comment “hoisting” if this made sense ❤️ Like for more JavaScript deep dives #javascript #frontend #codingtips #webdevelopment #js #developer

⚡ Day 7 — JavaScript Event Loop (Explained Simply) Ever wondered how JavaScript handles async tasks while being single-threaded? 🤔 That’s where the Event Loop comes in. --- 🧠 What is the Event Loop? 👉 The Event Loop manages execution of code, async tasks, and callbacks. --- 🔄 How it works: 1. Call Stack → Executes synchronous code 2. Web APIs → Handle async tasks (setTimeout, fetch, etc.) 3. Callback Queue / Microtask Queue → Stores callbacks 4. Event Loop → Moves tasks to the stack when it’s empty --- 🔍 Example: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); --- 📌 Output: Start End Promise Timeout --- 🧠 Why? 👉 Microtasks (Promises) run before macrotasks (setTimeout) --- 🔥 One-line takeaway: 👉 “Event Loop decides what runs next in async JavaScript.” --- If you're learning async JS, understanding this will change how you debug forever. #JavaScript #EventLoop #WebDevelopment #Frontend #100DaysOfCode 🚀

Day 5: The Shortest JavaScript Program — What happens when you write NOTHING? 📄✨ Today I learned that even if you create a totally empty .js file and run it in a browser, JavaScript is already working hard behind the scenes. 🕵️♂️ The "Shortest Program" If your file has zero lines of code, the JavaScript Engine still does three major things: Creates a Global Execution Context. Creates a window object (in browsers). Creates the this keyword. 🪟 What is window? The window is a massive object created by the JS engine that contains all the built-in methods and properties (like setTimeout, localStorage, or console) provided by the browser environment. 🧭 The this Keyword At the global level, JavaScript sets this to point directly to the window object. 👉 Proof: If you type console.log(this === window) in an empty file, it returns true! 🌐 The Global Space I also explored the Global Space—which is any code you write outside of a function. If you declare var x = 10; in the global space, it automatically gets attached to the window object. You can access it using x, window.x, or this.x. They all point to the same memory location! 💡 Key Takeaway: Anything not inside a function sits in the Global Memory Space. Keeping this space clean is vital for performance and avoiding variable name collisions in large apps! It’s fascinating to see that even before we write our first line of code, JavaScript has already set up the entire "universe" for us to work in. #JavaScript #WebDevelopment #NamasteJavaScript #ExecutionContext #WindowObject #JSFundamentals #CodingJourney #FrontendEngineer

🔍 JavaScript Bug You Might Have Seen (setTimeout vs Promise) You write this code: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); What do you expect? Start Timeout Promise End But actual output is: Start End Promise Timeout This happens because of the Event Loop 📌 What is the Event Loop? 👉 The event loop is the mechanism that decides which task runs next in JavaScript’s asynchronous execution. 📌 Priority order (very important): 1️⃣ Call Stack (synchronous code) 2️⃣ Microtask Queue 3️⃣ Macrotask Queue 📌 What’s inside each queue? 👉 Microtask Queue (HIGH priority): ✔ Promise.then / catch / finally ✔ queueMicrotask ✔ MutationObserver 👉 Macrotask Queue (LOWER priority): ✔ setTimeout ✔ setInterval ✔ setImmediate ✔ I/O tasks ✔ UI rendering events Execution flow: ✔ Step 1: Run all synchronous code 👉 Start → End ✔ Step 2: Execute ALL microtasks 👉 Promise ✔ Step 3: Execute macrotasks 👉 setTimeout So final order becomes: Start End Promise Timeout 💡 Takeaway: ✔ Microtasks run before macrotasks ✔ Promises > setTimeout ✔ setTimeout(fn, 0) is NOT immediate 👉 Understand queues = master async JS 🔁 Save this for later 💬 Comment “event loop” if this made sense ❤️ Like for more JavaScript deep dives #javascript #frontend #codingtips #webdevelopment #js #developer

🔍 JavaScript Behavior You Might Have Seen (Array methods: mutate vs not) You write this: const arr = [1, 2, 3]; const newArr = arr.push(4); console.log(arr); // ? console.log(newArr); // ? You expect: 👉 newArr to be a new array But you get: 👉 arr → [1, 2, 3, 4] 👉 newArr → 4 This happens because of mutating array methods 📌 What does “mutate” mean? 👉 It means changing the original array In this case: 👉 push() modifies arr directly 👉 And returns the new length (not a new array) Now look at this 👇 const arr = [1, 2, 3]; const newArr = arr.map(x => x * 2); console.log(arr); // ? console.log(newArr); // ? 👉 arr → [1, 2, 3] 👉 newArr → [2, 4, 6] This is a non-mutating method 👉 It creates a new array 👉 Original array stays unchanged 📌 Common mutating methods: ✔ push ✔ pop ✔ shift ✔ unshift ✔ splice ✔ sort ✔ reverse 📌 Common non-mutating methods: ✔ map ✔ filter ✔ slice ✔ concat ✔ reduce 📌 Real problem: You think you’re creating a new array… 👉 But you accidentally modify the original one 💡 Takeaway: ✔ Mutating methods change original array ✔ Non-mutating methods return a new array ✔ Always be careful when updating state (especially in React) 👉 One wrong method can break your logic silently 🔁 Save this for later 💬 Comment “array” if this made sense ❤️ Like for more JavaScript deep dives #javascript #frontend #codingtips #webdevelopment #js #developer

🚀 JavaScript Output Prediction Challenge What will be the output? 🤔 💡 Important Behaviour: 👉 JavaScript executes code line by line 👉 The very first line throws the following: ❌ ReferenceError: a is not defined So in reality, the programme stops immediately and nothing else runs. 📌 Now, let’s understand what would happen inside the function (ignoring the first error): 👉 Before execution, JS does Hoisting (memory creation phase) Inside the function: var a → hoisted and initialized as undefined let b → hoisted but kept in Temporal Dead Zone (TDZ) (not accessible yet) 👉 Execution phase: "1:" → undefined (Because 'a' exists but not assigned yet) "2:" → ❌ ReferenceError (because b is in TDZ) After assignment: a = 10 b = 20 "3:" → 10 "4:" → 20 🔥 Core Concepts: JS has 2 phases → Memory Creation + execution. var → hoisted + usable as undefined let/const → hoisted but blocked by TDZ 💬 If you got this right, your JS fundamentals are solid 👇 #JavaScript #Hoisting #Frontend #CodingChallenge #WebDevelopment