Vadim 🦄 A.’s Post

🚀 JavaScript Output Challenge — Can You Guess Them All? Let’s test your core JavaScript knowledge — Event Loop, Closures, Hoisting, and Shallow Copy. 👇 Try to guess the output before running the code. 🧩 Question 1 — Event Loop + Promises + setTimeout console.log(1) const promise = new Promise((resolve) => { console.log(2) resolve() console.log(3) }) console.log(4) promise.then(() => { console.log(5) }).then(() => { console.log(6) }) console.log(7) setTimeout(() => { console.log(8) }, 10) setTimeout(() => { console.log(9) }, 0) 👉 What is the exact order of logs? 🧩 Question 2 — Spread Operator (Shallow Copy) let person = { name: "Ram", age: 29, marks: { math: 21, physics: 25 } } let person2 = { ...person } person2.name = "Shyam" person2.age = 21 person2.marks.math = 50 console.log(person, person2) 👉 Will both objects change or only person2? 🧩 Question 3 — Closure Inside Loop function test(arr, x) { var a, c = 0; for (var i = 0; i < arr.length; i++) { if (i === x) { a = function () { console.log(i, c++) } } } return a; } var t = test([1,2,3,4,5,6,7,8,9], 5) t(); t(); t(); 👉 What gets printed each time and why? 🧩 Question 4 — Hoisting + Scope Confusion var a = 10; var b = 100; function test() { a = 30; var a; console.log(a); b = 200; console.log(b); b = 300; } test(); console.log(a); console.log(b); 👉 What are the final values of a and b? 💬 Drop your answers in the comments (no cheating 😄). I’ll share detailed explanations in the next post! #JavaScript #FrontendDevelopment #WebDevelopment #InterviewPrep #JSChallenge #100DaysOfCode

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/dauSXK5R Follow Ashish Misal Codes on IG: https://lnkd.in/dJqGy5_g Keep Coding, Keep Building!

Most production JavaScript bugs don’t happen because we forgot syntax. They happen because 𝘄𝗲 𝗳𝗼𝗿𝗴𝗼𝘁 𝗵𝗼𝘄 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗿𝗲𝗮𝗹𝗹𝘆 𝗯𝗲𝗵𝗮𝘃𝗲𝘀. These are the exact patterns behind many late-night debugging sessions: 1) 𝗠𝘂𝘁𝗮𝘁𝗶𝗼𝗻 𝘆𝗼𝘂 𝗱𝗶𝗱𝗻’𝘁 𝗲𝘅𝗽𝗲𝗰𝘁 const arr = [3,1,2]; arr.sort(); // mutates original 🐜 Bug: UI or state shows unexpected order somewhere else. Why: sort() changes the original array. ✅ Fix const sorted = [...arr].sort((a, b) => a - b); 2) 𝙎𝙥𝙖𝙧𝙨𝙚 𝙖𝙧𝙧𝙖𝙮 𝙩𝙧𝙖𝙥 let arr = [1,2,3]; delete arr[1]; arr.map((x) => x*2); // skips the hole 🐜 Bug: Loop runs fewer times than array length. Why: delete creates a hole, array methods skip it. ✅ Fix arr.splice(1,1); 3) 𝙊𝙗𝙟𝙚𝙘𝙩𝙨 𝙖𝙨 𝙠𝙚𝙮𝙨 let obj = {}; obj[{}] = "A"; obj[{}] = "B"; console.log(obj); 🐜 Bug: Cache, memoization, or map overwrites values. Why: Object keys become "[object Object]". ✅ Fix const map = new Map(); map.set({}, "A"); 4) 𝙁𝙡𝙤𝙖𝙩𝙞𝙣𝙜 𝙥𝙤𝙞𝙣𝙩 𝙢𝙖𝙩𝙝 𝙞𝙨𝙨𝙪𝙚 0.1 + 0.2 === 0.3 // false 🐜 Bug: Totals, prices, charts slightly off. Why: Floating point precision. ✅ Fix Math.abs((0.1 + 0.2) - 0.3) < Number.EPSILON or, may use libraries like decimal.js or, may use integers (cents instead of dollars) 5) 𝙩𝙝𝙞𝙨 𝙡𝙤𝙨𝙩 𝙞𝙣𝙨𝙞𝙙𝙚 𝙘𝙖𝙡𝙡𝙗𝙖𝙘𝙠 const user = { name: "abc", greet() { return function(){ console.log(this.name) } } }; const newUser = user.greet(); newUser(); // undefined 🐜 Bug: Class methods / handlers lose context. ✅ Fix greet() { return () => console.log(this.name); } Because regular functions have their own 'this' depending on the call site. 6) 𝙀𝙫𝙚𝙣𝙩 𝙡𝙤𝙤𝙥 𝙨𝙪𝙧𝙥𝙧𝙞𝙨𝙚 setTimeout(()=>console.log("timeout"),0); Promise.resolve().then(()=>console.log("promise")); 🐜 Bug: Race conditions in API calls, loaders, state updates. Why: Promises (microtasks) run before timeouts. 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆: When apps break, it’s not just about React or Node. It’s: • mutation • references • coercion • event loop timing If you truly understand how JavaScript behaves, Debugging becomes reasoning . #JavaScript #WebDevelopment #FrontendDevelopment #SoftwareEngineering #Debugging #JSFundamentals #DevCommunity #Programming

JavaScript runs in two phases. Most developers only know about one. This cost me 2 hours debugging a "variable not defined" error on a variable that was clearly defined. Here's what changed my understanding: I wrote this: console.log(count); let count = 10; Expected: 10 Reality: ReferenceError Then I tried: console.log(count); var count = 10; Result: undefined Same code. Different keyword. Completely different behavior. A senior dev explained: "JavaScript runs in two phases. You're seeing the memory phase." THE TWO PHASES: PHASE 1: MEMORY CREATION (before code runs) → Scans entire code → Allocates memory for variables → var: initialized as undefined → let/const: allocated but uninitialized (TDZ) → Functions: fully stored PHASE 2: EXECUTION (code runs line by line) → Values assigned → Functions invoked → Top to bottom WHY MY CODE BROKE: console.log(count); // ReferenceError let count = 10; Memory Phase: count allocated but in TDZ Execution Phase: Line 1 tries to access → TDZ → error WITH var: console.log(count); // undefined var count = 10; Memory Phase: count = undefined Execution Phase: Line 1 logs undefined, Line 2 assigns 10 THE MENTAL MODEL: Phase 1 (Memory): Blueprint → Reserve space for everything → var gets placeholder (undefined) → let/const stay locked (TDZ) Phase 2 (Execution): Building → Fill actual values → Execute instructions THIS EXPLAINS HOISTING: "Hoisting" isn't moving code up. It's memory allocation before execution. greet(); // works! function greet() {  console.log("Hello"); } Memory Phase: Entire function stored Execution Phase: Available to call BUT FUNCTION EXPRESSIONS DIFFER: greet(); // ReferenceError const greet = function() {   console.log("Hello"); }; Why: const is in TDZ until that line executes. CALL STACK: Every function call creates new Execution Context: function first() {   second(); } function second() {   console.log("Done"); } first(); Stack flow: 1. Global context (base) 2. first() pushed 3. second() pushed 4. second() pops off 5. first() pops off 6. Back to global Each context has its own memory and execution phases. WHERE THINGS LIVE: Stack: Execution contexts + primitives Heap: Objects, arrays, functions Function call: → Context pushed to stack → Function object in heap → Stack holds reference WHAT I LEARNED: JavaScript isn't magic. "Variables before declaration" = memory phase "Hoisting" = memory allocation before execution TDZ = protection against uninitialized access Understanding phases fixed my mental model. Now when I see weird variable behavior: "What happened in memory phase vs execution phase?" Usually, that's the answer. What JavaScript behavior seemed like magic until you understood execution phases?

🔁 Javascript Conditions and Loops 🔹 Why Conditions & Loops Matter - They help your program make decisions - They let your code repeat tasks - Without them, JavaScript is useless for logic Real use cases: Login validation, Form checks, Iterating data from APIs 🧠 Conditions (Decision Making) Conditions run code only when a condition is true. ✅ if statement let age = 20; if (age >= 18) { console.log("Eligible to vote"); } - Code runs only if condition is true 🔁 if–else if (age >= 18) { console.log("Adult"); } else { console.log("Minor"); } - Two paths • One always runs 🔂 else if let marks = 75; if (marks >= 90) { console.log("Grade A"); } else if (marks >= 70) { console.log("Grade B"); } else { console.log("Grade C"); } - Multiple conditions checked in order 🔀 switch statement Used when checking one value against many cases. let day = 2; switch (day) { case 1: console.log("Monday"); break; case 2: console.log("Tuesday"); break; default: console.log("Invalid day"); } ⚠️ Always use break to avoid fall-through. 🔁 Loops (Repetition) Loops run code multiple times. 🔹 for loop Best when number of iterations is known. for (let i = 1; i <= 5; i++) { console.log(i); } 🔹 while loop Runs while condition is true. let i = 1; while (i <= 3) { console.log(i); i++; } 🔹 do–while loop Runs at least once. let i = 5; do { console.log(i); i++; } while (i < 3); 📦 Loop Control Keywords - break → stops loop - continue → skips iteration for (let i = 1; i <= 5; i++) { if (i === 3) continue; console.log(i); } ⚠️ Common Beginner Mistakes - Infinite loops - Missing break in switch - Using == instead of === - Wrong loop condition 🧪 Mini Practice Task - Check if a number is even or odd - Print numbers from 1 to 10 - Print only even numbers - Use switch to print day name ✅ Mini Practice Task – Solution 🔁 🟦 1️⃣ Check if a number is even or odd let num = 7; if (num % 2 === 0) { console.log("Even number"); } else { console.log("Odd number"); } ✅ Uses modulus operator • Remainder 0 → even • Otherwise → odd 🔢 2️⃣ Print numbers from 1 to 10 for (let i = 1; i <= 10; i++) { console.log(i); } 🔁 3️⃣ Print only even numbers from 1 to 10 for (let i = 1; i <= 10; i++) { if (i % 2 === 0) { console.log(i); } } 📅 4️⃣ Use switch to print day name let day = 3; switch (day) { case 1: console.log("Monday"); break; case 2: console.log("Tuesday"); break; case 3: console.log("Wednesday"); break; case 4: console.log("Thursday"); break; case 5: console.log("Friday"); break; default: console.log("Invalid day"); }

🚀 Day 13 of JavaScript Daily Series JavaScript Strings — slice, substring, toUpperCase, trim (Super Easy Hinglish + Real-Life Examples) Aaj hum JavaScript ke 4 most useful string methods seekhenge. Yeh daily life coding me 100% use hote hain — chahe forms ho, search bars ho, validation ho ya UI formatting. 📝 What is a String? (Simple English Definition) A string is a sequence of characters used to store text like names, messages, sentences, etc. Example: let name = "Ritesh Singh"; 1️⃣ slice() — Cut & Extract Part of the String 🔹 Definition Returns a portion of string from start index to end index (end not included). 🧠 Hinglish Explanation Socho tum movie clip ka ek scene cut karke nikalna chahte ho → yahi slice karta hai. 📱 Real-Life Example Instagram username crop karna: let username = "aapanrasoi_official"; let shortName = username.slice(0, 10); console.log(shortName); // "aapanraso" 2️⃣ substring() — Extract Part of String (Like slice, but safer) 🔹 Definition Works like slice but doesn’t accept negative indexes. 🧠 Hinglish Explanation Slice ka hi shareef version — negative cheezein nahi leta. 😄 📱 Example let text = "JavaScript"; console.log(text.substring(4, 10)); // "Script" 3️⃣ toUpperCase() — Convert to CAPITAL Letters 🔹 Definition Returns the string in uppercase. 🧠 Hinglish Explanation Whatsapp pe aise lagta hai jaise koi chillaa kar message bhej raha ho. 😆 📱 Example let city = "varanasi"; console.log(city.toUpperCase()); // "VARANASI" 4️⃣ trim() — Remove Extra Spaces 🔹 Definition Removes spaces from start and end. 🧠 Hinglish Explanation Form bharte time users extra space daal dete hain, trim unko clean kar deta hai. 📱 Real-Life Example (Form Input Clean) let email = " ritesh@gmail.com "; console.log(email.trim()); // "ritesh@gmail.com" 🔥 Quick Summary Table MethodKaamReal Useslice()Part nikalnaUsername / Title Shortensubstring()Safe extractionWord pickingtoUpperCase()Text ko caps meLabels / Highlightstrim()Extra space hatanaForm inputs 🧠 Why These 4 Methods Matter? ✔ Clean data ✔ Better UI ✔ Faster string manipulation ✔ Interviews me 100% pooch lete hain

🚀 Mastering the Basics of JavaScript — the language that brings websites to life! From variables and functions to DOM manipulation, every concept builds the foundation of modern web development. 💻✨ Here’s clear and structured content on Basics of JavaScript. 📌 Basics of JavaScript 🔹 What is JavaScript? JavaScript (JS) is a high-level, interpreted programming language used to make websites interactive and dynamic. It works along with: HTML → Structure CSS → Style 🔹 Features of JavaScript ✔ Lightweight & fast ✔ Object-Oriented ✔ Event-driven ✔ Interpreted language ✔ Platform-independent 🔹 1. Variables in JavaScript Variables are used to store data. ✅ var Old way of declaring variables (function-scoped). var name = "Anshika"; ✅ let Block-scoped variable (recommended). let age = 22; ✅ const Used for constant values (cannot be reassigned). const pi = 3.14; 🔹 2. Data Types in JavaScript 📌 Primitive Data Types 1. String → "Hello" 2. Number → 10 3. Boolean → true / false 4. Undefined 5. Null 6. BigInt 7. Symbol let name = "JavaScript"; let marks = 95; let isPass = true; 🔹 3. Operators in JavaScript ➤ Arithmetic Operators + - * / % let a = 10; let b = 5; console.log(a + b); // 15 ➤ Comparison Operators == === != > < == → compares value === → compares value + type console.log(5 == "5"); // true console.log(5 === "5"); // false 🔹 4. Conditional Statements Used to make decisions. ✅ if-else let age = 18; if (age >= 18) { console.log("Eligible to vote"); } else { console.log("Not eligible"); } ✅ switch let day = 1; switch(day) { case 1: console.log("Monday"); break; default: console.log("Invalid day"); } 🔹 5. Loops in JavaScript ➤ for loop for (let i = 1; i <= 5; i++) { console.log(i); } ➤ while loop let i = 1; while (i <= 5) { console.log(i); i++; } 🔹 6. Functions in JavaScript Functions are reusable blocks of code. ✅ Normal Function function greet(name) { return "Hello " + name; } console.log(greet("Anshika")); ✅ Arrow Function (ES6) const add = (a, b) => a + b; console.log(add(5, 3)); 🔹 7. Arrays Used to store multiple values. let fruits = ["Apple", "Banana", "Mango"]; console.log(fruits[0]); // Apple 🔹 8. Objects Objects store data in key-value pairs. let student = { name: "Anshika", age: 22, course: "CSE" }; console.log(student.name); 🔹 9. DOM (Document Object Model) JavaScript can manipulate HTML elements. document.getElementById("demo").innerHTML = "Hello World!"; This makes websites interactive (like button clicks, form validation, etc.) 🔹 10. Events in JavaScript Events are actions performed by users. Example: Click Event <button onclick="showMessage()">Click Me</button> function showMessage() { alert("Button Clicked!"); } #JavaScript #WebDevelopment #FrontendDeveloper #CodingJourney #Pyspiders

# 🚀 JavaScript Closures: The Magic Every Developer Should Understand Today I want to share one of the most powerful, yet often misunderstood concepts in JavaScript — **closures**. ## What is a Closure? A closure is a function that "remembers" variables from its outer scope, even after the outer function has finished executing. Sounds abstract? Let me break it down with a practical example. ## Real-World Use Case: Creating a Counter Imagine you need to create independent counters, each with its own state. This is where closures shine: ```javascript // Factory function to create a counter function createCounter() { let count = 0; // Private variable! return { increment: function() { count++; return count; }, decrement: function() { count--; return count; }, getValue: function() { return count; } }; } // Usage: const counter1 = createCounter(); const counter2 = createCounter(); console.log(counter1.increment()); // 1 console.log(counter1.increment()); // 2 console.log(counter2.increment()); // 1 ← Independent! ``` ## Why Does This Work? When we call `createCounter()`, a new scope is created with the variable `count`. The inner functions (`increment`, `decrement`, `getValue`) "close over" this variable, maintaining access to it even after `createCounter()` has finished executing. **Key insight:** Each call to `createCounter()` creates its OWN separate scope. That's why `counter1` and `counter2` are completely independent! ## Where Is This Used in Real Projects? ✅ **Data encapsulation** — private variables without classes ✅ **Factory functions** — creating objects with state ✅ **Event handlers** — preserving context for event callbacks ✅ **Memoization** — caching function results ✅ **Middleware** in Express.js and other frameworks ## Common Pitfall ```javascript // ❌ Classic loop mistake for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } // Output: 3, 3, 3 // ✅ Correct solution with closure for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } // Output: 0, 1, 2 ``` ## Performance Considerations Keep in mind: closures consume memory because they maintain references to variables. In most cases this isn't an issue, but in performance-critical code it's worth considering. ## Conclusion Closures aren't just a JavaScript quirk — they're a fundamental pattern that makes the language so expressive. Understanding closures opens the door to writing more elegant and functional code. --- 💡 Do you use closures frequently in your projects? Share your favorite use cases in the comments! #JavaScript #WebDevelopment #Programming #Coding #SoftwareEngineering #FrontendDevelopment #LearnToCode #Tech

#JavaScript Pro Tip: What Does !!window Actually Do? (The Double Negation Deep Dive) Ever seen !! in JavaScript code and wondered what this double exclamation mark sorcery does? Especially when checking DOM properties like !!window or !!document? Let me demystify this common pattern and explain why it's so crucial for robust feature detection and browser fingerprinting. 🔍 The Double Negation (!!) Explained In essence, !! is JavaScript's explicit boolean converter. It takes any value and forces it to true or false. How it works: !!value // Step 1: !value → Returns the logical opposite (true becomes false, false becomes true) // Step 2: !!value → Negates again, giving us the original value's boolean equivalent 💡 Key Insights for DOM Properties For objects that exist: !!window // true (the global object exists) !!document // true (document exists) !!navigator // true (navigator exists) !!document.body // true (if body has loaded) The Critical Distinction: · Exists ≠ Truthy - A property can exist but hold a falsy value · !! checks existence AND truthiness in one operation Property Example Value !! Result Why? window.location Object true Objects are truthy document.getElementById('ghost') null false null is falsy window.innerWidth 0 true ⚠️ Numbers (even 0) are truthy undefinedProperty undefined false Doesn't exist document.all (legacy) HTMLCollection false Famous browser quirk! 🛠 Why This Matters in Real Development 1. Feature Detection (Modern Approach): // Instead of assuming, test for support const hasWebGL = !!window.WebGLRenderingContext; const hasServiceWorker = !!navigator.serviceWorker; const canUseLocalStorage = !!window.localStorage; // Now you can branch safely if (hasWebGL) { // Render 3D graphics } else { // Provide fallback } 2. Building Reliable Browser Fingerprints: Fingerprinters use!! to create consistent binary profiles: const capabilities = { webgl: !!window.WebGLRenderingContext, geolocation: !!navigator.geolocation, touch: !!('ontouchstart' in window), audioContext: !!window.AudioContext }; // Creates: {webgl: true, geolocation: false, touch: true, ...} 3. Safer Than Truthy Checks Alone: // Problematic: if (window.feature) { } // Could fail if feature === 0 or false // Better: if (!!window.feature) { } // Explicit intent: convert THEN check 🎯 The Professional Takeaway !! isn't just syntactic sugar—it's a defensive coding practice that: · Makes boolean conversion explicit (readability matters!) · Creates consistent type coercion across your codebase · Prevents subtle bugs with edge cases (0, empty string, false) · Forms the foundation of reliable feature detection systems Remember: In most cases, if (window.property) works the same as if (!!window.property) because if() implicitly converts to boolean. The !! is useful when you need to store, return, or pass the boolean value explicitly. #JavaScript #Portswigger #CyborgTek

🚀 𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲, __𝗽𝗿𝗼𝘁𝗼__, 𝗮𝗻𝗱 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲 𝗜𝗻𝗵𝗲𝗿𝗶𝘁𝗮𝗻𝗰𝗲 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 Most JavaScript developers use objects daily… But not everyone truly understands how JavaScript inheritance actually works under the hood. Let’s break it down simply 👇 🔹 𝟭️ 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗽𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲? In JavaScript, every function automatically gets a special property called: 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝗡𝗮𝗺𝗲.𝗽𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲 It is used when we create objects using new. Example: 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗣𝗲𝗿𝘀𝗼𝗻(𝗻𝗮𝗺𝗲) {  𝘁𝗵𝗶𝘀.𝗻𝗮𝗺𝗲 = 𝗻𝗮𝗺𝗲; } 𝗣𝗲𝗿𝘀𝗼𝗻.𝗽𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲.𝘀𝗮𝘆𝗛𝗲𝗹𝗹𝗼 = 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 () {  𝗰𝗼𝗻𝘀𝗼𝗹𝗲.𝗹𝗼𝗴("𝗛𝗲𝗹𝗹𝗼 " + 𝘁𝗵𝗶𝘀.𝗻𝗮𝗺𝗲); }; 𝗰𝗼𝗻𝘀𝘁 𝘂𝘀𝗲𝗿 = 𝗻𝗲𝘄 𝗣𝗲𝗿𝘀𝗼𝗻("𝗔𝗺𝗮𝗻"); 𝘂𝘀𝗲𝗿.𝘀𝗮𝘆𝗛𝗲𝗹𝗹𝗼(); // 𝗛𝗲𝗹𝗹𝗼 𝗔𝗺𝗮𝗻 Here: sayHello is not copied into every object It is shared via the prototype This saves memory 🔹 𝟮️ 𝗪𝗵𝗮𝘁 𝗶𝘀 __𝗽𝗿𝗼𝘁𝗼__? __proto__ is a reference to an object's parent prototype. console.log(user.__proto__ === Person.prototype);  // true Important: prototype → belongs to functions __proto__ → belongs to objects Think of it like this: function → prototype object → __proto__ 🔹 𝟯️ 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲 𝗖𝗵𝗮𝗶𝗻𝗶𝗻𝗴? When you try to access a property: user.sayHello() JavaScript searches like this: Does user have sayHello? ❌ Check user.__proto__ (Person.prototype) ✅ If not found, go to next prototype Eventually reaches Object.prototype This chain is called: 👉 Prototype Chaining 🔹 𝟰️.𝗪𝗵𝘆 𝗶𝘀 𝘁𝗵𝗶𝘀 𝗣𝗼𝘄𝗲𝗿𝗳𝘂𝗹? Because JavaScript inheritance is: Dynamic Memory efficient Flexible Every object in JavaScript is connected to a prototype. Even this works: [].__proto__ === Array.prototype Everything eventually links to: Object.prototype 🔥 Final Takeaway prototype → used by constructor functions __proto__ → internal link to parent Prototype chaining → how JavaScript finds properties Arrow functions ❌ don’t have prototype 𝗜𝗳 𝘆𝗼𝘂'𝗿𝗲 𝗹𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗱𝗲𝗲𝗽𝗹𝘆, 𝗱𝗼𝗻’𝘁 𝘀𝗸𝗶𝗽 𝗽𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲𝘀. 𝗧𝗵𝗲𝘆 𝗮𝗿𝗲 𝘁𝗵𝗲 𝗳𝗼𝘂𝗻𝗱𝗮𝘁𝗶𝗼𝗻 𝗼𝗳 𝗵𝗼𝘄 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗿𝗲𝗮𝗹𝗹𝘆 𝘄𝗼𝗿𝗸𝘀. 💡 #JavaScript #WebDevelopment #Programming #CodingTips #CareerGrowth #DevCommunity