Marwan Mohamed’s Post

JavaScript Simplified: Destructuring & Spread Operator Ever noticed how JavaScript lets you write cleaner and shorter code? That’s where Destructuring and the Spread Operator (...) come in! What is Destructuring? Destructuring means “unpacking” values from arrays or objects into variables— instead of accessing each one manually. const user = { name: "Sameer", age: 22 }; const { name, age } = user; console.log(name, age); // Sameer 22 You can even rename or set default values: const { country: location = "India" } = user; What is the Spread Operator (...)? The spread operator helps you copy, merge, or expand arrays and objects effortlessly. const fruits = ["apple", "banana"]; const moreFruits = ["orange", "grapes"]; const allFruits = [...fruits, ...moreFruits]; console.log(allFruits); // ["apple", "banana", "orange", "grapes"] It also works great with objects: const user = { name: "Sameer", age: 22 }; const updatedUser = { ...user, age: 23 }; console.log(updatedUser); // { name: "Sameer", age: 23 } In short: Destructuring → Pull out values easily Spread → Copy or merge effortlessly #JavaScript #WebDevelopment #Frontend #CodingTips #Destructuring #SpreadOperator #LearnJS

Today's Topic: Promise Chaining in JavaScript In JavaScript, Promise chaining allows you to execute asynchronous tasks one after another, ensuring that each step waits for the previous one to finish. Instead of nesting callbacks (callback hell ), promises make your code cleaner and easier to maintain. Example: function step1() { return new Promise((resolve) => { setTimeout(() => { console.log("Step 1 completed ✅"); resolve(10); }, 1000); }); } function step2(value) { return new Promise((resolve) => { setTimeout(() => { console.log("Step 2 completed ✅"); resolve(value * 2); }, 1000); }); } function step3(value) { return new Promise((resolve) => { setTimeout(() => { console.log("Step 3 completed ✅"); resolve(value + 5); }, 1000); }); } // Promise Chaining step1() .then(result => step2(result)) .then(result => step3(result)) .then(finalResult => console.log("Final Result:", finalResult)) .catch(error => console.error("Error:", error)); ✅ Output (after 3 seconds): Step 1 completed ✅ Step 2 completed ✅ Step 3 completed ✅ Final Result: 25 Each .then() runs after the previous promise resolves — making async flow easy to read and manage. --- 🔖 #JavaScript #WebDevelopment #PromiseChain #AsyncProgramming #CodingTips #FrontendDevelopment #Developers #JSConcepts #CodeLearning #100DaysOfCode #WebDevCommunity

Demystifying the Prototype in JavaScript If there’s one concept that confuses most developers (even experienced ones), it’s the Prototype. Unlike traditional class-based languages, JavaScript uses prototypal inheritance — meaning objects can inherit directly from other objects. Every JS object has a hidden reference called its prototype, and this is what makes inheritance possible. 🔹 How It Works When you access a property like obj.prop1: 1️⃣ JS first checks if prop1 exists on the object itself. 2️⃣ If not, it looks at the object’s prototype. 3️⃣ If still not found, it continues up the prototype chain until it either finds it or reaches the end. So sometimes a property seems to belong to your object — but it actually lives further down the chain! Example const person = { firstname: "Default", lastname: "Default", getFullName() { return this.firstname + " " + this.lastname; } }; const john = Object.create(person); john.firstname = "John"; john.lastname = "Doe"; console.log(john.getFullName()); // "John Doe" Here’s what happens: JS looks for getFullName on john. Doesn’t find it → checks person (its prototype). Executes the method with this referring to john. Key Takeaways The prototype is just a hidden reference to another object. Properties are looked up the prototype chain until found. The this keyword refers to the object calling the method, not the prototype. Avoid using __proto__ directly — use Object.create() or modern class syntax. One-liner: The prototype chain is how JavaScript lets one object access properties and methods of another — simple, flexible, and core to the language. If you found this helpful, follow me for more bite-sized explanations on JavaScript, React, and modern web development #JavaScript #WebDevelopment #Frontend #React #TypeScript #Coding #LearningInPublic #SoftwareEngineering #TechEducation #WebDevCommunity

Let’s talk about a subtle but powerful gem in JavaScript you might be overlooking: The Nullish Coalescing Operator (??). In 2024, with codebases growing more complex, handling “empty” or “absent” values cleanly is more important than ever. And that’s where this operator shines. You’re probably familiar with the OR operator (||) for providing default values. It’s nice, but has a gotcha — it treats falsy values like 0, '', or false as “absent,” which can break your logic unexpectedly: ```javascript const count = 0; const defaultCount = count || 10; console.log(defaultCount); // prints 10, but you might expect 0 here! ``` Oops! Here, 0 is a legitimate value, but || doesn’t see it that way. Enter the nullish coalescing operator ?? — it only catches null or undefined, not other falsy values: ```javascript const count = 0; const defaultCount = count ?? 10; console.log(defaultCount); // prints 0, which is correct ``` Simple but game-changing! Why should you care? - It helps you write safer defaults without accidentally overriding valid falsy values. - It improves code readability by making intent crystal clear. - It pairs beautifully with optional chaining (?.), another modern JS feature, to safely access deeply nested properties: ```javascript const user = { settings: { theme: null } }; const theme = user.settings?.theme ?? 'light'; console.log(theme); // "light" instead of null or error ``` This combo is essential for handling real-world data where some properties might be missing or intentionally null. My takeaway: When you need fallback values, prefer `??` over `||` if you want to preserve meaningful falsy values like 0, false, or ''. Give it a try next time you find yourself writing default values. Small changes like this make your code cleaner, fewer bugs sneak in, and your future self thanks you. Happy coding! #JavaScript #FrontendDev #CodeQuality #WebDevelopment #ProgrammingTips #TechTrends #CleanCode

🍏 JS Daily Bite #10 — JavaScript Prototype Chains: A Full Comparison Master JavaScript's prototype-based inheritance system by exploring ways to create and manipulate prototype chains, their trade-offs, and best practices. 🏗️ Methods for Creating Prototype Chains: 1️⃣ Object Literal Syntax with __proto__ ✅ Standardized, optimized, more performant than Object.create() ✅ Ergonomic for declaring properties at creation ⚠️ Fails silently when pointing to non-objects 2️⃣ Constructor Functions ✅ Fast, standard, JIT-optimizable ⚠️ Methods are enumerable by default, inconsistent with class syntax ⚠️ Error-prone for longer inheritance chains 3️⃣ Object.create() ✅ Direct prototype setting at creation ✅ Can create objects with null prototype ⚠️ Verbose, error-prone, potentially slower than literals 4️⃣ Classes (ES6+) ✅ Ideal for complex inheritance with readability and maintainability ✅ Supports private elements ⚠️ Less optimized than traditional constructors 🔧 Mutating Existing Prototype Chains: 1️⃣ Object.setPrototypeOf() ✅ Modify the prototype of existing objects ⚠️ Can disrupt engine optimizations 💡 Best practice: set prototype during object creation 2️⃣ The __proto__ Accessor ⚠️ Fails silently with non-objects ⚠️ Non-standard and deprecated 💡 Recommendation: use Object.setPrototypeOf() instead ⚡ Performance Considerations: 1️⃣ Prototype Chain Lookup Costs Deep chains slow property access Non-existent properties traverse the entire chain All enumerable properties in the chain are iterated 2️⃣ Checking Own Properties Use hasOwnProperty() or Object.hasOwn() Don’t rely solely on undefined checks 🔜 Next in the Series: Enumerability and ownership of properties #JavaScript #JSDailyBite #WebDevelopment #Programming #LearnToCode #Prototypes #Inheritance #SoftwareEngineering #FrontendDevelopment #JSFundamentals #TechEducation

💥 JavaScript Error Statements — When Things Go "Oops!" in Code 😅 Let’s be honest — we all make mistakes while coding. But the cool part? JavaScript doesn’t just crash and burn; it talks back! 🔊 It throws error statements to tell you what went wrong and where. --- 🧠 What Are Error Statements? Error statements in JavaScript are used to handle runtime errors gracefully. Instead of stopping your entire code, they help you catch issues and respond to them smartly. Example 👇 try { let num = 10 / 0; throw new Error("Division by zero is not allowed!"); } catch (error) { console.log(error.message); } 💬 Output: Division by zero is not allowed! --- ⚙️ Common Error Types You’ll See Here are a few “celebrities” of JavaScript errors: ReferenceError – Using a variable that doesn’t exist. TypeError – Doing the wrong thing with the wrong type. SyntaxError – Messed up your punctuation (oops!). RangeError – You asked for something outside the allowed range. EvalError – Something went wrong inside eval(). --- 💡 Why It Matters Catching errors properly makes your app: ✅ More stable ✅ Easier to debug ✅ User-friendly (no white screens of doom!) --- 🚀 Pro Tip Use try...catch...finally blocks wisely. They make you look like a coding superhero who can fix chaos before it spreads. 🦸♂️ --- 💬 So next time JavaScript screams “Error!”, smile. It’s just trying to help you write smarter code! 💻 #codecraftbyaderemi #webdeveloper #frontend #javascript #webdevelopment #learnJS

🚀 Decoding the Browser: How JavaScript Truly Executes! Today I explored how JavaScript executes inside the browser, and it was truly fascinating to understand the step-by-step process behind the scenes! 💡 (Check out the JIT compilation flow in the image!) Here’s what I learned 👇 1. The Synchronous Dance (JS Engine & JIT Compilation) Loading Phase: The browser starts by loading the HTML and identifies any <script> tags. Engine Hand-off: Once found, the code is sent to the JavaScript Engine (like Chrome’s V8). The Engine's Core Steps: ✨ Parsing: The engine first reads your code and converts it into an Abstract Syntax Tree (AST) 🎄. This is the structural map of your code. ⚙️ Interpretation: The Interpreter then quickly executes this AST, generating Bytecode. This ensures fast startup. ⚡ Just-In-Time (JIT) Compilation: For frequently executed code, the Optimizing Compiler steps in, transforming the Bytecode into highly efficient Machine Code for maximum performance. 🧩 Execution: The synchronous code runs on the Call Stack, while variables and objects are managed in the Memory Heap. 2. Mastering Asynchronous Operations (Event Loop) For asynchronous operations (set Timeout, fetch, etc.), the Web APIs, Callback Queue, and Event Loop beautifully coordinate to ensure non-blocking execution, keeping your UI responsive. 💬 In essence: HTML Parsing → JS Engine (Parsing + JIT Compilation) → Call Stack + Heap → Web APIs + Callback Queue + Event Loop → Execution Understanding this comprehensive flow is key to writing efficient, optimized, and clean JavaScript code that performs brilliantly. Excited to continue learning and sharing my progress each day under the guidance of Sudheer Velpula Sir. 🙌 #JavaScript #WebDevelopment #Frontend #LearningJourney #Coding #SudheerSir #10000coders

𝗖𝗼𝗺𝗺𝗼𝗻 𝗥𝗲𝗮𝗰𝘁 𝗯𝘂𝗴𝘀 𝘁𝗵𝗮𝘁 𝗮𝗿𝗲 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝘆𝗼𝘂𝗿 𝗺𝗶𝘀𝘁𝗮𝗸𝗲𝘀. The complaint: React is so slow, our app takes forever to load. The real problem: Component re-rendering 800+ times because of an infinite loop. This happens all the time. Bad code gets blamed on the framework. 𝗖𝗼𝗺𝗺𝗼𝗻 𝗥𝗲𝗮𝗰𝘁 𝗯𝘂𝗴𝘀 𝘁𝗵𝗮𝘁 𝗮𝗿𝗲 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝘆𝗼𝘂𝗿 𝗺𝗶𝘀𝘁𝗮𝗸𝗲𝘀: 𝟭. 𝗥𝗲𝗮𝗰𝘁 𝗸𝗲𝗲𝗽𝘀 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 - You're creating new objects in render 𝟮. 𝗦𝘁𝗮𝘁𝗲 𝘂𝗽𝗱𝗮𝘁𝗲𝘀 𝗮𝗿𝗲 𝗯𝗿𝗼𝗸𝗲𝗻 - You're mutating state directly 𝟯. 𝗠𝗲𝗺𝗼𝗿𝘆 𝗹𝗲𝗮𝗸𝘀 𝗲𝘃𝗲𝗿𝘆𝘄𝗵𝗲𝗿𝗲 - You forgot to cleanup useEffect 𝟰. 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗮𝗿𝗲 𝘀𝗹𝗼𝘄 - You're doing heavy work without memoization 𝟱. 𝗥𝗲𝗮𝗰𝘁 𝗶𝘀 𝗯𝘂𝗴𝗴𝘆 - You don't understand JavaScript references The truth: 99% of React problems are JavaScript problems. If you don't understand how JavaScript works, you'll blame React for everything. React doesn't fix bad coding. It exposes it. Before complaining about React, ask yourself: - Do I understand why this re-render happened? - Am I following React's rules? - Is this actually a JavaScript problem? Stop looking for perfect frameworks. Start writing better JavaScript. Keep learning, keep practicing, and stay ahead of the competition. ------------------------------- Follow Sakshi Gawande for more such dev insights 💫

JS Learners & Web Devs! Ever wondered why you can call a function before it’s defined in JavaScript, but let or const throw a ReferenceError? Our latest blog dives deep into Hoisting in JavaScript: How JS engine really works Understanding the Temporal Dead Zone (TDZ) Function vs variable hoisting Common pitfalls & best practices Stop guessing and start writing safer, cleaner JS code! https://lnkd.in/dCeqNnRf #javascript #webdevelopment #hoistinginjs #learnjavascript #coding #programming #FrontendDevelopment #webdev #CodeNewbie #wenowadays

🚀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 — 𝗧𝗵𝗲 𝗞𝗲𝘆 𝘁𝗼 𝗔𝘀𝘆𝗻𝗰 𝗠𝗮𝘀𝘁𝗲𝗿𝘆! Ever wondered how JavaScript manages to perform tasks like fetching APIs or reading files without freezing the page? 🤔 That’s where Promises come in — your secret weapon for handling asynchronous operations cleanly and predictably. 𝗛𝗲𝗿𝗲’𝘀 𝘄𝗵𝗮𝘁 𝘆𝗼𝘂’𝗹𝗹 𝗹𝗲𝗮𝗿𝗻 𝗶𝗻 𝘁𝗵𝗶𝘀 𝗯𝗿𝗲𝗮𝗸𝗱𝗼𝘄𝗻 👇 ✅ 𝑊ℎ𝑎𝑡 𝑃𝑟𝑜𝑚𝑖𝑠𝑒𝑠 𝑟𝑒𝑎𝑙𝑙𝑦 𝑎𝑟𝑒 — 𝑎 𝑏𝑒𝑡𝑡𝑒𝑟 𝑎𝑙𝑡𝑒𝑟𝑛𝑎𝑡𝑖𝑣𝑒 𝑡𝑜 𝑐𝑎𝑙𝑙𝑏𝑎𝑐𝑘 ℎ𝑒𝑙𝑙 ✅ 𝐻𝑜𝑤 .𝑡ℎ𝑒𝑛(), .𝑐𝑎𝑡𝑐ℎ(), 𝑎𝑛𝑑 .𝑓𝑖𝑛𝑎𝑙𝑙𝑦() 𝑐𝑜𝑛𝑡𝑟𝑜𝑙 𝑎𝑠𝑦𝑛𝑐 𝑓𝑙𝑜𝑤 ✅ 𝑃𝑟𝑜𝑚𝑖𝑠𝑒 𝑐ℎ𝑎𝑖𝑛𝑖𝑛𝑔 𝑓𝑜𝑟 𝑠𝑒𝑞𝑢𝑒𝑛𝑡𝑖𝑎𝑙 𝑡𝑎𝑠𝑘𝑠 ✅ 𝑃𝑟𝑜𝑚𝑖𝑠𝑒.𝑎𝑙𝑙, 𝑃𝑟𝑜𝑚𝑖𝑠𝑒.𝑟𝑎𝑐𝑒 & 𝑃𝑟𝑜𝑚𝑖𝑠𝑒.𝑎𝑙𝑙𝑆𝑒𝑡𝑡𝑙𝑒𝑑 𝑓𝑜𝑟 𝑝𝑎𝑟𝑎𝑙𝑙𝑒𝑙 𝑜𝑝𝑒𝑟𝑎𝑡𝑖𝑜𝑛𝑠 ✅ 𝑅𝑒𝑎𝑙-𝑤𝑜𝑟𝑙𝑑 𝑒𝑥𝑎𝑚𝑝𝑙𝑒𝑠 — 𝑓𝑟𝑜𝑚 𝑓𝑒𝑡𝑐ℎ𝑖𝑛𝑔 𝐴𝑃𝐼𝑠 𝑡𝑜 ℎ𝑎𝑛𝑑𝑙𝑖𝑛𝑔 𝑢𝑠𝑒𝑟 𝑖𝑛𝑝𝑢𝑡 💡 A Promise in JS is like saying, “I’ll do this task — and once I’m done, I’ll let you know whether it succeeded or failed.” Understanding Promises is the foundation for mastering async/await, fetch API, and modern frontend frameworks like React or Vue. 💬 𝑊ℎ𝑎𝑡’𝑠 𝑜𝑛𝑒 𝑃𝑟𝑜𝑚𝑖𝑠𝑒 𝑐𝑜𝑛𝑐𝑒𝑝𝑡 𝑡ℎ𝑎𝑡 𝑓𝑖𝑛𝑎𝑙𝑙𝑦 “𝑐𝑙𝑖𝑐𝑘𝑒𝑑” 𝑓𝑜𝑟 𝑦𝑜𝑢 𝑎𝑓𝑡𝑒𝑟 𝑠𝑡𝑟𝑢𝑔𝑔𝑙𝑖𝑛𝑔 𝑤𝑖𝑡ℎ 𝑖𝑡? 𝑆ℎ𝑎𝑟𝑒 𝑦𝑜𝑢𝑟 𝑚𝑜𝑚𝑒𝑛𝑡 𝑏𝑒𝑙𝑜𝑤 👇 credit-Shivam Dhyani #JavaScript #AsyncProgramming #Promises