Kamakshi B’s Post

Tuesday – JavaScript Concept If you don’t understand referential equality, React performance will confuse you forever. Example: const obj1 = { name: “Harry” } const obj2 = { name: “Harry” } obj1 === obj2 // false Same values. Different reference. React compares references, not deep values. That’s why: • Inline objects cause re-renders • Inline arrays break memoization • Functions need stabilization Advanced React = mastering JavaScript fundamentals. React is just JavaScript with UI. See you tomorrow for AI Integration Wednesday 🤖 #JavaScript #FrontendDevelopment #Performance

🚀 A Subtle JavaScript Array Bug This looks harmless: const arr = [1, 2, 3]; const copy = arr; copy.push(4); console.log(arr); Output? [1, 2, 3, 4] Why did the original array change? Because arrays (like objects) are reference types in JavaScript. copy is not a new array. It points to the same memory location. This can create unexpected side effects in larger applications. ✅ Better approach: const arr = [1, 2, 3]; const copy = [...arr]; copy.push(4); console.log(arr); // [1, 2, 3] Now you’re working with a new reference. In JavaScript, copying data is not always copying values. Sometimes it’s copying references. Understanding this saves hours of debugging. What JS concept took you the longest to truly understand? #javascript #frontenddeveloper #webdevelopment #coding #softwareengineering

🚨 JavaScript Hoisting – Something Most Developers Still Misunderstand Most developers say: 👉 “JavaScript moves variables to the top of the scope.” But that’s not actually what happens. Let’s test this 👇 console.log(a); var a = 10; Output: undefined Now try this: console.log(b); let b = 20; Output: ReferenceError: Cannot access 'b' before initialization 💡 Why the difference? Both var and let are hoisted. But the real difference is initialization timing. ✔ var is hoisted and initialized with undefined during the creation phase. ✔ let and const are hoisted but stay inside the Temporal Dead Zone (TDZ) until the line where they are declared. That’s why accessing them before declaration throws an error. 👉 So technically: JavaScript doesn’t “move variables to the top”. Instead, the JavaScript engine allocates memory for declarations during the creation phase of the execution context. Small detail. But it explains a lot of confusing bugs. 🔥 Understanding this deeply helps when debugging closures, scope issues, and async code. #javascript #frontend #webdevelopment #reactjs #coding #softwareengineering

Published an article on JavaScript Promises and Promise combinators. Focused on building the right mental model rather than just syntax. Used a Minecraft-based analogy to make concurrency easier to understand. https://lnkd.in/gpqR52S3

Ever clicked a button and noticed that the parent element’s event also runs? That happens because of event bubbling in JavaScript. When an event occurs, it travels up the DOM tree: Button → Parent → Document Sometimes this behavior causes unexpected results in your application. That’s where stopPropagation() helps. It stops the event from moving to parent elements. Example: element.addEventListener("click", (e) => { e.stopPropagation(); }); Now the event will stay on the current element only. Quick reminder: preventDefault() → stops browser default action stopPropagation() → stops event bubbling Understanding small concepts like this helps you write cleaner and more predictable JavaScript code. Follow for more JavaScript concepts explained visually. #javascript #webdevelopment #frontenddeveloper #coding #softwareengineering

Today JavaScript humbled me again 😭 I thought I understood async JS… but then the Event Loop said “bro sit down.” We explored the chaotic squad behind the scenes: 🧵 Call Stack – the overworked intern running the code 🌀 Event Loop – the manager deciding who gets attention ⚡ Microtask Queue – the VIP lane (Promises, queueMicrotask, process.nextTick) ⏳ Macrotask Queue – the waiting room (setTimeout, setInterval, setImmediate) Biggest plot twist of the day 👇 You write: setTimeout(fn, 0) and think: “Nice… this will run immediately.” JavaScript: “Haha… no.” Because JS first clears the Call Stack, then executes Microtasks, and only then checks Macrotasks. So the real priority is: Call Stack → Microtasks → Macrotasks Which explains why JavaScript sometimes feels like it's gaslighting you during console.log outputs 💀 Huge thanks to Devendra Dhote Bhaiya for explaining this so clearly. Really fun session and lots of brain upgrades today 🧠⚡ JavaScript is basically: “Single-threaded… but emotionally multi-threaded.” #JavaScript #EventLoop #AsyncJavaScript #WebDevelopment #LearningInPublic

JavaScript objects have a powerful feature called Prototype that enables inheritance. In JavaScript, if an object doesn’t have a specific property or method, the engine automatically looks for it in its prototype. This process continues up the prototype chain until the property is found or the chain ends. Example: function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log("Hello, my name is " + this.name); }; const john = new Person("John"); john.greet(); Even though john doesn’t directly have the greet() method, it can still access it through Person.prototype. This mechanism allows JavaScript objects to share methods and inherit behavior efficiently. Understanding prototypes helps you better understand how inheritance and object behavior work behind the scenes in JavaScript. Follow for more JavaScript concepts explained visually. #javascript #webdevelopment #frontenddeveloper #coding #learninginpublic #100DaysOfCode

🚀 The Power of reduce() in JavaScript – Master This & Level Up Your Logic Most developers use reduce() only for summing numbers. But reduce() can: ✔ Group data ✔ Transform APIs ✔ Flatten arrays ✔ Build complex objects ✔ Count frequency ✔ Remove duplicates ✔ Solve interview problems If you truly understand reduce(), you unlock a new level of JavaScript thinking. Read this article: https://lnkd.in/gKDr8fpN Thanks me later. #javascript #greatjsdeveloper

Adding event listeners to every element? There’s a smarter way in JavaScript. It’s called Event Delegation. Instead of attaching multiple event listeners to child elements, you attach one listener to the parent element. Why this works? Because of event bubbling. When an event happens, it moves up the DOM tree: Child → Parent → Document Example: document.getElementById("list").addEventListener("click", (e) => { if (e.target.tagName === "LI") { console.log("List item clicked"); } }); Now a single listener can handle all child element clicks. Benefits: • Better performance • Cleaner code • Works for dynamically added elements Small concepts like this make a big difference in real projects. Follow for more JavaScript concepts explained visually. #javascript #frontenddeveloper #webdevelopment #coding #softwareengineering

JavaScript events like scroll, resize, and typing can fire hundreds of times per second. If we run heavy functions on every event, the app can become slow and inefficient. Two common solutions to control this are: Debounce and Throttle Debounce Runs the function only after the event stops firing for a specific time. Example: Search input autocomplete. Throttle Runs the function at most once in a fixed time interval, even if the event keeps firing. Example: Scroll event handling. Quick difference: Debounce → waits for user inactivity Throttle → limits how often a function can run Using these techniques improves performance, user experience, and efficiency in real-world applications. Follow for more JavaScript concepts explained visually. 🚀 #javascript #webdevelopment #frontenddeveloper #coding #softwareengineering