Dawid Janiga’s Post

😄 JavaScript be like… “I deleted it, but it’s still there?” Used delete on an array element and expected magic ✨ Instead, JavaScript said: “Here, take an empty slot.” 🕳️ 👉 delete removes the value, not the index 👉 The array length stays the same 👉 Surprise bugs unlocked 😅 💡 Pro tip: If you actually want to remove an element and reindex the array — use splice() 🧹 Small quirks like this are what make JavaScript fun (and sometimes scary 😄). #JavaScript #CodingHumor #WebDevelopment #Frontend #DevLife #LearnJS

🔁 Closures in JavaScript A closure is when a function remembers variables from its parent function, even after the parent function has finished executing. function outer() {  let count = 0;  return function inner() {   count++;   console.log(count);  } } const counter = outer(); counter(); // 1 counter(); // 2 👉 inner() still remembers count 👉 That memory is called a closure If closures ever confused you, save this post 👍 #JavaScript #WebDevelopment #Frontend #CodingSimplified #LearnJS #BhaviDigital

Have you ever built a component that felt like a "Prop Graveyard"? 🪦 Usually, when we build Modals or Tabs, we end up passing endless props like title, footerText, showHeader, etc. It makes the component rigid, hard to read, and a nightmare to maintain. I’ve been playing around with Compound Components to fix this. Instead of one "mega-component" trying to do everything, you break it down into smaller pieces that work together. It’s exactly how HTML <select> and <option> tags work. Why I’m liking this approach: • I can swap the order of the header or body without touching the internal logic. • You can literally see the layout of the modal just by looking at the component tags. • No more giant configuration objects or "if/else" logic inside the main component. Check out the code snippet below to see how I set it up! ⬇️ Are you a fan of compound components, or do you prefer keeping everything in a single component? #ReactJS #WebDev #Frontend #CleanCode #Javascript

React Optimization: useMemo() hook.. Why first code in the image fails: In JavaScript, objects are compared by reference, not value. Even though { color: 'red' } looks the same as the previous render, React sees a new memory address. 👉 Result: The useEffect thinks options has changed and fires on every single render. You just created an infinite loop or an API spammer. Why the code below works: useMemo tells React: "Keep this object at the same memory address unless dependencies change." 👉 Result: The useEffect sees the exact same reference and skips the re-run. 💡 The Lesson: Don't just ask "Is this function heavy?" Also ask: "Am I passing this object/array into a dependency array?" If the answer is yes, you need useMemo to stabilize it. #ReactJS #WebDevelopment #JavaScript #CodingTips #FrontendEngineering

const user = { name: 'Munsif', print: () => console.log(this.name) }; user.print(); If you think it prints "Munsif"... we need to talk. The `this` keyword is the silent killer of clean code. It changes based on *how* you call it, not *where* you write it. I just dropped a massive deep dive on my blog: "Demystifying the JavaScript 'this' Keyword." I peel back the layers on: 🔹 The 4 binding rules every dev must memorize 🔹 The exact reason the code above fails (and how to fix it) 🔹 The magic of `.bind()`, `.call()`, and `.apply()` 🔹 Tricky interview questions that trip everyone up Don't let context bugs haunt your PRs anymore. Link to the full breakdown: https://lnkd.in/gWMGP5Kn (The answer to the snippet is `undefined`. My blog explains why! 😉) #JavaScript #CodingChallenge #Frontend #DeveloperLife #JS

Ever wonder why JavaScript feels like it’s reading your mind? 🫥 Imagine walking into a party, and before you even say hello, the host already knows everyone’s name. That’s Hoisting. Before running your code, the JS engine scans the file and moves declarations to the top of their scope. Sounds magical, right? Here’s the twist: ✅ Functions are VIP guests – You can call them before they’re even written. They’re fully hoisted and ready to work from line one. var is sneaky – The name shows up early, but the value arrives late (hello, undefined). let & const are strict bouncers – They exist, but they’re stuck in the Temporal Dead Zone. Touch them too early? ReferenceError. Just because hoisting exists doesn't mean you should use it. It makes code unreadable code. I usually just stick to const and declare everything at the top to keep my sanity and my console clean. #JavaScript #WebDev #CodingLife #Angular #FrontEnd #Typescript #Developer #Javascript #FrontendDevelopment #Programming #Coding #Angular #TypeScript #AngularDeveloper #FrontendTips #WebDev #DevCommunity #LearnJavaScript

Stop building dark mode the wrong way ❌ Most tutorials teach repetitive CSS hacks that break as your project grows. In this carousel, I show a clean, scalable approach using CSS variables + inheritance. One system. Infinite components. Minimal JS. Save this post if you’re building frontend projects or teaching others. Feedback welcome! 👀 Devora Technologies Arslan Khan #WebDevelopment #Frontend #CSS #JavaScript #DesignSystems #ProblemSolving

🚀 JavaScript this Keyword — One Word, Many Behaviors this is not about where a function is written It’s about how the function is called. That’s why it confuses even experienced developers. 🧠 How JavaScript Decides this JavaScript determines this at runtime, not during writing the code. 📌 What’s Happening Here? ✔️ Global this depends on environment ✔️ Normal functions get this from the caller ✔️ Object methods point this to the object ✔️ Arrow functions inherit this from lexical scope ✔️ call, apply, bind explicitly set this 💡 Golden Rule: “If it’s an arrow function, this is borrowed — not created.” #JavaScript #ThisKeyword #Frontend #WebDevelopment #JSConcepts #InterviewPrep #ReactJS #MERN

👨💻 JavaScript Review: Rebuilding Array.prototype.filter from Scratch! I recently worked through a problem that asked me to re-implement Array.prototype.filter manually. It ended up being a great review session on how JavaScript really works! Here is the primary function of Array.prototype.filter: - Iterates over an array - Calls a callback function on each element - Returns a new array containing only the values where the callback returns true - Does not mutate the original array I’m going to review more JavaScript fundamentals, such as this topic, in the near future! 🗒️ #JavaScript #WebDevelopment #Frontend #SoftwareEngineering

Hooks exist to control component behavior, not to reduce code length or look modern. What hooks actually solve Eliminate class components Make stateful logic reusable Separate what a component does from how it renders Where people mess up Using hooks without understanding render cycles Writing side-effects that fight React instead of working with it Creating custom hooks that are just utility functions in disguise Treating hooks as “features” instead of constraints If you don’t understand why hooks must be called at the top level, you don’t understand hooks. If you don’t know when a hook re-runs, you’re guessing. The uncomfortable truth Most React bugs today are hook bugs: stale closures unnecessary re-renders infinite loops state that should never have been state Hooks reward disciplined thinking and punish sloppy design. If your code feels fragile, it’s not React’s fault. It’s your mental model. Fix that first. #ReactJS #Hooks #FrontendEngineering #JavaScript #WebDevelopment #CleanArchitecture