JavaScript Prototypes Simplified

👽 Understanding Higher-Order Functions in JavaScript One of the most powerful features in JavaScript is Higher-Order Functions (HOFs). 💤 A Higher-Order Function is a function that: Takes another function as an argument, OR Returns a function as its result This concept is the backbone of modern JavaScript patterns like functional programming and clean, reusable code. 🔹 Example 1: Function as Argument function greet(name) { return "Hello " + name; } function processUser(callback) { console.log(callback("Amina")); } processUser(greet); 🔹 Example 2: Function Returning Function function multiplier(factor) { return function(number) { return number * factor; }; } const double = multiplier(2); console.log(double(5)); // 10 👁️🗨️ Why Higher-Order Functions matter: Promote code reusability Enable clean and modular design Power built-in methods like map(), filter(), reduce() Make code more declarative and readable Mastering HOFs is a key step toward becoming confident in JavaScript and understanding real-world frameworks. #JavaScript #WebDevelopment #Coding #FunctionalProgramming #FrontendDevelopment

💡 Short Circuiting in JavaScript — Explained Simply In JavaScript, I came across a powerful concept called Short Circuiting. 👉 In simple words: JavaScript stops checking further values as soon as the result is decided. 🔹 OR (||) Operator It returns the first TRUE (truthy) value it finds. Example: console.log(false || "Javascript"); ✔️ Output: "Javascript" Another example: console.log(false || 10 || 7 || 15); ✔️ Output: 10 👉 Why? Because JavaScript finds 10 (true value) and stops checking further values 🔹 My Practice Code 👨💻 console.log("Short circuit in OR operator"); console.log(false || "Javascript"); console.log(false || "OR Operator"); console.log(false || 3); console.log(false || 10 || 7 || 15 || 20); // short circuit in OR operator console.log(false || "Javascript - client side scripting language" || "HTML - structure of web page" || "CSS - Cascading Style Sheet" || "Bootstrap - Framework of CSS"); 🔹 Recap: ✔️ JavaScript returns the first truthy value ✔️ It does not check remaining values once result is found ✔️ This makes code faster and efficient 📌 In simple words: Short Circuiting = JavaScript stops early when result is found #JavaScript #WebDevelopment #Coding #Learning #Frontend #100DaysOfCode

💡 var, let, const in JavaScript — easy? Not really 😅 If you think you understand them… try predicting these 👇 for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } Output: 3 3 3 for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } Output: 0 1 2 🤯 Same code… different output. Why? ⸻ 🔍 The difference: 👉 var is function-scoped • One shared i • All callbacks reference same variable • Final value = 3 👉 let is block-scoped • New i created for each iteration • Each callback gets its own copy 💬 Lesson learned: JavaScript doesn’t just execute code… It follows rules that aren’t always obvious. ⸻ 🚀 Pro Tip: 👉 Prefer let and const over var 👉 Avoid var in modern JavaScript ⸻ #JavaScript #Frontend #WebDevelopment #CodingInterview #JSConcepts #Developers

🧠 JavaScript Hoisting Explained Simply Hoisting is one of those JavaScript concepts that can feel confusing — especially when your code behaves unexpectedly. Here’s a simple way to understand it 👇 🔹 What is Hoisting? Hoisting means JavaScript moves declarations to the top of their scope before execution. But there’s a catch 👇 🔹 Example with var console.log(a); var a = 10; Output: undefined Why? Because JavaScript internally treats it like: var a; console.log(a); a = 10; 🔹 What about let and const? console.log(b); let b = 20; This throws a ReferenceError. Because "let" and "const" are hoisted too — but they stay in a “temporal dead zone” until initialized. 🔹 Function hoisting Functions are fully hoisted: sayHello(); function sayHello() { console.log("Hello"); } This works because the function is available before execution. 🔹 Key takeaway • "var" → hoisted with "undefined" • "let/const" → hoisted but not initialized • functions → fully hoisted 💡 One thing I’ve learned: Many “weird” JavaScript bugs come from not understanding hoisting properly. Curious to hear from other developers 👇 Did hoisting ever confuse you when you started learning JavaScript? #javascript #frontenddevelopment #webdevelopment #reactjs #softwareengineering #developers

🔍 JavaScript Concept You Might Have Heard (First-Class Functions/Citizens) You write this: function greet() { return "Hello"; } const sayHi = greet; console.log(sayHi()); // ? 👉 Output: Hello Wait… 👉 We assigned a function to a variable? 👉 And it still works? Now look at this 👇 function greet() { return "Hello"; } function execute(fn) { return fn(); } console.log(execute(greet)); // ? 👉 Passing function as argument? 👉 And calling it later? This is why JavaScript functions are called First-Class Functions 📌 What does that mean? 👉 Functions are treated like any other value 📌 What can you do with them? ✔ Assign to variables ✔ Pass as arguments ✔ Return from another function ✔ Store inside objects/arrays Example 👇 function outer() { return function () { return "Inside function"; }; } console.log(outer()()); // ? 👉 Function returning another function 📌 Why do we need this? 👉 This is the foundation of: ✔ Callbacks ✔ Closures ✔ Functional programming ✔ Event handling 💡 Takeaway: ✔ Functions are just values in JavaScript ✔ You can pass them, store them, return them ✔ That’s why they are “first-class citizens” 👉 If you understand this, you understand half of JavaScript 🔁 Save this for later 💬 Comment “function” if this clicked ❤️ Like for more JavaScript deep dives #javascript #frontend #codingtips #webdevelopment #js #developer

🔥 var vs let vs const in JavaScript (Explained Simply) Understanding the difference between `var`, `let`, and `const` is essential for writing clean and bug-free JavaScript code. Let’s break it down 👇 🔹 1️⃣ var #Example var name = "Amit"; var name = "Rahul"; // Re-declaration allowed ✅ Function scoped ✅ Can be re-declared and updated ⚠️ Hoisted with `undefined` ❌ Can cause unexpected bugs 👉 Avoid using `var` in modern JavaScript. 🔹 2️⃣ let #Example let age = 25; age = 30; // Update allowed ✅ Block scoped ❌ Cannot be re-declared in same scope ✅ Can be updated ✅ Safer than `var` 👉 Use `let` when the value needs to change. 🔹 3️⃣ const #Example const pi = 3.14; // pi = 3.1415; ❌ Error ✅ Block scoped ❌ Cannot be re-declared ❌ Cannot be updated ✅ Must initialize at declaration 💡 For objects/arrays → You can modify properties, but not reassign the reference. 🚀 Best Practice ✔️ Use `const` by default ✔️ Use `let` when reassignment is required ❌ Avoid `var` Writing cleaner code starts with choosing the right variable declaration. #JavaScript #WebDevelopment #Frontend #Programming #CodingTips #Developers

🧠 JavaScript Scope & Lexical Scope Explained Simply Many JavaScript concepts like closures, hoisting, and this become much easier once you understand scope. Here’s a simple way to think about it 👇 🔹 What is Scope? Scope determines where variables are accessible in your code. There are mainly 3 types: • Global Scope • Function Scope • Block Scope (let, const) 🔹 Example let globalVar = "I am global"; function test() { let localVar = "I am local"; console.log(globalVar); // accessible } console.log(localVar); // ❌ error 🔹 What is Lexical Scope? Lexical scope means that scope is determined by where variables are written in the code, not how functions are called. Example 👇 function outer() { let name = "Frontend Dev"; function inner() { console.log(name); } inner(); } inner() can access name because it is defined inside outer(). 🔹 Why this matters Understanding scope helps you: ✅ avoid bugs ✅ understand closures ✅ write predictable code 💡 One thing I’ve learned: Most “confusing” JavaScript behavior becomes clear when you understand how scope works. Curious to hear from other developers 👇 Which JavaScript concept clicked for you only after learning scope? #javascript #frontenddevelopment #webdevelopment #reactjs #softwareengineering #developers

🧠 Day 13 — Class vs Prototype in JavaScript (Simplified) JavaScript has both Classes and Prototypes — but are they different? 🤔 --- 🔍 The Truth 👉 JavaScript is prototype-based 👉 class is just syntactic sugar over prototypes --- 📌 Using Class (Modern JS) class Person { constructor(name) { this.name = name; } greet() { console.log(`Hello ${this.name}`); } } const user = new Person("John"); user.greet(); // Hello John --- 📌 Using Prototype (Core JS) function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log(`Hello ${this.name}`); }; const user = new Person("John"); user.greet(); // Hello John --- 🧠 What’s happening? 👉 Both approaches: Create objects Share methods via prototype Work almost the same under the hood --- ⚖️ Key Difference ✔ Class → Cleaner, easier syntax ✔ Prototype → Core JavaScript mechanism --- 🚀 Why it matters ✔ Helps you understand how JS works internally ✔ Useful in interviews ✔ Makes debugging easier --- 💡 One-line takeaway: 👉 “Classes are just a cleaner way to work with prototypes.” --- #JavaScript #Prototypes #Classes #WebDevelopment #Frontend #100DaysOfCode

🚨 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

Sharing properties across objects in JavaScript doesn’t have to be complicated 👀 Imagine you’re working on a large codebase. Multiple modules… similar functions… and suddenly you realize you’re repeating the same logic everywhere. Yeah, goodbye DRY principle 😅 This is where Object.prototype (and prototype chain) becomes really useful. In simple terms, every object in JavaScript can access properties from its prototype. So instead of redefining the same function on every object, you can define it once — and all instances can use it. Think of it like a shared layer that every object can access. That’s why when you inspect an object in the console and see __proto__/[prototypes], those are the shared properties coming from the prototype. Why this matters: - More memory efficient (no duplicate functions per object) - Keeps behavior consistent across instances - Cleaner when multiple objects need the same capability But… there are tradeoffs. If the prototype chain gets too deep, JavaScript has to walk through each level to find a property and that can impact performance. Also, modifying global prototypes can be risky if not handled carefully. Still, when used properly, this pattern is very powerful. I also tried a simple example — implementing my own map function using prototype (super basic, but fun to explore). Do you still use prototypes directly, or mostly rely on classes these days? 👀 #javascript #fundamental #prototype