JavaScript this keyword explained

Your frontend feels slow — but you’re not sure why? 🤷♀️ In his Frontend Performance Workshop, Peter Kröner shows you how to truly understand what’s happening under the hood of the browser — and how to fix performance issues the right way. With practical tweaks you can apply immediately! You’ll dive deep into: 🔺 How browsers parse, execute & render HTML, CSS & JS 🔺 Reading and understanding flame charts 🔺 Render-blocking CSS & JS pitfalls 🔺 JS engine internals & just-in-time compilation 📅 Monday, June 8th, 26 | IPC | 📍Berlin 🤓 All about the workshop: https://lnkd.in/dWcJ5UdE #webinale #Frontend #WebPerformance #JavaScript #CSS #WebDevelopment

Your frontend feels slow — but you’re not sure why?🤷♀️ In his Frontend Performance Workshop, Peter Kröner shows you how to truly understand what’s happening under the hood of the browser — and how to fix performance issues the right way. With practical tweaks you can apply immediately! You’ll dive deep into: 🔺 How browsers parse, execute & render HTML, CSS & JS 🔺 Reading and understanding flame charts 🔺 Render-blocking CSS & JS pitfalls 🔺 JS engine internals & just-in-time compilation 📅 Monday, June 8th, 26 | Webinale Web Week |📍Berlin 🤓 All about the workshop: https://lnkd.in/dMFvYjsj #webinale #Frontend #WebPerformance #JavaScript #CSS #WebDevelopment

🚨 JavaScript “this” Trap — Arrow Function vs Regular Function const counter = { value: 42, show: () => this.value, }; console.log(counter.show.call({ value: 100 })); // undefined ❗ 💡 What’s happening? Arrow functions don’t have their own this. Instead, they lexically inherit this from the surrounding scope (usually the global scope). So even when we try to override this using .call(), .apply(), or .bind(), it doesn’t work. 👉 That’s why the result is undefined instead of 100. ✅ When to use Arrow Functions: • When you want to preserve the outer this (e.g., inside callbacks, closures) • In React functional components or array methods (map, filter, etc.) • When you don’t need dynamic context ❌ When NOT to use Arrow Functions: • Object methods that rely on this • Constructors (they can’t be used with new) • Event handlers where this refers to the element • When you need .call(), .apply(), or .bind() 🔥 Fix the issue: const counter = { value: 42, show() { return this.value; }, }; console.log(counter.show.call({ value: 100 })); // 100 ✅ ⚡ Key Takeaway: Arrow functions are not a replacement for regular functions — they’re a different tool. Use them wisely. Misusing them can silently break your logic. #JavaScript #WebDevelopment #Frontend #MERN #CodingTips #CleanCode #reactjs #nodejs

🎯 Random Meal Generator 🍽️ 💻 Built with JavaScript ,HTML,CSS & Bootstrap 🍽️ Displays a random meal from 6 predefined meals ⚡ Shows a new random meal on page load and when the button is clicked ✅ Ensures the same meal does not appear twice in a row 📚What I learned from this task: ⚡Working with DOM and understanding how elements update dynamically ⚡ Handling dynamic content and updating the UI smoothly 🎲 Generating a random meal each time the page loads or the user clicks the button 🔢 Building custom logic to ensure the random number is different from the previous one 🖥️ Displaying the meal data correctly in the UI and updating it dynamicall 🔗 Live Demo: https://lnkd.in/d_DDBvJv ⚡ Source Code: https://lnkd.in/def7m-w7 #JavaScript #HTML #CSS #Bootstrap #FrontendDevelopment #WebDevelopment #CodingJourney #Projects#Route

Why does the page refresh when a form is submitted? And how do developers stop it? The answer is preventDefault(). In JavaScript, some events have default browser behavior. Examples: • Form submission → refreshes page • Anchor tag → navigates to another page But sometimes we want to control this behavior with JavaScript. That’s where preventDefault() comes in. Example: form.addEventListener("submit", function(e) { e.preventDefault(); }); Now the browser won't refresh the page, and we can handle the form using JavaScript. 💡 Important: preventDefault() → stops default browser behavior stopPropagation() → stops event bubbling Two different things. Many developers mix them up. Small concepts like this build strong frontend fundamentals. Follow for more JavaScript & Frontend engineering concepts. #javascript #frontenddeveloper #webdevelopment #coding #learninpublic

Tree shaking is asked in every frontend interview. Almost no one applies it in production. I fixed it in our UI library and the bundle size dropped by more than half. If you maintain a UI library, run through this checklist: ✅ Ship ESM builds Bundlers like Webpack, Rollup & Vite need static imports to detect unused code. CJS require() is dynamic — tree shaking won't work. ✅ Use preserveModules in Rollup Bundling everything into one file defeats the purpose. Keep modules separate so bundlers can drop individual files that aren't imported. ✅ Declare sideEffects in package.json Without this, bundlers play it safe and include everything. Set it to false or explicitly list CSS files that must always be included. ✅ Add external alongside peerDependencies peerDependencies tells npm. external tells your bundler. You need both — otherwise React or lodash still gets bundled into your library. ✅ Prefer named exports over default exports Named exports make your API explicit. Bundlers can clearly see what's being used and safely eliminate the rest. Miss even one of these and your consumers ship your entire library for a single button import. Wrote a full deep-dive on each point 👇 https://lnkd.in/gciJ3SU3 #JavaScript #Frontend #WebPerformance #React #Bundling

Most developers think they’re calling pure JavaScript functions. In reality, many of those calls aren’t JavaScript at all. This is where 𝗙𝗮𝗰𝗮𝗱𝗲 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 come in. In architecture, a facade is the simple front of a building—hiding the complex structure behind it. The browser follows the same principle. Functions like `setTimeout`, `fetch`, `document`, `localStorage`, and even `console.log` look like native JavaScript. But they’re actually **interfaces to browser Web APIs**. When you call them, JavaScript delegates the heavy lifting to systems outside the engine: * `setTimeout` → handled by the browser’s timer system * `fetch` → managed by the network layer * `document` → powered by the DOM engine One line of code… but an entire subsystem executes it. Interestingly, not all facade functions behave the same way. For example, `console.log` often executes immediately because debugging requires real-time feedback. Understanding this clears up a lot of confusion around async behavior and performance. It’s no longer “𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗺𝗮𝗴𝗶𝗰”—it’s system design. Here’s how to apply this knowledge: * Recognize which APIs are browser-provided vs pure JS * Don’t assume async behavior—understand how each API works * Use this mental model when debugging unexpected behavior Once you see it, JavaScript becomes far more predictable. Which Web API surprised you the most when you learned it wasn’t actually JavaScript? #JavaScript #WebAPIs #FrontendEngineering #AsyncProgramming #EventLoop #SoftwareEngineering #BrowserInternals #CleanCode

⚠️ JavaScript Function Expression — A Common Corner Case That Trips Developers 🔍 The Corner Case: Hoisting Behavior console.log(add(2, 3)); // ❌ TypeError: add is not a function var add = function(a, b) { return a + b; }; 👉 Why does this fail? Because only the variable declaration (var add) is hoisted, not the function itself. So internally, JavaScript sees this as: var add; console.log(add(2, 3)); // ❌ add is undefined add = function(a, b) { return a + b; }; ✅ Now Compare with Function Declaration console.log(add(2, 3)); // ✅ 5 function add(a, b) { return a + b; } 👉 Entire function is hoisted — so it works! 💥 Another Tricky Case (Named Function Expression) const foo = function bar() { console.log(typeof bar); }; foo(); // ✅ function bar(); // ❌ ReferenceError: bar is not defined 👉 bar is only accessible inside the function, not outside! 🎯 Key Takeaways ✔ Function expressions are NOT fully hoisted ✔ Only variable declarations are hoisted (var, let, const behave differently) ✔ Named function expressions have limited scope ✔ Always define function expressions before using them #JavaScript #Frontend #CodingInterview #WebDevelopment #JSConcepts #100DaysOfCode

Just finished building a simple Memory Matching Game using HTML, CSS, JavaScript, and jQuery. The goal was to focus on clean logic and a straightforward UI without relying on frameworks. It features a 4×4 grid, move counter, timer, match tracking, and a responsive layout. This project helped me reinforce core JavaScript concepts like event handling, state management, and DOM manipulation, while keeping the design minimal and easy to use. Thanks to Mam Juhinah Batool for the guidance and inspiration during the project- it really helped me think more clearly about clean code and user-focused design. Read the full project breakdown on Medium: https://lnkd.in/dBEf5kzW Source Code: https://lnkd.in/dQ8q7cKv #WebDevelopment #JavaScript #jQuery #Frontend #Projects #Learning

🚀I Built My Own ChaiTailwind Project 🔗 Live: https://lnkd.in/gvEWdZpT 💻 GitHub: https://lnkd.in/gUg62RrN Suraj Kumar Jha Sir, Hitesh Choudhary Sir, Piyush Garg Sir In this project, I built a mini Tailwind-like CSS engine using JavaScript. 💡 Instead of writing CSS, I used custom classes like: chai-p-2 => padding chai-bg-red => background color chai-text-center => text alignment ⚙️ How it works: Scans the DOM Finds all chai-* classes Converts them into styles Applies styles dynamically 🎥 In the video, I explain: ✔️ My approach ✔️ How class parsing works ✔️ Key JavaScript logic ✔️ Live demo in browser #ChaiCode #JavaScript #WebDevelopment #Frontend #BuildInPublic