JavaScript Truthy & Falsy Values That Break Developers

DSA + JavaScript Journey Two incredibly important concepts today — one that completes my recursion understanding, and one that unlocks real-world JavaScript development! 🧠 ───────────────────────── 📌 DSA: Space Complexity in Recursion ───────────────────────── Most people calculate space complexity wrong for recursive functions. Today I learned exactly how to do it right! ❌ Common mistake: Adding up space from every node in the recursion tree ✅ Correct approach: Space complexity = maximum height (deepest path) of the recursion tree Why? Because of how the call stack actually works: → Each function call is pushed onto the call stack → When a call returns, it is popped off immediately → Only one branch is active at any point in time → The peak stack size = the longest path from root to base case 📊 Example — Fibonacci f(6): → f(6) → f(5) → f(4) → f(3) → f(2) → f(1) = 6 calls deep → Once f(1) returns and pops, f(2) calls f(0) — still just 1 branch active → Maximum stack size = 6 = O(n) space complexity 💡 Key insight: The call stack grows and shrinks as functions are pushed and popped. The maximum number of frames simultaneously on the stack = the deepest path = space complexity. This understanding is critical for analysing Merge Sort, Quick Sort, and all multi-branch recursive algorithms coming up next! ───────────────────────── 📌 JavaScript Revision: this Keyword & OOP Concepts ───────────────────────── Today's JS session covered one of the most confusing yet most powerful parts of the language! ⚙️ 🔑 The this Keyword → In global context → this refers to the window object → Inside a regular function → this depends on how the function is called → Inside an arrow function → this is inherited from the surrounding scope (lexical this) → Inside a method → this refers to the object that owns the method → With new keyword → this refers to the newly created object 🏗️ OOP in JavaScript → Objects & Classes — blueprint for creating objects with class syntax → Constructor — initialises object properties when created with new → Encapsulation — bundling data and methods together inside a class → Inheritance — extends keyword lets a child class inherit from a parent → super() — calls the parent class constructor → Polymorphism — same method name, different behaviour in child classes → Prototypes & prototype chain — how JS objects inherit from each other under the hood The moment it all clicked: this inside a class method always refers to the instance — that's how objects know their own data! 🤯 ───────────────────────── 🙏 Thank you, Rohit Negi Sir! ───────────────────────── Space complexity in recursion, the call stack mechanism.. From recursion to OOP — the foundations are getting rock solid. The grind continues 🔥 #DSA #Recursion #SpaceComplexity #JavaScript #OOP #ObjectOrientedProgramming #ThisKeyword #LearnToCode #100DaysOfCode #CodingJourney #WebDevelopment #Programming #CallStack

🚨 JavaScript Objects Confused Me… Until I Understood This One Thing When I started learning JavaScript, I thought objects were simple. Then I saw terms like object literals, constructor functions, "this", prototypes, "Object.create()"… And suddenly my brain went: "Wait… what is actually happening here?" 🤯 But once the puzzle clicked, everything started making sense. Here’s the simplest way I now understand JavaScript objects 👇 --- 🔹 1️⃣ Object Literals — The simplest way to create objects const user = { name: "Alex", age: 25 }; Clean. Simple. And used most of the time. --- 🔹 2️⃣ Constructor Functions — Blueprint for multiple objects function User(name, age) { this.name = name; this.age = age; } const u1 = new User("Alex", 25); Here, "this" refers to the new object being created. Think of it like a template for creating many similar objects 🧩 --- 🔹 3️⃣ Prototypes — JavaScript’s hidden superpower Instead of copying methods into every object, JavaScript shares them through prototypes. User.prototype.greet = function() { console.log("Hello!"); }; Now every "User" object can access "greet()" without duplicating memory 🚀 --- 🔹 4️⃣ Object.create() — Direct control over prototypes const person = { greet() { console.log("Hi!"); } }; const user = Object.create(person); This creates an object that inherits directly from another object. Simple concept. Very powerful in practice. --- 🔹 5️⃣ The "let" & "const" confusion with arrays and objects This confused me for a long time 👇 const arr = [1,2,3]; arr.push(4); // ✅ Works But this fails: const arr = [1,2,3]; arr = [4,5,6]; // ❌ Error Why? Because "const" protects the reference, not the content. Objects and arrays are reference types, so their internal values can change. But primitive values cannot: const a = 10; a = 20; // ❌ Error --- 🔥 Once you understand this: • Objects store references • Prototypes enable shared behavior • "this" depends on how a function is called JavaScript suddenly becomes much easier to reason about. And honestly… much more fun to work with. 🚀 --- 💬 If you're learning JavaScript: What concept confused you the most at first? Let’s help each other grow 👇 --- #javascript #webdevelopment #frontenddevelopment #softwaredevelopment #coding #programming #developer #100daysofcode #learnjavascript #codinglife #techlearning

🚀 Deep JavaScript Concepts Most Developers Don’t Know (But Should!) If you’re already comfortable with closures, promises, and async/await… here are some next-level JavaScript concepts that separate good devs from great ones 👇 🧠 1. Hidden Classes & Shapes (V8 Internals) JavaScript objects are dynamic, but engines like V8 JavaScript engine optimize them using hidden classes. 👉 Objects with the same structure share the same internal layout 👉 Changing structure later (adding/removing props) can deoptimize performance 🔄 2. Event Loop Internals (Microtask vs Macrotask) Not just “event loop” — the priority system matters: 👉 Microtasks (Promises, queueMicrotask) 👉 Macrotasks (setTimeout, setInterval) setTimeout(() => console.log("Macrotask"), 0); Promise.resolve().then(() => console.log("Microtask")); Output: Microtask Macrotask 👉 Microtasks always run before the next macrotask 🧩 3. Deoptimization (Deopt) — Silent Performance Killer Modern engines optimize your code using JIT, but certain patterns force them to fall back: ❌ Changing object shapes ❌ Using "delete" on objects ❌ Accessing out-of-bounds arrays ❌ Mixing types (number + string) 👉 This is called deoptimization, and it can silently slow your app 🧬 4. Garbage Collection (GC) Mechanics JavaScript uses automatic memory management, but not all objects are equal: 👉 Young Generation (fast cleanup) 👉 Old Generation (slower, long-lived objects) Engines like V8 JavaScript engine use Mark-and-Sweep + Generational GC 💡 Memory leaks still happen if references are retained! 🧮 5. Tagged Integers (SMI Optimization) Small integers are stored differently than large numbers: 👉 Fast path for small integers (SMIs) 👉 Large numbers → heap allocation This impacts performance in tight loops ⚡ 🔍 7. Prototype Chain Lookup Optimization Property access doesn’t just check the object: 👉 It walks the prototype chain 👉 Engines cache these lookups too const obj = {}; obj.toString(); // comes from prototype ⚙️ 8. JIT Compilation (Just-In-Time) JavaScript is not just interpreted anymore: 👉 Parsed → Compiled → Optimized at runtime 👉 Engines like Node.js use JIT for speed 💡 Hot code paths get highly optimized 🧨 9. Closures & Memory Retention Closures are powerful but can cause hidden memory issues: function outer() { let bigData = new Array(1000000); return function inner() { console.log("Using closure"); }; } 👉 "bigData" stays in memory because of closure reference! 🔐 10. Temporal Dead Zone (TDZ) "let" and "const" behave differently than "var": console.log(a); // ReferenceError let a = 10; 👉 Variables exist but are not accessible before initialization 🔥 Final Thought Most developers write JavaScript… Few understand how it actually runs under the hood. That difference? 👉 Performance 👉 Scalability 👉 Senior-level thinking #JavaScript #V8 #NodeJS #WebPerformance #SoftwareEngineering #TechDeepDive

💡 JavaScript Tip: 3 Advanced NaN Tricks Most Developers Don’t Know NaN stands for "Not-a-Number". It represents the result of an invalid numeric operation in JavaScript. Even though its name suggests otherwise, JavaScript still treats NaN as a number type. Here are 3 advanced NaN behaviors that many developers don’t know: -------------------------------------------------- 1️⃣ Object.is() Can Correctly Compare NaN Normally, NaN is not equal to itself: NaN === NaN // false However, Object.is() can correctly compare it: Object.is(NaN, NaN) // true Example: console.log(Object.is(NaN, NaN)); // true This is useful when you need precise value comparisons. -------------------------------------------------- 2️⃣ NaN Propagates Through Calculations Once NaN appears in a calculation, it spreads through the entire result. Example: let value = NaN; console.log(value + 5); // NaN console.log(value * 10); // NaN console.log(Math.sqrt(value)); // NaN This means a single invalid number can break an entire calculation chain. Best practice: if (Number.isNaN(value)) { console.error("Invalid number detected"); } -------------------------------------------------- 3️⃣ NaN in Arrays: includes() vs indexOf() Arrays treat NaN differently depending on the method used. Example: const arr = [NaN, 1, 2]; console.log(arr.includes(NaN)); // true console.log(arr.indexOf(NaN)); // -1 Why? - indexOf() uses strict equality (===) - includes() uses SameValueZero comparison, which correctly handles NaN. -------------------------------------------------- ✅ Best Ways to Detect NaN Use these methods: Number.isNaN(value) Object.is(value, NaN) Avoid using isNaN() because it converts values to numbers first, which can cause confusing results. -------------------------------------------------- Small JavaScript details like this can help prevent hidden bugs in real-world applications. #JavaScript #WebDevelopment #Frontend #Programming #SoftwareEngineering #almaskhan #JavaScript #fblifestyle

✨ 𝗪𝗿𝗶𝘁𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝘁𝗿𝗶𝗻𝗴𝘀 𝗟𝗶𝗸𝗲 𝗔 𝗛𝘂𝗺𝗮𝗻 ⤵️  Template Literals in JavaScript: Write Strings Like a Human ⚡  🔗 𝗥𝗲𝗮𝗱 𝗵𝗲𝗿𝗲: https://lnkd.in/d_HhAEsM  𝗧𝗼𝗽𝗶𝗰𝘀 𝗰𝗼𝘃𝗲𝗿𝗲𝗱 ✍🏻:   ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺   ⇢ Why string concatenation becomes messy in real apps   ⇢ Template literals — the modern way to write strings   ⇢ Embedding variables & expressions using ${}   ⇢ Multi-line strings without \n headaches   ⇢ Before vs After — readability transformation   ⇢ Real-world use cases: HTML, logs, queries, error messages   ⇢ Tagged templates (advanced but powerful concept)   ⇢ How interpolation works under the hood   ⇢ Tradeoffs & common mistakes developers make   ⇢ Writing cleaner, more readable JavaScript  Thanks Hitesh Choudhary Sir & Piyush Garg Sir, and the amazing Chai Aur Code community 🙌  #ChaiAurCode #JavaScript #WebDevelopment #Frontend #Programming #CleanCode #Hashnode

JavaScript Was Hard I’d hear from so many people that JavaScript is confusing because of its inconsistencies. But once I learned these concepts, it became so much easier to me : 𝟭. 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀 𝗮𝗻𝗱 𝗗𝗮𝘁𝗮 𝗧𝘆𝗽𝗲𝘀:  -> Declaration (`var`, `let`, `const`)  -> Primitive data types (strings, numbers, booleans, null, undefined)  -> Complex data types (arrays, objects, functions)  -> Type coercion and conversion 𝟮. 𝗢𝗽𝗲𝗿𝗮𝘁𝗼𝗿𝘀 𝗮𝗻𝗱 𝗘𝘅𝗽𝗿𝗲𝘀𝘀𝗶𝗼𝗻𝘀:  -> Arithmetic operators (+, -, *, /, %)  -> Assignment operators (=, +=, -=, *=, /=, %=)  -> Comparison operators (==, ===, !=, !==, <, >, <=, >=)  -> Logical operators (&&, || , !)  -> Ternary operator (conditional operator) 𝟯. 𝗖𝗼𝗻𝘁𝗿𝗼𝗹 𝗙𝗹𝗼𝘄:  -> Conditional statements (`if`, `else if`, `else`)  -> Switch statement  -> Loops (`for`, `while`, `do-while`)  -> Break and continue statements 𝟰. 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀:  -> Function declaration and expression  -> Arrow functions  -> Parameters and arguments  -> Return statement  -> Scope (global scope, function scope, block scope)  -> Closures  -> Callback functions 𝟱. 𝗔𝗿𝗿𝗮𝘆𝘀 𝗮𝗻𝗱 𝗢𝗯𝗷𝗲𝗰𝘁𝘀:  -> Creation and initialization  -> Accessing and modifying elements  -> Array methods (push, pop, shift, unshift, splice, slice, concat, etc.)  -> Object properties and methods  -> JSON (JavaScript Object Notation) 𝟲. 𝗖𝗹𝗮𝘀𝘀𝗲𝘀 𝗮𝗻𝗱 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲𝘀:  -> Class syntax (constructor, methods, static methods)  -> Inheritance  -> Prototypal inheritance  -> Object.create() and Object.setPrototypeOf() 𝟳. 𝗘𝗿𝗿𝗼𝗿 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴:  -> Try...catch statement  -> Throwing errors  -> Error objects (Error, SyntaxError, TypeError, etc.)  -> Error handling best practices 𝟴. 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁:  -> Callbacks  -> Promises (creation, chaining, error handling)  -> Async/await syntax  -> Fetch API  -> setTimeout() and setInterval() 𝟵. 𝗗𝗢𝗠 𝗠𝗮𝗻𝗶𝗽𝘂𝗹𝗮𝘁𝗶𝗼𝗻:  -> Selecting DOM elements  -> Modifying element properties and attributes  -> Creating and removing elements  -> Traversing the DOM 𝟭𝟬. 𝗘𝘃𝗲𝗻𝘁 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴:  -> Adding event listeners  -> Event objects  -> Event propagation (bubbling and capturing)  -> Event delegation 𝟭𝟭. 𝗠𝗼𝗱𝘂𝗹𝗲𝘀 𝗮𝗻𝗱 𝗠𝗼𝗱𝘂𝗹𝗮𝗿𝗶𝘇𝗮𝘁𝗶𝗼𝗻:  -> ES6 modules (import/export)  -> CommonJS modules (require/module.exports)  -> Module bundlers (Webpack, Rollup) 𝟭𝟮. 𝗕𝗿𝗼𝘄𝘀𝗲𝗿 𝗖𝗼𝗺𝗽𝗮𝘁𝗶𝗯𝗶𝗹𝗶𝘁𝘆 𝗮𝗻𝗱 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲:  -> Cross-browser compatibility  -> Performance optimization techniques  -> Minification and code splitting  -> Lazy loading If you're struggling with JavaScript, understanding these topics can make the journey a lot easier! I've Created MERN Stack Guide for beginners to experienced,  𝗚𝗲𝘁 𝘁𝗵𝗲 𝗚𝘂𝗶𝗱𝗲 𝗵𝗲𝗿𝗲 - https://lnkd.in/d6EdjzCs Follow Mohit Decodes on YouTube: https://lnkd.in/dEqvkECV Keep Coding, Keep Building!

🚀 JavaScript Simplified Series — Day 23 A website without interaction is boring… 😴 No clicks No input No response Just static content ❌ 🤔 Real Question How does a website know… 👉 When you click a button? 👉 When you type in an input? 👉 When you scroll? This is where Events come in. 🔥 What is an Event? An event is something that happens in the browser 👉 Click 👉 Hover 👉 Key press 👉 Scroll JavaScript listens to these events and reacts. 🔹 Adding an Event Listener let button = document.querySelector("button") button.addEventListener("click", function() { console.log("Button Clicked") }) 👉 When user clicks → function runs 🔹 Common Events // Click button.addEventListener("click", fn) // Input input.addEventListener("input", fn) // Key press document.addEventListener("keydown", fn) 🔹 Real Example let btn = document.querySelector("button") let heading = document.querySelector("h1") btn.addEventListener("click", function() { heading.innerText = "You clicked the button!" }) 👉 Click → text change 😎 🔹 Event Object JavaScript automatically gives event details button.addEventListener("click", function(event) { console.log(event) }) 📌 You get info like: 👉 Mouse position 👉 Target element 👉 Key pressed 🔥 Real Life Example Think of a doorbell 🔔 You press → sound comes 👉 Action → Reaction Same in JS: User action → Event → Response 🔥 Simple Summary Event → user action addEventListener → listen to event function → response 💡 Programming Rule Websites react to users. Events make that possible. If you want to learn JavaScript in a simple and practical way, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling (Next Post) Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🤔 Ever seen code like const { name: fullName } = user or const [first, ...rest] = arr and thought: “Okay... I kind of know what it does, but why is this so common?” That is destructuring and aliasing in JavaScript. 🧠 JavaScript interview question What is destructuring / aliasing in JavaScript, and how is it useful? ✅ Short answer Destructuring lets you extract values from arrays or objects into variables in a shorter, cleaner way. Aliasing means renaming a destructured property while extracting it. That helps you: write less repetitive code set default values pull only what you need avoid variable name conflicts make function parameters easier to read 🔍 Array destructuring With arrays, destructuring is based on position: const rgb = [255, 200, 100]; const [red, green, blue] = rgb; You can skip items or provide defaults: const coords = [10]; const [x = 0, y = 0, z = 0] = coords; // x = 10, y = 0, z = 0 And you can collect the rest: const numbers = [1, 2, 3, 4, 5]; const [first, ...rest] = numbers; // first = 1, rest = [2, 3, 4, 5] 📦 Object destructuring With objects, destructuring is based on property names, not position: const user = { id: 123, name: "Alice", age: 25 }; const { id, name } = user; You can also set fallback values: const { nickname = "Anon" } = user; 🏷️ What aliasing means Aliasing is just renaming during destructuring: const person = { firstName: "Bob", "last-name": "Smith" }; const { firstName: first, "last-name": last } = person; // first = "Bob", last = "Smith" This is useful when: you already have a variable with the same name the original property name is unclear the property name is not convenient to use directly 🧩 Destructuring in function parameters A very common real-world pattern: function printUser({ name: fullName, age }) { console.log(`${fullName} is ${age} years old.`); } Instead of writing user.name and user.age inside the function, you extract what you need immediately. That makes the function signature more self-explanatory. 🌳 Nested destructuring Destructuring can also go deeper into nested data: const data = { user: { id: 42, preferences: { theme: "dark", languages: ["en", "es", "fr"], }, }, }; const { user: { id: userId, preferences: { theme, languages: [primaryLang, ...otherLangs], }, }, } = data; ⚠️ Common thing people mix up Destructuring extracts values. It does not clone deeply. So if the extracted value is an object or array, you are still dealing with references. 💡 Why it is useful in real projects Cleaner code with less repetition Better defaults when data is missing Easier-to-read function parameters Safer naming with aliasing Very handy when working with API responses, props, and config objects That is why destructuring shows up everywhere in React, Node.js, and modern JavaScript codebases. #javascript #webdevelopment #frontend #reactjs #typescript