Fixing Async Mistakes with Async/Await in JavaScript

Closures in JavaScript — Explained Simply A lot of people use closures without actually understanding them. So let’s kill the confusion. What’s a Closure? A closure is just a function that remembers the variables from where it was created, even after that outer function has finished running. Think of it like this The inner function carries a backpack Inside that backpack → variables from the outer scope. #JavaScript #Closures #WebDevelopment #Frontend #ReactJS #LearningInPublic #JavaScriptBasics

Ever looked at your frontend code and thought — “It works… but something feels wrong.” That “feels wrong” is often a code smell 🦨 In my latest Medium article, I break down: • What code smells really are (not bugs, but warnings) • Common frontend code smells I’ve seen in real projects • Why ignoring them leads to bugs & tech debt • Practical JavaScript / TypeScript examples Clean code isn’t about perfection — it’s about making code easy to read, change, and trust. 👉 Read the article here: [https://lnkd.in/gXyieZBG] #Frontend #JavaScript #TypeScript #CleanCode #CodeSmells #WebDevelopment

Most grouping bugs I debug in production come from assuming keys are always strings. Object.groupBy() is fine for primitive keys, but anything else gets coerced into a property name. That means object/function keys collapse into "[object Object]", and you lose identity. Map.groupBy() keeps keys by reference, so lookups and merges remain predictable across code paths (assuming your runtime supports it, or you polyfill it). Where in your codebase are you grouping by something that isn’t naturally a string? #javascript #typescript #frontend #webdev

🔁 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

In React, memoizing a component doesn't always prevent rerendering. We use the memo API to memoize a component to optimise performance. It is essential to understand that the memo API only works if the props remain the same and the component is pure. However, a memoised component with the following attributes will re-render. 1. The state gets set internally 2. Using a context that gets updated The memo works wrt values updated and passed from the parent, not the internal ones. By understanding it, one can avoid bugs and build reliable components. Have you noticed this behaviour earlier? #react #javascript #frontend

Understanding Array.reduce() in JavaScript 👨💻 A simple example of how reduce() helps calculate the total order amount from an array of objects clean, readable, and powerful. Once it clicks, you’ll start seeing reduce() everywhere. #JavaScript #WebDevelopment #Frontend #CodingTips #ReactJS #LearnToCode

Today I learned about Debouncing and Throttling — two simple but powerful techniques to improve performance in frontend applications. Debouncing ensures a function runs only after the user stops triggering an event (great for search inputs). Throttling limits how often a function can run within a fixed time interval (useful for scroll or resize events). These techniques help reduce unnecessary API calls and make applications smoother and more efficient. Small concepts, big impact 🚀 #JavaScript #WebDevelopment #Frontend #Performance #Learning

One line of JavaScript that can bite… or save you Ever seen this before? const arr = ["", null, undefined, false, 0, 1, 2]; const cleaned = arr.filter(Boolean); ✅ Output: [1, 2] filter(Boolean) removes all falsy values in JavaScript. ⚠️ That includes: - false - 0 - "" - null - undefined It’s a beautifully clean ES6 trick — but only if you actually want to remove everything falsy. #JavaScript #WebDevelopment #FullStack #Frontend #CleanCode #ES6 #ProgrammingTips

🔹JavaScript Tip: bind vs call vs apply These three methods are often confusing, but they all exist for one main reason: controlling the value of this when calling a function. Here’s a simple breakdown 👇 ✅ call() Invokes the function immediately Arguments are passed one by one ✅ apply() Invokes the function immediately Arguments are passed as an array ✅ bind() Does not invoke the function Returns a new function with this (and optional arguments) permanently bound Perfect for callbacks and event handlers Understanding these three makes working with callbacks, event listeners, and frameworks much easier. #JavaScript #WebDevelopment #Frontend #ProgrammingTips #CleanCode

What happens actually when you call setState() (Reconciliation phases) 1. Render phase: - React creates Virtual DOM - Compares it with previous one - Decides what needs to change - No real DOM updates here 2. Commit phase: - React applies the changes to real DOM. - Runs lifecycle methods and hooks like: useLayoutEffect 3. Commit phase (Final step): - Runs side effects: useEffects: - Cleanup of previous effects Understanding reconciliation helps you write better, performance-friendly components. #frontend #reactjs #javascript