Muhammad Abdullah’s Post

🧠 How JavaScript Handles Memory (Simple Explanation) Most developers write JavaScript daily… but very few understand how memory works behind the scenes. And this is exactly why memory leaks happen. 👀 ✅ 1️⃣ Memory Allocation When you create variables, JavaScript automatically allocates memory: let name = "Angular"; let user = { id: 1 }; let nums = [1, 2, 3]; JavaScript stores them in memory without you doing anything. ✅ 2️⃣ Stack vs Heap (Very Important) 🟢 Stack Memory Stores primitive values: number string boolean null undefined Fast and simple. let a = 10; let b = a; b = 20; console.log(a); // 10 Because stack stores copy of value. 🔵 Heap Memory Stores objects and arrays. let obj1 = { name: "Test" }; let obj2 = obj1; obj2.name = "Frontend Dev"; console.log(obj1.name); // Frontend Dev 😬 Because heap stores reference, not copy. ✅ 3️⃣ Garbage Collection (GC) JavaScript automatically removes unused memory. If a value is not reachable, it gets deleted. Example: let user = { name: "Ali" }; user = null; Now the object becomes unreachable → GC removes it. ⚠️ Common Cause of Memory Leaks 🚨 Unremoved Event Listeners button.addEventListener("click", () => console.log("clicked")); If you never remove it, memory keeps growing. 🎯 Why This Matters (Especially in Angular) Understanding memory helps you: ✔ Avoid memory leaks ✔ Improve performance ✔ Write scalable applications ✔ Handle subscriptions properly (RxJS) 💡 Rule for Angular developers: Always unsubscribe or use async pipe. #JavaScript #Angular #Frontend #WebDevelopment #Performance #Programming

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 prototypes clicked for me the moment I stopped thinking about copying and started thinking about linking. Here's the mental model that made it stick 👇 🔹 The core idea Every object in JavaScript has a hidden link to another object — its prototype. When you access a property, JS doesn't just look at the object itself. It walks the chain: Check the object Not found? Check its prototype Still not found? Check the prototype's prototype Keep going until null That's the prototype chain. Simple as that. 🔹 See it in action jsconst user = { name: "Aman" }; const admin = { isAdmin: true }; admin.__proto__ = user; console.log(admin.name); // "Aman" ✅ admin doesn't have name — but JS finds it one level up. 🔹 Why constructor functions use this jsfunction User(name) { this.name = name; } User.prototype.sayHi = function () { console.log(`Hi, I am ${this.name}`); }; Every User instance shares one sayHi method. Not copied — linked. That's free memory efficiency, built into the language. 🔹 Two things worth keeping straight prototype → a property on constructor functions __proto__ → the actual link on any object The modern, cleaner way to set that link: jsconst obj = Object.create(user); 🔹 Why bother understanding this? Because it shows up everywhere — class syntax, frameworks, unexpected undefined bugs, performance decisions. Prototypes aren't a quirk. They are the inheritance model. One line to remember: JS doesn't copy properties. It searches a chain of linked objects. #JavaScript #Frontend #WebDevelopment #Programming

✨ 𝗪𝗿𝗶𝘁𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝘁𝗿𝗶𝗻𝗴𝘀 𝗟𝗶𝗸𝗲 𝗔 𝗛𝘂𝗺𝗮𝗻 ⤵️  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

🚀 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

Most developers think inheritance in JavaScript works like traditional OOP. It doesn’t. And that confusion leads to messy, over-engineered code. JavaScript uses prototypal inheritance — not classical inheritance. 👉 Objects inherit directly from other objects. 💡 There are 3 main ways inheritance works in JavaScript: 🔹 1. Prototypal Inheritance (Core Concept) const animal = { speak() { console.log("Makes a sound"); } }; const dog = Object.create(animal); dog.bark = function () { console.log("Bark"); }; dog.speak(); // inherited dog.bark(); // own method ✔ Simple ✔ Flexible ✔ Native to JS 🔹 2. Constructor Function Inheritance function Animal(name) { this.name = name; } Animal.prototype.speak = function () { console.log(this.name + " makes noise"); }; function Dog(name) { Animal.call(this, name); // inherit properties } Dog.prototype = Object.create(Animal.prototype); const d = new Dog("Tommy"); d.speak(); ✔ More structured ✔ Used in older codebases 🔹 3. Class-based Inheritance (ES6) class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + " makes noise"); } } class Dog extends Animal { bark() { console.log("Bark"); } } const dog = new Dog("Rocky"); dog.speak(); dog.bark(); ✔ Cleaner syntax ✔ Easier to read ❗ Still uses prototypes under the hood ⚡ The truth most people miss: Even with classes… 👉 JavaScript is STILL prototype-based. Classes are just syntactic sugar. 🧠 The real upgrade: Stop thinking: “Which syntax should I use?” Start thinking: “How does inheritance actually work under the hood?” Because once you understand prototypes… You don’t just write code— you understand it. What confused you more in JavaScript—closures, promises, or prototypes? 👇 #JavaScript #WebDevelopment #Programming #Frontend #Coding #SoftwareEngineering

🔁 JavaScript Tip: Convert Object → Array Easily! Working with objects in JavaScript? Sometimes you need to transform them into arrays for better handling — especially in loops, UI rendering, or API data processing. Here are 3 powerful methods you should know: ✅ Object.keys() → Get all keys ✅ Object.values() → Get all values ✅ Object.entries() → Get key-value pairs 💡 Example: const zoo = { lion: "🦁", panda: "🐼" }; 👉 "Object.keys(zoo)" → ['lion', 'panda'] 👉 "Object.values(zoo)" → ['🦁', '🐼'] 👉 "Object.entries(zoo)" → [['lion', '🦁'], ['panda', '🐼']] 🚀 These methods are super useful in React, API handling, and data transformations. #JavaScript #WebDevelopment #Frontend #ReactJS #CodingTips #Developers #100DaysOfCode

I reckon there'll be more and more of these pure JS frameworks coming. JavaScript is back in the spotlight, baby. TypeScript's added complexity is a useless overhead for AI coding assistants. Just use the right tools for the job, do not over-engineer just KISS 😘