How JavaScript Runs in Your Browser

What is a DIRECTIVE in .js An awesome colleague I used to work with (tnx Sagi Isha) sent me this new library called Workflow (https://useworkflow.dev/) Its a small, elegant toolkit for orchestrating long-running operations (e.g sending emails, processing payments, etc) and make the logic more durable. Then another friend I showed it to asked - "What is this "use workflow" line doing? Isn’t it just a random string?", so its a great opportunity to talk about directives :) In JavaScript, one can put a bare string at the top of a file or function, and it becomes a #directive. The famous "use strict" works the same. These strings don’t run, don’t get printed, and don’t exist at runtime. They’re signals for the compiler / tooling. For example: "use strict" → tells the JS engine to switch to strict mode "use client" / "use server" → tells Next.js how to bundle "use workflow" → tells the Workflow engine: “This function is a workflow. Track it, persist it, resume it, and retry safely.” One can even create his own “directive” for a custom library. The string itself does nothing in JavaScript, but the tooling or runtime can detect it (for example via a build step, transpiler plugin, or a runtime wrapper) and then change the function’s behavior accordingly. It’s the same trick that powers "use workflow" or "use client", just applied in your own code. #JavaScript #WebDevelopment #CodingTips #Programming #DeveloperLife #JS #TechLearning #OpenSource #SoftwareEngineering

🚨 The #1 JavaScript mistake that's secretly slowing you down! 💡 I used to chain `.map().filter().map()` everywhere thinking I was writing "clean code." Then one day, my colleague showed me the performance monitor on a large dataset. 47ms vs 8ms. I was mortified. Here's the fix that changed everything: // ❌ Before: Multiple iterations const result = users  .map(u => u.age)  .filter(age => age >= 18)  .map(age => age * 2); // ✅ After: Single iteration const result = users.reduce((acc, u) => {  if (u.age >= 18) acc.push(u.age * 2);  return acc; }, []); 🎯 One pass. Same result. 5x faster on large arrays. The lesson? Elegant ≠ Efficient. Always profile your code with real data before optimizing for "readability." 🔥 Which coding myth would you like busted next? Follow for more bite-sized tech wisdom that actually moves the needle. #JavaScript #WebDev #Coding #TechTips #FrontEndDev #PerformanceOptimization #CleanCode

🚀Today I learned: How JavaScript executes inside the browser! We all write JavaScript every day — but have you ever wondered what actually happens behind the scenes when we run our code? Here’s what I learned👇 🔹Step-by-step explanation: 1️⃣Source Code → We write JavaScript in a .js file — just plain text that browsers can’t execute directly. 2️⃣Parsing → The JavaScript engine reads the code, checks for syntax errors, and prepares it for further processing. 3️⃣AST (Abstract Syntax Tree) → The code is converted into an AST, a structured tree that represents the program logic in a machine-understandable format.🌳 4️⃣Interpreter → The AST is passed to the interpreter, which converts it into bytecode for quick startup and execution. 5️⃣Execution & Profiling → While executing bytecode, the engine tracks which parts of the code run most frequently — known as “hot” code. 6️⃣Optimizing Compiler (JIT) → The JIT (Just-In-Time) compiler takes that hot code and compiles it into machine code, making it much faster.⚡ 7️⃣Machine Code Execution → Finally, this optimized machine code runs directly on the CPU, giving JavaScript near-native speed and efficiency. 🧠In simple words: JavaScript uses both an Interpreter (for quick startup) and a JIT Compiler (for optimized performance). Really fascinating to see how much happens behind the scenes every time we run a simple JS file!✨ #TodayILearned #JavaScript #WebDevelopment #Frontend #Programming #V8Engine #LearningEveryday #10000coders #SudheerVelpula Special thanks to Sudheer Velpula Sir and @10000 Coders for the amazing learning journey and constant guidance🙌

JavaScript Insight You Probably Didn’t Know Let’s decode a classic example that often surprises even experienced developers  console.log([] + {}); At first glance, you might expect an error. But JavaScript quietly prints: [object Object] Here’s what actually happens: The + operator triggers type coercion. [] becomes an empty string "". {} converts to "[object Object]". Final Result: "" + "[object Object]" → "[object Object]" Now, flip it: console.log({} + []); This time, the output is 0. Why? Because the first {} is treated as a block, not an object literal. That means JavaScript evaluates +[], which results in 0 Key Takeaway: JavaScript’s type coercion rules can be tricky, but mastering them helps you write cleaner, more predictable, and bug-free code. JavaScript doesn’t just execute your logic it challenges you to think differently about how data types interact. #JavaScript #WebDevelopment #FrontendDevelopment #Programming #CleanCode #Developers #SoftwareEngineering #CodingLife #TechInsights #LearnToCode

Memoization in JavaScript — What Really Happens Behind the Scenes It’s a simple yet powerful optimization technique that stores the results of expensive function calls — and returns the cached result when the same inputs appear again. ✅ Why it matters Boosts performance for repetitive computations. Especially useful for recursive functions like fibonacci or factorial. It’s one of the core ideas behind frameworks like React (think of useMemo). Here’s an example 👇 function memoize(fn) { const cache = new Map(); return function(...args) { const key = JSON.stringify(args); if (cache.has(key)) { console.log("Cache hit for:", key); return cache.get(key); } console.log("Cache miss for:", key); const result = fn(...args); cache.set(key, result); return result; }; } 💡 What’s Happening Behind the Scenes Each unique input is stored as a key in a cache. When the function is called again with the same input, the result is fetched instantly — no recalculation. This saves time and CPU cycles, especially for recursive or data-heavy operations. ✨ Tip: Memoization trades memory for speed — so use it wisely when function calls are expensive and inputs repeat often. #JavaScript #WebDevelopment #Performance #Programming #Coding #Memoization #Frontend #TechTips

I had an argument today on a topic which can be skipped very easily (You don't want to miss reading it) The issue was with understanding the following: ↳ setState() ↳ Mutable & Immutable ↳ Deep and Shallow Copy This looks like an easy concept, but if missed, you will keep scratching your head, or just do vibe coding (which is not recommended) const myInitialState = [ { name: 'name', age: 10 }, { name: 'name1', age: 20 }]; ❌ setState(prevState => prevState.sort((a, b) => a.age - b.age)); ✅ setStatet(prevState => { const sorted = [...prevState]; sorted.sort((a, b) => a.age - b.age)); return sorted; }); Q1. Why does updating the older value doesn't work, and the later works? Q2. Creating a copy via [...prevState] is still a shallow copy, then how does React knows something has changed? Answer 1. The reference matters here. When you change something to the older value, the reference doesn't change, and React thinks, it is still unchanged, hence, no re-render trigger, and no UI updates. Answer 2. Even when you create shallow copy, you are creating a new reference. Creating a new array via "[ ]" → Then shallow copy the items using Spread operator. So the reference of sorted and prevState changes. As soon as React sees that in the return, it triggers re-render, as per "Diffing Algorithm". If you have learnt something new, let your friend learn it too via Repost ♻️ P.S. I have bonus questions in the comment section. Let's check how good do you know React #reactjs #react #javascript #coding #programming #softwareengineering #frontend

Day 8: Scope & Closures In JavaScript, understanding how variables behave inside different parts of your code is essential for building scalable and maintainable applications. Today, I explored an important concept: Scope & Closures Scope determines where variables are accessible whether globally, inside functions, or within blocks. This helps keep code organized, avoids conflicts, and ensures safe data handling. Closures allow functions to “remember” variables from their outer environment, even after that environment is gone. Closures make it possible to create private data and build powerful patterns like counters, modules, and state management logic. Mastering these concepts is key to writing clean, efficient, and secure JavaScript programs. #JavaScript #WebDevelopment #Coding #Frontend #SoftwareEngineering #CleanCode #Developers #TechJourney

8 JavaScript topics that actually matter Been coding for a while now, these keep coming up: → Closures Functions that remember their context. Used everywhere in React hooks and callbacks. → Promises & Async/Await Writing code that waits without freezing. Essential for API calls. → Array Methods map(), filter(), reduce(). Clean data manipulation. → Event Loop How JavaScript handles async ops. Makes everything click once you get it. → Destructuring Cleaner way to pull values from objects and arrays. Saves a lot of lines. → Spread/Rest Operators Copy arrays, merge objects, handle function params. Super useful. → Prototypes & Inheritance How objects actually work under the hood. Important for interviews. → Module Systems Import/export between files. Keeps code organized. These aren't flashy. But knowing them makes everything easier. What topic gave you the most trouble when learning JS? #JavaScript #Coding #WebDevelopment #100DaysOfCode #LearnToCode #FrontendDevelopment #MERNStack #DeveloperTips

Interesting discussion of directives in #JavaScript and the #React ecosystem needing the same mental model building in education that developed for C/C++ pragmas. Viktor Lázár drives home that sending people off to use directives without a nuanced understanding of the layered development stack (including syntax, loaders, build tools, and runtime) results in a collapse in their ability to debug. He built a #TypeScript plugin to make directives a little more legible, which looks interesting. What is a good way to encourage stronger mental models around directives? #Frontend #WebDev #ContinuousLearning https://lnkd.in/g-VJSPZq

🚀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁’𝘀 𝗠𝗼𝘀𝘁 𝗠𝗶𝘀𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗼𝗼𝗱 𝗞𝗲𝘆𝘄𝗼𝗿𝗱: this If you’ve ever scratched your head wondering why this doesn’t point where you expect — you’re not alone 😅 Let’s break it down 👇 What is this? • In JavaScript, this refers to 𝘁𝗵𝗲 𝗼𝗯𝗷𝗲𝗰𝘁 𝘁𝗵𝗮𝘁’𝘀 𝗲𝘅𝗲𝗰𝘂𝘁𝗶𝗻𝗴 𝘁𝗵𝗲 𝗰𝘂𝗿𝗿𝗲𝗻𝘁 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 — but its value 𝗱𝗲𝗽𝗲𝗻𝗱𝘀 𝗼𝗻 𝗵𝗼𝘄 the function is called (not where it’s written). • In Regular Function Declarations / Expressions function showThis() {  console.log(this); } showThis(); // In strict mode → undefined | Non-strict → window (in browser) Here, this is determined by the 𝗰𝗮𝗹𝗹𝗲𝗿. When called directly, it defaults to the global object (window), or undefined in strict mode. • In Object Methods const user = {  name: "Alice",  greet() {   console.log(this.name);  } }; user.greet(); // "Alice" ✅ this points to the object 𝗯𝗲𝗳𝗼𝗿𝗲 𝘁𝗵𝗲 𝗱𝗼𝘁 (user in this case). In Arrow Functions const user = {  name: "Alice",  greet: () => console.log(this.name) }; user.greet(); // ❌ undefined Arrow functions 𝗱𝗼𝗻’𝘁 𝗵𝗮𝘃𝗲 𝘁𝗵𝗲𝗶𝗿 𝗼𝘄𝗻 this — they 𝗶𝗻𝗵𝗲𝗿𝗶𝘁 it from the surrounding (lexical) scope. So here, this refers to the global object, not user. 💡 𝗤𝘂𝗶𝗰𝗸 𝗧𝗶𝗽: Use regular functions for object methods if you need access to the object’s properties. Use arrow functions when you want to preserve the parent scope’s this (like inside a class or callback). 👉 Mastering this is one of the biggest “Aha!” moments in JavaScript. What’s your favorite trick or gotcha with this? #JavaScript #WebDevelopment #Frontend #Coding #LearnToCode #JS #this #software