Today I learn about the Shortest code in JavaScript, guess what it is ? it is an "empty .js file" 🚀 because, when we run a empty file in js, a global execution context (GEC) sill created ✅, although it does not allocate any memory space for variables and functions but still it stores the window object inside it. Even with 0 bytes of code, the engine still creates a **Global Execution Context**. #javascript JavaScript Notes

Many beginners get confused when they start using JavaScript with React. The reason is JSX. Let’s simplify it. JSX looks like HTML. Same structure. Same feel. But JSX is JavaScript. JSX works like HTML in syntax. You can enter JavaScript using curly braces. Inside curly braces, you can use expressions only. Anything that returns a value. Variables work. Arrays work. Objects work. Map works. The ternary operator works. Statements do not work. If else is not allowed. For is not allowed. Switch is not allowed. The key idea is simple. JSX itself is an expression. Because of that, you can place JSX inside curly braces. You can store JSX in a variable. You can pass JSX to a function. You can use it in if else logic outside the markup. There is one more rule. A component must return one root element. When you need more, use a Fragment. This works because JSX is transformed into createElement. createElement returns a value. Once this clicks, React becomes clearer. Your code becomes easier to read. When was the last time you tried to use if directly inside JSX and got an error? #React #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment

DAY 7 OF POSTING REACT CONTENT ⚛️ WHY DOES REACT CODE LOOK LIKE HTML INSIDE JAVASCRIPT? 🤔 It looks like HTML, but it’s not HTML. React understands only JavaScript. So this syntax is just a clean way to write JavaScript for UI. This is called JSX. JSX exists only to make UI code: 👉 easier to read 👉 easier to write 👉 easier to manage Behind the scenes, JSX is converted into normal JavaScript. 💬 Did this explanation make JSX feel simpler? #ReactJS #ReactBasics #JavaScript #FrontendDevelopment #LearnInPublic #WebDevelopment #CodingJourney

The weirdest value in JavaScript — explained fast. 😈 This is the edited version. NaN is not a number… And it’s not equal to itself either. A quick JS concept every developer must know. #CodeBreakDev #JavaScript #NaN #JSConcepts #InterviewPrep

DAY 22 OF POSTING REACT CONTENT ⚛️ WHAT ARE ES MODULES? 🤔 Modern JavaScript uses ES Modules to split code into separate files. Instead of writing everything in one file, we can: 👉 export something from one file 👉 import it into another file React heavily depends on ES Modules. Every component you create is usually exported and imported somewhere else. #ReactJS #JavaScript #ESModules #FrontendDevelopment #LearnInPublic #WebDevelopment #CodingJourney

💡 JavaScript Call Stack 🧠 What is the Call Stack? It keeps track of which function is currently running in JavaScript. ⚡ Why do we need it? JavaScript executes code one function at a time Call Stack maintains execution order 🧠 Think Like This Function called → pushed to stack Function finished → popped from stack 🎯 Interview One-Liner Call Stack manages function execution order. 📌 Used In Function calls Recursion Error stack traces #JavaScript #CallStack #ExecutionContext #FrontendDevelopment #InterviewTips

The delay in setTimeout is not the exact timer at which its callback function will get executed. The timer of setTimeout is a threshold, not an absolute, and is the minimum time after which the callback function can be executed. When the time reaches, it will be scheduled and executed as soon as possible. In the case of JavaScript and Event Loop, it will be scheduled in the task queue. When the call stack is free and there are no callbacks to be executed, the setTimeout callback will get executed. It is important to note that the timer is the first phase of the event loop So, when the callbacks are executed, the poll phase occurs, and timer callbacks are promoted from the task queue to the call stack, and it gets executed. So, as shown in the video, even though setTimeout was to be executed after 1 second, it gets done after 10 seconds. I do a deep dive into foundational concepts & how things work under the hood. Consider connecting with or following me, Ali Raza, to get along with the journey. #nodejs #javascript #react

Day 8 of 15 –Learn Frontend in 1 Minute JavaScript doesn’t run magically in the browser. It follows a very strict order. There is only one main thread. Only one thing can run at a time. What confuses most developers is this: JavaScript can start async work, but it doesn’t execute it in parallel. When you call setTimeout, fetch data, or attach events: -JavaScript hands the task to the browser -continues running the next line -comes back later when the stack is free This is why code sometimes logs in an unexpected order. Nothing is random. The rules are just invisible at first. Once you understand that JavaScript never multitasks, a lot of “weird” bugs stop being weird.

💡 What is Lit.js? As part of my journey learning Lit.js, here’s how I currently understand it: Lit is a JavaScript library built on top of 𝐖𝐞𝐛 𝐂𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬 that helps you create: • 𝗥𝗲𝘂𝘀𝗮𝗯𝗹𝗲 𝗨𝗜 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 • 𝐖𝐢𝐭𝐡 𝐩𝐥𝐚𝐢𝐧 𝐇𝐓𝐌𝐋 & 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 • 𝐖𝐢𝐭𝐡𝐨𝐮𝐭 𝐛𝐞𝐢𝐧𝐠 𝐥𝐨𝐜𝐤𝐞𝐝 𝐢𝐧𝐭𝐨 𝐚 𝐟𝐫𝐚𝐦𝐞𝐰𝐨𝐫𝐤 What stood out to me: ✅ Very small and fast ✅ Uses web standards ✅ Works with any framework (or none) It feels like a great option for design systems and long-term maintainability. Have you explored Lit.js or Web Components yet? 👇 #LitJS #WebComponents #FrontendDevelopment #JavaScript

🔄 Async/Await in JavaScript — Simple Explanation async/await is a modern way to handle asynchronous code in JavaScript. It makes code that works with Promises look clean and easy to read — like 👉 Key Points 🔹 async makes a function return a Promise 🔹 await pauses execution until the Promise resolves 🔹 Use try...catch for error handling 🎯 Why It Matters 🔹 Cleaner code 🔹 Better readability 🔹 Easier debugging Modern JavaScript development is incomplete without understanding async/await. #JavaScript #WebDevelopment #AsyncProgramming