Master JavaScript: Prototypes, Closures, Memoization & More

Day 71 – Deep Dive into JavaScript Functions & Advanced Concepts Today I explored one of the most powerful building blocks in JavaScript — Functions. Functions help us write reusable, modular, and organized code. But today wasn’t just about basic functions — I went deeper into advanced function concepts. 🔹 Function Declaration Created using the function keyword: function add(a, b){ return a + b; } ✔️ Hoisted ✔️ Can be called before declaration ✔️ Globally accessible 🔹 Function Expression (Anonymous Function) const xs = function(){ console.log("Suha Digitech"); } ✔️ Assigned to a variable ✔️ Not hoisted like normal functions ✔️ Cannot call before definition 🔹 Constructor Function const sum = new Function("a", "b", "return a + b"); ✔️ Created using new Function() ✔️ Executes in a single line ✔️ Parameters passed as strings 🔹 Function Scope 🔸 Global Scope – Accessible everywhere 🔸 Local Scope – Accessible only inside the function Understanding scope prevents unexpected errors and improves code structure. 🔹 Rest Parameters function add(a, ...b){ return b; } ✔️ Collects remaining arguments into an array ✔️ Useful for handling dynamic inputs 🔹 Default Parameters function add(a, b = 10){ return a + b; } ✔️ Uses default value if argument not passed 🔹 Callback Function Passing one function as an argument to another: function display(value){ return value; } display(add(10, 30)); ✔️ Enables reusable and flexible logic ✔️ Core concept for async programming 🔹 Arrow Functions const add = (a, b) => a + b; ✔️ Short syntax ✔️ Clean and modern ✔️ Implicit return for single-line expressions 🔹 Higher Order Functions 🔸 map() Returns a new array after transforming every element. 🔸 filter() Returns elements that satisfy a condition. 🔸 reduce() Reduces the array into a single value. These are powerful tools for writing clean and functional-style JavaScript. 🔹 Objects & this Keyword Created object methods and understood how this refers to the current object. var obj = { fname: "Suha", lname: "Digitech", fullName: function(){ return this.fname + " " + this.lname; } } 🔹 call() & bind() Methods ✔️ call() – Immediately invokes a function with a different object context ✔️ bind() – Creates a new function with bound context These concepts helped me understand how JavaScript handles execution context internally. 💡 Key Takeaway: Functions are not just reusable blocks — they are the backbone of advanced JavaScript concepts like callbacks, higher-order functions, and object-oriented behavior. #JavaScript #WebDevelopment #FrontendDevelopment #Programming #FunctionalProgramming

If Hoisting Confuses You, Your JavaScript Fundamentals Aren’t Strong Ask a JavaScript developer one simple question: “What is hoisting?” Most people answer confidently: “JavaScript moves variables and functions to the top.” And that’s exactly how you know… they don’t really understand JavaScript. Because JavaScript never moves your code. The Hoisting Illusion Hoisting isn’t magic. It’s not code rearrangement. It’s not a compiler trick. Hoisting is a side effect of how JavaScript creates memory before execution. That difference matters. A lot. What Actually Happens (The Real Story) Before any JavaScript code runs, the engine does two phases: 1️⃣ Memory Creation Phase Allocates memory for variables and functions Function declarations get fully stored Variables declared with var get undefined let and const are placed in the Temporal Dead Zone (TDZ) 2️⃣ Execution Phase Code runs line by line Values are assigned Functions are invoked No code moves. Only memory is prepared. Why Fake Confidence Falls Apart People who memorize hoisting say things like: “let is not hoisted” “Functions are hoisted but variables are not” Both are wrong. Everything is hoisted. The difference is how it’s initialized. That’s why this works: console.log(a); // undefined var a = 10; But this crashes: console.log(b); // ReferenceError let b = 10; Same hoisting. Different memory rules. Production Reality Check Hoisting bugs don’t show up in tutorials. They show up as: undefined values in production Weird behavior after refactors “Works on localhost, breaks in prod” And the dev says: “JavaScript is weird.” No. Your understanding was shallow. The Real Test of JavaScript Skill If someone can clearly explain: Why var behaves differently What TDZ actually is Why function declarations work before definition They don’t just know JavaScript. They understand it. The Interview Trap Hoisting is dangerous because: Beginners memorize rules Intermediates repeat slogans Seniors explain execution context Interviewers know this. Hoisting questions aren’t about syntax — they’re about mental models. If you understand hoisting, you understand: Execution context Scope Closures (Indirectly) the event loop Miss hoisting, and everything else is shaky. Final Thought Hoisting doesn’t expose beginners. It exposes pretenders. If you want real JavaScript confidence: Stop memorizing rules. Start understanding the engine. That’s where real senior devs are made. #javascript #webdevelopment #frontend #react #programming #softwareengineering

📌 Just finished reading the JavaScript documentation on Prototypes — here's what I actually understood 🧵 I spent time going through the official MDN docs on JavaScript prototypes, and wanted to share here— 🔺 What is a Prototype? Every object in JavaScript has a hidden internal link to another object — called its prototype. Think of it as a "parent" object that the current object can borrow properties and methods from. When you try to access a property on an object and it's not found directly on that object, JavaScript automatically looks up to its prototype. If it's not there either, it goes up again — until it reaches null. This chain of lookups is called the prototype chain. 🔺 Why does this exist? JavaScript needed a way to share behavior across multiple objects without duplicating code or wasting memory. Instead of giving every object its own copy of a method, you define the method once on a prototype — and all objects linked to that prototype can use it. This is memory-efficient and keeps things organized. 🔺 How it works — a simple example: function Person(name) { this.name = name; } // Adding a method to the prototype Person.prototype.greet = function () { console.log("Hi, I'm " + this.name); }; const alice = new Person("Alice"); const bob = new Person("Bob"); alice.greet(); // Hi, I'm Alice bob.greet(); // Hi, I'm Bob // Both share the SAME greet function — not two separate copies console.log(alice.greet === bob.greet); // true Here, greet lives on Person.prototype — not on alice or bob individually. JavaScript finds it by walking up the prototype chain. 🔺 When do you actually use this in real projects? Constructor functions — before ES6 classes, this was the standard way to create objects with shared behavior. Shared methods — placing utility methods on a prototype so all instances access one definition. Memory efficiency — especially relevant when creating many instances of the same object type. Understanding built-ins — methods like .map(), .filter(), .toString() all live on prototype objects (Array.prototype, Object.prototype, etc.). 🔺 One thing that tripped me up: The difference between an object's prototype (accessed via Object.getPrototypeOf(obj)) and the prototype property on a constructor function (Person.prototype) — they're related but not the same thing. Worth reading carefully. 🔺 My question to other developers: Do you think understanding prototypes is still essential for modern JavaScript development, or is it more of a "good to know" concept now? Would love to hear how others think about this. 👇 #JavaScript #WebDevelopment #Frontend #LearnInPublic #JS

🚀 Day 14 of JavaScript Daily Series JavaScript Template Literals — Backticks, ${}, Multi-line Strings (Super Easy Hinglish + Real-Life Examples) Aaj hum JavaScript ka one of the most modern & powerful features seekhenge → 👉 Template Literals (introduced in ES6) Yeh code ko 2x clean, readable aur easy bana dete hain! 💡 What Are Template Literals? (Simple English) Template literals are special strings written using backticks (``) They allow: ✔ Multi-line strings ✔ Variables inside strings ✔ Cleaner formatting ✔ Better readability 🧠 Hinglish Explanation Pehle hum strings ko " " quotes se likhte the, aur variables ko add karne ke liye + + laga-laga ke hath dukh jaata tha. Template literals bolte hain: “Ritesh bhai, tension mat lo… sab easy bana dete hain!” 😄 🧱 1️⃣ Backticks (``) — The New & Better String Format Example: let name = "Ritesh"; let msg = `Hello ${name}, welcome to JavaScript!`; console.log(msg); ✔ No + + ✔ Automatic spacing ✔ Clean and readable 🔁 2️⃣ ${} — Variable / Expression Insert Karna Aap backticks ke andar kisi bhi variable ko easily daal sakte ho: let price = 499; console.log(`Your final price is ₹${price}`); Expressions bhi kaam karte hain: console.log(`2 + 2 = ${2 + 2}`); 📜 3️⃣ Multi-line Strings — No Need for \n Pehle hum: let msg = "Hello\nWorld"; Ab: let msg = ` This is line 1 This is line 2 This is line 3 `; ✔ Best for UI text ✔ Emails ✔ Multi-line messages ✔ Readable content 📱 Real-Life Example — Instagram Notification Message let user = "AapanRasoi"; let followers = 1200; let message = ` 🔔 New Activity! Hey ${user}, you gained ${followers} followers today! Keep growing! 🚀 `; console.log(message); Perfect for: ✔ Notification messages ✔ Email templates ✔ Chat messages ✔ JSX-style strings 🧠 Why Template Literals Are a Game-Changer? ✔ No messy string concatenation ✔ More readable ✔ Easy variable insertion ✔ Perfect for dynamic UI ✔ Used heavily in React, Node.js, APIs, everything! 🎯 Quick Summary FeatureUseBackticksCleaner strings${}Insert variables & expressionsMulti-lineCreate structured text easily

Tell me the different types of functions in JavaScript ! That was the question my interviewer asked and honestly, it sounded simple at first. Most of us immediately think: 👉 Normal functions 👉 Arrow functions But I knew this question was not about syntax… it was about how deeply I understand JavaScript as a language. So instead of stopping at definitions, I turned it into a conversation about how functions shape JavaScript architecture. I started simple. 👉 Regular (Named) Functions The classic `function greet() {}`. Great for reusability, hoisting, and clear stack traces. 👉 Function Expressions `const greet = function() {}` I explained how these give us more control and are often used in callbacks and closures. Then I leveled up. 👉 Arrow Functions `() => {}` I didn’t just say “shorter syntax.” I explained lexical `this`, why it matters in React, event handlers, and async logic. That’s when the discussion got interesting. 👉 Higher-Order Functions Functions that take other functions as arguments or return them. I connected this to real code: `map`, `filter`, `reduce`, middleware, and even custom hooks in React. Now we were talking about functional programming patterns, not just functions. 👉 Callback Functions Instead of defining it plainly, I explained how callbacks evolved from ➡️ synchronous callbacks ➡️ async callbacks ➡️ promises ➡️ async/await Showing how JavaScript handles asynchronous behavior through functions. Then I added depth. 👉 Pure Functions Functions with no side effects and predictable output. I tied this to state management, reducers, and performance optimization. 👉 IIFE (Immediately Invoked Function Expressions) I mentioned how they were used earlier for scope isolation before ES6 modules. 👉 Currying Functions Functions returning functions: `add(2)(3)` I explained how currying helps in partial application and reusable logic, especially in utility libraries. 👉 Unary Functions Functions that accept only one argument. I connected this to how methods like `map` can behave unexpectedly when extra parameters are passed — a subtle but impressive detail. If you're preparing for interviews, don’t just memorize definitions. For more insightful content checkout below: 🟦 𝑳𝒊𝒏𝒌𝒆𝒅𝑰𝒏 - https://lnkd.in/dwi3tV83 ⬛ 𝑮𝒊𝒕𝑯𝒖𝒃 - https://lnkd.in/dkW958Tj 🟥 𝒀𝒐𝒖𝑻𝒖𝒃𝒆 - https://lnkd.in/dDig2j75 or Priya Frontend Vlogz 🔷 𝐓𝐰𝐢𝐭𝐭𝐞𝐫 - https://lnkd.in/dyfEuJNt #frontend #javascript #react #reactjs #html #css #typescript #es6 #interviewquestions #interview #interviewpreparation

🚨 JavaScript vs. TypeScript: Why is Promise<void> Everywhere? If you’ve moved from JavaScript to TypeScript in Playwright, this is usually the first thing that looks "cluttered." The JavaScript Way: async enterUsername(page, value) { await page.fill('#username', value); } Simple. Clean. No extra noise. The TypeScript Way: async enterUsername(page: Page, value: string): Promise<void> { await page.fill('#username', value); } 🧠 The Big Question I often hear this from automation engineers moving to TS: "Why are we writing Promise<void> everywhere? I thought we only used Promises when waiting for something complex, like a popup or a new tab?" It’s a great question. Here is the "Aha!" moment: In both JS and TS, an async function always returns a Promise. That’s just how the language works under the hood. • In JavaScript: The return type is implicit. It hides in the background. • In TypeScript: The return type is explicit. You are defining the "contract" of the function. 💡 Think of it as a Labeling System TypeScript requires you to declare what every function returns. Since async functions are "promises of future values," we just need to label what those values are: • Promise<void> ➔ The function is async, but it returns nothing (like a click). • Promise<string> ➔ The function is async and will return a string (like getting text). • Promise<boolean> ➔ The function is async and will return a true/false (like checking visibility). 🚀 Why bother with the extra typing? It’s not just about following rules. By being explicit, your framework becomes significantly more stable: 1. IntelliSense: Your IDE (VS Code) knows exactly what to suggest next. 2. Early Bug Detection: TS will scream at you if you try to use a void result as if it were a string. 3. Readability: Anyone reading your code knows exactly what to expect without digging into the implementation. The Takeaway: TypeScript isn't adding new complexity; it’s just making the implicit visible. 🔍 Once you get used to it, you'll find it’s like having a high-quality GPS for your automation framework—it’s much harder to get lost. #Playwright #TypeScript #SDET #TestAutomation #SoftwareTesting #QA

I'm not a JavaScript master. But I still build custom functionality for clients. How? AI + basic understanding of the language. Here's the truth nobody tells you: You don't need to be an expert to solve real problems. You just need to: → Understand basic concepts → Know how to read/modify code → Ask AI the right questions The rest? AI fills in the gaps. Real examples I've built recently: 𝟭. 𝗖𝗮𝘁𝗲𝗴𝗼𝗿𝘆 𝗰𝗹𝗶𝗰𝗸 → 𝗦𝗲𝗿𝘃𝗶𝗰𝗲 𝗽𝗮𝗴𝗲 𝘄𝗶𝘁𝗵 𝗮𝗰𝘁𝗶𝘃𝗲 𝘁𝗮𝗯 Client wanted: Click a category box on homepage, land on service page with that specific tab open. My process: Knew I needed click events and URL parameters Asked AI: "How to pass category ID on click and activate matching tab on another page?" Got the code. Understood what each part does. Implemented it. Worked perfectly. 𝟮. 𝗣𝗿𝗼𝗱𝘂𝗰𝘁 𝗰𝗼𝗺𝗽𝗮𝗿𝗶𝘀𝗼𝗻 𝘄𝗶𝗱𝗴𝗲𝘁 (𝗔𝗺𝗮𝘇𝗼𝗻-𝘀𝘁𝘆𝗹𝗲) Client needed: Checkboxes on product cards. Select 2+ products, compare button appears, opens side-by-side comparison. My process: Understood: Need checkboxes, conditional button display, modal window Asked AI: "Create product comparison with checkboxes and modal in vanilla JS" Modified the output to match their WooCommerce setup Client loved it. 𝟯. 𝗖𝘂𝘀𝘁𝗼𝗺 𝘀𝗹𝗶𝗱𝗲𝗿𝘀, 𝘁𝗮𝗯𝘀, 𝗮𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻𝘀 Libraries exist. But sometimes you need something specific. AI writes the base. I customize it to fit the design and behavior the client wants. The key difference: I understand WHAT the code is doing. Not memorizing syntax. Not writing everything from scratch. But knowing: How event listeners work What DOM manipulation means How to debug when something breaks When to use vanilla JS vs jQuery This is how modern development works. You don't need to be a coding genius anymore. You need to: Understand fundamentals Know how to communicate with AI Read and modify code intelligently "But isn't that cheating?" No. Using a calculator isn't cheating in accounting. Using Figma templates isn't cheating in design. Using AI isn't cheating in development. It's just a better tool. What you DO need to learn: ✓ Basic JavaScript concepts (variables, functions, events) ✓ How to select DOM elements ✓ Basic debugging skills ✓ How to read documentation Without this foundation? AI gives you code you can't understand or fix. With this foundation? AI becomes a superpower. 𝗠𝘆 𝘄𝗼𝗿𝗸𝗳𝗹𝗼𝘄 𝗻𝗼𝘄: Understand what client needs Break it into logical steps Ask AI for code structure Review, understand, and customize Test and debug Deliver Faster than learning everything from scratch. Better results than using generic plugins. Do you use AI in your development workflow or still doing everything manually? #JavaScript #WebDevelopment #AI #WordPress #CodingTips

🚀 Class Expressions in JavaScript — A Powerful Yet Underrated Feature Most developers know about class declarations in JavaScript… But fewer truly leverage Class Expressions to write cleaner, more dynamic code. Let’s break it down 👇 --- 📌 What is a Class Expression? A Class Expression is a way to define a class inside an expression rather than as a standalone declaration. Unlike traditional class declarations, class expressions can be: ✔ Assigned to variables ✔ Passed as arguments ✔ Created dynamically ✔ Defined conditionally They offer more flexibility in structuring your logic. --- 🏷 Named Class Expression A Named Class Expression includes an internal class name. 🔹 That internal name is only accessible inside the class itself 🔹 Helpful for debugging 🔹 Useful for self-referencing logic It improves stack traces and clarity in complex applications. --- 👤 Anonymous Class Expression An Anonymous Class Expression does not include an internal name. 🔹 Cleaner and shorter 🔹 Common in modern JavaScript patterns 🔹 Ideal when internal referencing isn’t needed Most developers use this form in practical scenarios. --- 🎯 Where Are Class Expressions Useful? Class expressions shine when you need: ✨ Scoped class definitions ✨ Dynamic behavior ✨ Encapsulation ✨ Factory patterns ✨ Flexible architecture They’re especially helpful in modular and component-based systems. --- 🔄 Passing a Class as an Argument In JavaScript, classes are first-class citizens. This means you can: 👉 Pass a class into a function 👉 Return a class from a function 👉 Store it in variables This is extremely powerful for: ✔ Dependency injection ✔ Plugin systems ✔ Strategy patterns ✔ Reusable architecture --- ⚡ Conditional Class Definition One of the biggest advantages: You can define different classes based on runtime conditions. This makes your code adaptable for: 🔹 Feature flags 🔹 Environment-based behavior 🔹 Config-driven systems Clean. Flexible. Scalable. --- 🤔 When Should You Use Class Expressions? Use them when: ✅ The class is needed only in a limited scope ✅ You need dynamic or conditional class creation ✅ You want to pass classes around like data ✅ You’re implementing advanced design patterns Avoid them when: ❌ You need a globally accessible, clearly structured top-level class --- 💡 Final Thought Class expressions give you architectural flexibility. They may not be used every day — but when needed, they are incredibly powerful. Mastering them makes you think like a JavaScript architect, not just a coder. --- If this helped you level up your JavaScript knowledge, React 👍 and share with your network 🚀 #JavaScript #WebDevelopment #Frontend #SoftwareEngineering #Programming #Developers #Tech #CleanCode #CodingTips