JavaScript Prototype Chain Explained

🏗️ Constructor Functions (Before Classes) Before class existed in JavaScript, developers used this: function User(name) { this.name = name; } User.prototype.sayHi = function () { console.log(this.name); }; const user1 = new User("Ahmed"); At first, it looks old… but it teaches something powerful. 💡 What’s really happening: user1 = { name: "Ahmed", __proto__: User.prototype } 🔥 Key idea: 👉 Methods are stored in prototype 👉 All instances share them So instead of duplicating functions in memory… ✔ One function ✔ Shared across all objects 🧠 Why this matters: This is the real foundation behind: Classes Inheritance Object behavior in JS 🚀 My takeaway: Constructor functions may look outdated… but they reveal how JavaScript actually works. And once you understand them, classes become much clearer. #JavaScript #OOP #WebDevelopment #Frontend

🔁 Understanding the forEach() loop in JavaScript The forEach() method is a simple way to iterate over arrays and perform an action for each element. 👉 Syntax: array.forEach((item, index) => { // logic here }); 👉 Example: const numbers = [1, 2, 3, 4]; numbers.forEach((num, index) => { console.log(`Index: ${index}, Value: ${num}`); }); 💡 Key Points: ✔️ Executes a function for each array element ✔️ Does not return a new array ✔️ Cannot break or use return to stop the loop If you need a return value, consider using map() instead. Small concepts like this build a strong JavaScript foundation 🚀 #JavaScript #WebDevelopment #Frontend #Coding #LearnToCode

🚨 JavaScript Gotcha: Objects as Keys?! Take a look at this 👇 const a = {}; const b = { key: 'b' }; const c = { key: 'c' }; a[b] = 123; a[c] = 456; console.log(a[b]); // ❓ 👉 What would you expect? 123 or 456? 💡 Actual Output: 456 🤯 Why does this happen? In JavaScript, object keys are always strings or symbols. So when you use an object as a key: a[b] → a["[object Object]"] a[c] → a["[object Object]"] Both b and c are converted into the same string: "[object Object]" ⚠️ That means: a[b] = 123 sets " [object Object] " → 123 a[c] = 456 overwrites it → 456 So finally: console.log(a[b]); // 456 🧠 Key Takeaways ✅ JavaScript implicitly stringifies object keys ✅ Different objects can collide into the same key ❌ Using objects as keys in plain objects is unsafe 🔥 Pro Tip If you want to use objects as keys, use a Map instead: const map = new Map(); map.set(b, 123); map.set(c, 456); console.log(map.get(b)); // 123 ✅ ✔️ Map preserves object identity ✔️ No unexpected overwrites 💬 Final Thought JavaScript often hides complexity behind simplicity. Understanding these small quirks is what separates a developer from an expert. #JavaScript #WebDevelopment #FrontendDevelopment #Programming #Coding #JavaScriptTips #JSConfusingParts #DevelopersLife #CodeNewbie #LearnToCode #SoftwareEngineering #TechTips #CodeQuality #CleanCode #100DaysOfCode #ProgrammingTips #DevCommunity #CodeChallenge #Debugging #JavaScriptDeveloper #MERNStack #FullStackDeveloper #ReactJS #NodeJS #WebDevTips #CodingLife

🚀 Day 15 — Currying in JavaScript (Explained Simply) Currying is a powerful concept that helps you write cleaner and more reusable functions 🚀 --- 🔍 What is Currying? 👉 Currying is when a function takes one argument at a time instead of multiple arguments at once. --- 📌 Normal Function function add(a, b) { return a + b; } add(2, 3); // 5 --- ⚡ Curried Version function add(a) { return function (b) { return a + b; }; } add(2)(3); // 5 --- 🧠 What’s happening? 👉 Instead of passing all arguments at once: We pass them step by step Each function returns another function --- 🚀 Why it matters ✔ Helps create reusable functions ✔ Useful for partial application ✔ Common in functional programming ✔ Seen in libraries like React, Redux --- 💡 Real-world use const multiply = (a) => (b) => a * b; const double = multiply(2); double(5); // 10 --- 🔥 One-line takeaway: 👉 “Currying breaks a function into smaller functions, each taking one argument.” --- #JavaScript #Currying #FunctionalProgramming #WebDevelopment #Frontend #100DaysOfCode

🚀 **Understanding JavaScript Variables Like a Pro (var vs let vs const)** If you're working with JavaScript, choosing the right keyword — `var`, `let`, or `const` — is more important than you think. Here’s a simple breakdown 👇 🔸 **var** * Function scoped * Can be re-declared * Can be re-assigned * Hoisted with `undefined` 👉 Mostly avoided in modern JavaScript due to unexpected behavior. --- 🔹 **let** * Block scoped * Cannot be re-declared in same scope * Can be re-assigned * Hoisted but in Temporal Dead Zone (TDZ) 👉 Best for variables that will change. --- 🔒 **const** * Block scoped * Cannot be re-declared * Cannot be re-assigned * Must be initialized at declaration 👉 Best for constants and safer code. --- 💡 **Pro Tip:** Always prefer `const` by default → use `let` when needed → avoid `var`. --- 📊 The attached diagram explains: * Scope hierarchy (Global → Function → Block) * Memory behavior * Key differences visually --- 🔥 Mastering these fundamentals helps you: ✔ Write cleaner code ✔ Avoid bugs ✔ Crack interviews easily --- #JavaScript #WebDevelopment #Frontend #Coding #Programming #Developers #LearnToCode #Tech #SoftwareEngineering #NodeJs #Json

I practiced different object patterns in JavaScript: literal objects, constructor functions with prototypes, classes, inheritance, and polymorphism. The best part was seeing how describe() adapts to each object type while still working smoothly inside the same loop. A effective way to visualize OOP behavior in JavaScript. #javascript #oop #backend #learninginpublic #codingjourney

💥 JavaScript: Where Logic Goes to Die 🤯 Think you understand JavaScript? These mind-bending quirks might change your mind… ⚡ Ever wondered: 👉 Why 9999999999999999 becomes 10000000000000000? 👉 Why 1 < 2 < 3 is true, but 3 > 2 > 1 is false? 👉 Why [] == false is true but [] === false is false? 🧠 Welcome to the world of: ✔️ Type Coercion ✔️ Floating Point Precision ✔️ Weird Comparisons ✔️ Truthy vs Falsy Values 💡 For example (from page 9): 0.1 + 0.2 === 0.3 → ❌ false Because JavaScript uses floating-point math, resulting in 0.30000000000000004 😂 And the classic: 'b' + 'a' + + 'a' + 'a' → “banana” (sort of 😅) 🚀 These aren’t bugs — they’re how JavaScript actually works! 📌 If you're a developer, mastering these quirks will save you from real-world bugs. 💬 Which one shocked you the most? #JavaScript #WebDevelopment #Coding #JS #Frontend #Programming #Developers #CodingLife

JavaScript: forEach() vs map() 🚀 A lot of developers confuse forEach() and map(), but they are not the same. Here’s the easy way to remember it: ✅ Use forEach() when you want to do something with each item • Logging data • Updating the UI • Calling an API • Running side effects It does not return a new array. ✅ Use map() when you want to transform each item • Changing values • Creating a new list • Rendering data in React It returns a new array. Simple rule: If you need a new array → use map() If you just need to loop through items → use forEach() Small choice, big impact on code clarity 💡 What do you use more often in your projects — forEach() or map()? 👇 #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #CodingTips #Programming #LearnJavaScript #100DaysOfCode #DevCommunity #SoftwareDevelopment #CodingLife #ReactDeveloper

Day 21/100 of JavaScript Today’s topic : Classes in JavaScript Classes in JavaScript are a cleaner syntax over prototype-based inheritance 🔹Basic class class Person { constructor(name) { this.name = name; } greet() { console.log(`Hello, ${this.name}`); } } const user = new Person("Apsar"); user.greet(); 🔹Inheritance class Student extends Person { constructor(name, course) { super(name); this.course = course; } study() { console.log(`${this.name} studies ${this.course}`); } } const s1 = new Student("Apsar", "JS"); s1.study(); 🔹Key points - "class" is syntactic sugar over prototypes. - "constructor" initializes objects. - "extends" enables inheritance. - "super()" calls parent constructor. #Day21 #JavaScript #100DaysOfCode

🚨 JavaScript Brain Teasers That Will Mess With Your Mind. ❓ console.log(["A"] + ["B"]) 👉 Output: "AB" ❓ let arr1 = [1,2,3] let arr2 = [4,5,6] console.log(arr1 + arr2) 👉 Output: "1,2,34,5,6" ❓ console.log(+null) 👉 Output: 0 ❓ console.log(+"hello") 👉 Output: NaN ❓ let arr = [1,2,3] let str = "1,2,3" console.log(arr == str) 👉 Output: true ❓ console.log(10 == [10]) 👉 Output: true ❓ console.log(10 == [[[[10]]]]) 👉 Output: true ❓ var fruits = ["orange", "mango", "banana"] var fruitObj = { ...fruits } console.log(fruitObj) 👉 Output: {0: "orange", 1: "mango", 2: "banana"} ❓ console.log(null ?? true) 👉 Output: true ❓ console.log(undefined ?? true) 👉 Output: true 🔥 Takeaway: Most of this comes down to type coercion and how JS internally converts values. #JavaScript #WebDevelopment #Coding #Frontend #Programming #JavaScriptTips #JavaScriptTricks #JSConcepts #LearnJavaScript #FrontendDevelopment #FrontendDeveloper #WebDevCommunity #CodingTips #CodeNewbie #ProgrammingLife #DeveloperCommunity #DevLife #CodeChallenge #DailyCoding #CodeWithMe #TechContent #SoftwareDevelopment #FullStackDeveloper #JSDevelopers #ProgrammingTips #CodeDaily #DevTips