setTimeout vs setInterval in JavaScript: Key Differences and Use Cases

I used to manipulate objects directly in JavaScript. Until one day, it didn't work. And the errors were almost impossible to trace. Meanwhile JavaScript has built a clean, deliberate API specifically for the job I had been doing messily for a long time. What is Reflect? Reflect is a built-in JavaScript object that provides a set of methods for performing fundamental operations on objects. The same operations you've always done, but in a more controlled, predictable, and reliable way. Reading properties. Setting values. Checking existence. Deleting keys. Reflect does all of this in a clean way. The most important Reflect methods: -> Reflect.get() - reads a property from an object. const user = { name: "Markus" }; Reflect.get(user, "name"); -> "Markus" Same as user.name - but more explicit and safer in dynamic contexts. -> Reflect.set() - sets a property value and returns true or false. const user = { name: "Markus" }; Reflect.set(user, "name", "John"); -> true console.log(user.name); -> "John" Unlike direct assignment - it tells you whether it succeeded by returning true. -> Reflect.has() - checks if a property exists. Reflect.has(user, "name"); -> true Same as the in operator - but cleaner in functional and dynamic code. -> Reflect.deleteProperty() - deletes a property safely. Reflect.deleteProperty(user, "name"); -> true Same as the delete keyword - but returns a boolean instead of throwing silently. -> Reflect.ownKeys() - returns all keys of an object. const user = { name: "Markus", age: 25}; Reflect.ownKeys(user); -> ["name", "age"] Where Reflect truly shines - with Proxy. Reflect and Proxy are natural partners. Inside a Proxy trap, Reflect lets you perform the default operation in a clean way - without rewriting the behaviour from scratch. Example: const proxy = new Proxy(user, { get(target, key) { console.log(`Reading: ${key}`); return Reflect.get(target, key); -> clean default behaviour } }); Reflect doesn't replace what you already know. It refines it. It makes the operations you perform on objects more intentional, consistent, and significantly easier to debug when something goes wrong.

#js #19 **Optional Chaining in Javascript** Optional Chaining (?.) in JavaScript is used to safely access nested properties without causing errors if something is null or undefined. 🔹 Why We Need It Without optional chaining: const user = null; console.log(user.name); // ❌ Error: Cannot read property 'name' 👉 This crashes your code. ✅ With Optional Chaining const user = null; console.log(user?.name); // undefined ✅ (no error) 👉 If user is null or undefined, it stops and returns undefined 🔹 Syntax obj?.propertyobj?.[key]obj?.method() ✅ Examples 📌 1. Nested Objects const user = { profile: { name: "Navnath" }}; console.log(user?.profile?.name); // Navnath console.log(user?.address?.city); // undefined 📌 2. Function Calls const user = { greet() { return "Hello"; }}; console.log(user.greet?.()); // Hello console.log(user.sayHi?.()); // undefined (no error) 📌 3. Arrays const arr = [1, 2, 3]; console.log(arr?.[0]); // 1 console.log(arr?.[5]); // undefined 🔥 Real Use Case (Very Common) const response = { data: { user: { name: "Navnath" } }}; const name = response?.data?.user?.name; 👉 Avoids writing multiple checks like: if (response && response.data && response.data.user) ... ⚠️ Important Points ❌ Doesn’t Work on Undeclared Variables console.log(user?.name); // ❌ if user is not defined at all ⚠️ Stops Only on null / undefined const obj = { value: 0 }; console.log(obj?.value); // 0 ✅ (not skipped) 🔥 Combine with Nullish Coalescing (??) const user = {}; const name = user?.name ?? "Guest"; console.log(name); // Guest 🧠 Easy Memory Trick ?. → "If exists, then access" Otherwise → return undefined, don’t crash #Javascript #ObjectOrientedProgramming #SoftwareDevelopment

How to build a before/after image reveal effect… (Without using JavaScript): 🚀 Ever seen those sliders where you compare two images by dragging? That’s called an image comparison effect, and it’s widely used in: → Photo editing tools → Landing pages → Case studies But here’s the catch: We used to rely heavily on JavaScript for this. --- 💥 What we used before (JavaScript approach): → Track mouse position (`mousemove`) → Calculate width dynamically → Update styles on every frame → Handle drag logic manually Something like this: ```id="jsold1" const container = document.querySelector(".compare"); const afterImage = document.querySelector(".after"); container.addEventListener("mousemove", (e) => {  const rect = container.getBoundingClientRect();  const x = e.clientX - rect.left;  const percent = (x / rect.width) * 100;  afterImage.style.clipPath = `inset(0 ${100 - percent}% 0 0)`; }); ``` 👉 Works… but feels heavy for such a simple UI. --- Now here’s the fun part: We don’t need JavaScript anymore. --- Here’s how to build it using pure CSS: 1️⃣ Stack both images inside a container: The trick is to place one image over the other. ```id="htmlstep1" <div class="compare">  <img src="before.jpg" />  <img src="after.jpg" class="after" /> </div> ``` --- 2️⃣ Make the container relative: This allows the top image to position correctly. ```id="cssstep2" .compare {  position: relative;  width: 400px;  overflow: hidden; } ``` --- 3️⃣ Position the top image: Place it exactly over the first one. ```id="cssstep3" .after {  position: absolute;  top: 0;  left: 0; } ``` --- 4️⃣ Hide it using clip-path: This is where the magic happens. ```id="cssstep4" .after {  clip-path: inset(0 100% 0 0);  transition: clip-path 0.6s ease; } ``` 👉 This makes the image invisible from the right side. --- 5️⃣ Reveal it on hover: ```id="cssstep5" .compare:hover .after {  clip-path: inset(0 0 0 0); } ``` 👉 Now the image smoothly reveals on hover. --- And if you want to go one step ahead, try this: ✨ Show both images at once: ```id="cssstep6" .compare:hover .after {  clip-path: inset(0 50% 0 0); } ``` ✨ Add a diagonal reveal: ```id="cssstep7" .after {  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } .compare:hover .after {  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } ``` --- Anyways: CSS is no longer just styling. It’s handling: → Interactions → Animations → UI behavior 👉 Things we used to depend on JavaScript for. And honestly… Sometimes CSS is all you need. #CSS #WebDevelopment #Frontend #UI #UX

Prototypes & the Prototype Chain If you’re using class in JavaScript, you’re already using prototypes whether you realize it or not. Today was about understanding what that actually means under the hood. What I focused on Prototypes & the chain Every object in JavaScript has an internal link to another object called its prototype. You don’t see it directly, but it’s always there. When you try to access a property, JavaScript follows a simple process: * First, it checks the object itself * If not found, it looks at the object’s prototype * If still not found, it keeps going up the chain * This continues until it either finds the property or reaches null That lookup flow is called the prototype chain. A simple example: ``` function Person(name) {  this.name = name; } Person.prototype.sayHello = function () {  return "Hello " + this.name; }; const user = new Person("Naim"); console.log(user.sayHello()); ``` Here’s what’s happening: * `user` does not have `sayHello` directly * JavaScript looks at `Person.prototype` * It finds `sayHello` there and executes it That’s the prototype chain in action. Manual inheritance (no class) Built inheritance from scratch using constructor functions to understand how objects can share behavior. ``` function Animal(name) {  this.name = name; } Animal.prototype.speak = function () {  return this.name + " makes a sound"; }; function Dog(name) {  this.name = name; } Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog; const d = new Dog("Rex"); console.log(d.speak()); ``` What’s happening here: * `Dog` doesn’t have `speak` * Its prototype is linked to `Animal.prototype` * So JavaScript finds `speak` there through the chain This is the same mechanism behind class-based inheritance. Modifying prototypes A few behaviors stood out while testing: * Adding a method to a prototype affects all existing instances * Property lookup happens at runtime, not when the object is created * If an object defines its own property, it overrides the prototype (shadowing) Example: ``` Person.prototype.age = 25; console.log(user.age); // 25 user.age = 30; console.log(user.age); // 30 (shadows prototype) ``` Takeaway Prototypes are how JavaScript actually shares behavior between objects. The prototype chain is how JavaScript resolves properties. Once this clicks, things like inheritance, method sharing, and even some common bugs start making a lot more sense. #javascript #webdevelopment #frontend #learninginpublic

🚀 Today we are going to analyse the JavaScript microtask queue, macrotask queue, and event loop. A junior developer once asked me during a code review: "Why does Node.js behave differently even when the code looks simple?" So I gave him a small JavaScript snippet and asked him to predict the output. console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); He answered confidently: Start Timeout Promise End But when we ran the code, the output was: Start End Promise Timeout He looked confused. That’s when we started analysing how JavaScript actually works internally. 🧠 Step 1: JavaScript is Single Threaded JavaScript runs on a single thread. It executes code line by line inside the call stack. So first it runs: console.log("Start") → Start console.log("End") → End Now the stack becomes empty. ⚙️ Step 2: Macrotask Queue setTimeout goes to the macrotask queue. Even though timeout is 0ms, it does not execute immediately. It waits in the macrotask queue. Examples of macrotasks: • setTimeout • setInterval • setImmediate • I/O operations • HTTP requests ⚡ Step 3: Microtask Queue Promise goes to the microtask queue. Examples of microtasks: • Promise.then() • Promise.catch() • Promise.finally() • process.nextTick (Node.js) • queueMicrotask() Microtasks always get higher priority. They execute before macrotasks. 🔁 Step 4: Event Loop Now the event loop starts working. The event loop checks: Is the call stack empty? Yes Check microtask queue Execute all microtasks Then execute macrotasks So execution becomes: Start End Promise Timeout Now everything makes sense. 🏗️ Real Production Example Imagine a Node.js API: app.get("/users", async (req, res) => { console.log("Request received"); setTimeout(() => console.log("Logging"), 0); await Promise.resolve(); console.log("Processing"); res.send("Done"); }); Execution order: Request received Processing Logging Why? Because Promise (microtask) runs before setTimeout (macrotask). This directly affects: • API response time • Logging • Background jobs • Queue processing • Performance optimization 🎯 Why Every Node.js / NestJS / Next.js Developer Should Know This Because internally: • Async/Await uses Promises • API calls use Event Loop • Background jobs use Macrotasks • Middleware uses Microtasks • Performance depends on queue execution Without understanding this, debugging production issues becomes very difficult. 💡 Final Thought JavaScript is not just a language. It is an event-driven execution engine. If you understand microtask queue, macrotask queue, and event loop, you don’t just write code — you understand how the runtime thinks. And once you understand the runtime, you start building faster and more scalable systems. #JavaScript #NodeJS #EventLoop #Microtasks #Macrotasks #NextJS #NestJS #SystemDesign #SoftwareEngineering

Sorting is one of those interesting JavaScript concepts that many developers use every day, but fewer truly understand. Sorting an array of strings feels straightforward: const arr = ["banana", "apple", "aa", "fish", "cherry"]; console.log(arr.sort()); // ['aa', 'apple', 'banana', 'cherry', 'fish'] This works exactly as expected ✅ But things get interesting when we try the same with numbers: const arr = [100, 4, 3, 7, 0]; console.log(arr.sort()); // [0, 100, 3, 4, 7] At first glance, this looks wrong. So… why does this happen? 👀 The default behavior of sort() in JavaScript is lexicographic sorting, which means values are compared as strings, character by character, based on their Unicode values. So JavaScript internally treats this like: ["100", "4", "3", "7", "0"] Now it compares them as strings, not as numbers. For example: "0" comes first "100" comes before "3" because "1" < "3" That’s why the output becomes: [0, 100, 3, 4, 7] ✅ The solution: Comparator function, to sort numbers properly, we use a comparator: arr.sort((a, b) => a - b) This makes JavaScript compare the actual numeric values. It follows the three-way comparison rule: return < 0 → a comes before b return > 0 → b comes before a return 0 → keep original order Internally, the logic is similar to: if (result < 0) { // keep a before b } else if (result > 0) { // move b before a } else { // keep current order } So now numeric sorting works correctly: const arr = [100, 4, 3, 7, 0]; console.log(arr.sort((a, b) => a - b)); // [0, 3, 4, 7, 100] 🔽 Descending order For descending, just reverse the subtraction: const arr = [100, 4, 3, 7, 0]; console.log(arr.sort((a, b) => b - a)); // [100, 7, 4, 3, 0] This small concept taught me an important lesson: Don’t just memorize sort((a,b)=>a-b) Understand why it works. That deeper understanding makes debugging and interviews much easier. #JavaScript #WebDevelopment #Frontend #SDE #SoftwareEngineering #CodingJourney #JobSearch

🚀 JavaScript: The Art of Execution Context & Hoisting (Why it REALLY matters) If you’ve ever wondered why JavaScript behaves the way it does, the answer lies in two core concepts: 👉 Execution Context 👉 Hoisting These aren’t just theory—they define how your code actually runs under the hood. 🧠 1. Execution Context — The Engine Behind Every Line Every time JavaScript runs code, it creates an Execution Context. There are mainly two types: Global Execution Context (GEC) → created when your program starts Function Execution Context (FEC) → created every time a function is invoked 🔄 How it works: Each execution context is created in two phases: 1️⃣ Memory Creation Phase (Hoisting Phase) Variables → stored as undefined Functions → stored with full definition 2️⃣ Code Execution Phase Values are assigned Code runs line by line ⚡ 2. Hoisting — Not Magic, Just Memory Allocation Hoisting is often misunderstood. It doesn’t “move code up”— 👉 it simply means JavaScript allocates memory before execution begins 🔍 Example that explains EVERYTHING console.log(a); // ? console.log(b); // ? console.log(myFunc); // ? var a = 10; let b = 20; function myFunc() { console.log("Hello JS"); } 🧠 Memory Phase: a → undefined b → (in Temporal Dead Zone) myFunc → full function stored 🏃 Execution Phase: console.log(a); // undefined console.log(b); // ❌ ReferenceError console.log(myFunc); // function definition 💣 The TRICKY Part (Arrow Functions vs Normal Functions) console.log(add); const add = () => { return 2 + 3; }; ❓ Output? 👉 ReferenceError: Cannot access 'add' before initialization Why? Because: const variables are hoisted but not initialized They stay in the Temporal Dead Zone (TDZ) So unlike normal functions: console.log(sum); // works function sum() { return 5; } 👉 Function declarations are fully hoisted with definition 👉 But arrow functions behave like variables ❌ 🔥 Key Takeaways ✔ JavaScript creates a new execution context for every function ✔ Memory is allocated before execution starts ✔ var → hoisted as undefined ✔ let / const → hoisted but in TDZ ✔ Function declarations → fully hoisted ✔ Arrow functions → treated like variables 🎯 Why This Matters Understanding this helps you: Debug errors faster ⚡ Write predictable code 🧩 Master interviews 💼 Think like the JavaScript engine 🧠 💡 JavaScript is not weird—you just need to think in terms of execution context. #JavaScript #WebDevelopment #Frontend #Coding #100DaysOfCode #AkshaySaini #Hoisting #ExecutionContext

𝗗𝗲𝘀𝗶𝗴𝗻𝗶𝗻𝗴 𝗖𝘂𝘀𝘁𝗼𝗺 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 𝗜𝗺𝗽𝗹𝗲𝗺𝗲𝗻𝘁𝗮𝘁𝗶𝗼𝗻𝘀 𝗜𝗻 𝗝𝗦 JavaScript is single-threaded, but it can handle asynchronous operations using the event loop. The event loop manages a call stack, an event queue, and a callback queue. Here's how it works: - The event loop pushes tasks from the queues onto the stack when it's empty. - This allows for non-blocking execution of callbacks, making applications responsive. - The event loop is used in web servers, user interfaces, and other applications. To create a custom event loop, you need to understand the standard event loop operation. Here are the basic steps: - Create a call stack to manage the current execution context. - Create a task queue to house events that need to be executed after the stack is empty. - Create a microtask queue to contain promises or tasks that execute before any tasks in the task queue. You can implement a custom event loop using a class: ``` is not allowed, using plain text instead class CustomEventLoop { constructor() { this.callStack = []; this.taskQueue = []; this.microtaskQueue = []; } run() { while (this.callStack.length > 0 || this.taskQueue.length > 0 || this.microtaskQueue.length > 0) { // Execute from microtask queue first while (this.microtaskQueue.length > 0) { const microtask = this.microtaskQueue.shift(); this.callStack.push(microtask); microtask(); this.callStack.pop(); } // Next, execute tasks from the task queue while (this.taskQueue.length > 0) { const task = this.taskQueue.shift(); this.callStack.push(task); task(); this.callStack.pop(); } } } enqueueMicrotask(microtask) { this.microtaskQueue.push(microtask); } enqueueTask(task) { this.taskQueue.push(task); } } ``` You can enhance this implementation by adding error handling mechanisms. When designing a custom event loop, consider the following: - Error handling: use try/catch blocks to prevent unhandled promise rejections or runtime errors. - Concurrency: make the task queue work in a way that delays the execution of certain tasks under specific conditions. - Microtasks and tasks: understand the differences between them and consider the practical implications in your implementation. - Backpressure: handle backpressure in high-throughput environments by allowing the consumer of data to signal readiness. - Performance: measure the performance of your custom event loop versus native implementations. Source: https://lnkd.in/gnPQzJmi

🚀 JavaScript Simplified Series — Day 23 A website without interaction is boring… 😴 No clicks No input No response Just static content ❌ 🤔 Real Question How does a website know… 👉 When you click a button? 👉 When you type in an input? 👉 When you scroll? This is where Events come in. 🔥 What is an Event? An event is something that happens in the browser 👉 Click 👉 Hover 👉 Key press 👉 Scroll JavaScript listens to these events and reacts. 🔹 Adding an Event Listener let button = document.querySelector("button") button.addEventListener("click", function() { console.log("Button Clicked") }) 👉 When user clicks → function runs 🔹 Common Events // Click button.addEventListener("click", fn) // Input input.addEventListener("input", fn) // Key press document.addEventListener("keydown", fn) 🔹 Real Example let btn = document.querySelector("button") let heading = document.querySelector("h1") btn.addEventListener("click", function() { heading.innerText = "You clicked the button!" }) 👉 Click → text change 😎 🔹 Event Object JavaScript automatically gives event details button.addEventListener("click", function(event) { console.log(event) }) 📌 You get info like: 👉 Mouse position 👉 Target element 👉 Key pressed 🔥 Real Life Example Think of a doorbell 🔔 You press → sound comes 👉 Action → Reaction Same in JS: User action → Event → Response 🔥 Simple Summary Event → user action addEventListener → listen to event function → response 💡 Programming Rule Websites react to users. Events make that possible. If you want to learn JavaScript in a simple and practical way, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling (Next Post) Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 JavaScript Simplified Series — Day 22 You can select elements… But what’s the use if you can’t **change them?** 🤔 Real power of JavaScript starts when you **manipulate the DOM** 😎 --- ## 🤔 Real Problem Socho tumhare paas ek website hai: ```html id="dm1" <h1 id="title">Hello</h1> <button>Click Me</button> ``` Ab tum chahte ho: 👉 Button click hone par text change ho 👉 New element add ho 👉 Style change ho Ye sab kaise hoga? --- ## 🔥 Solution → DOM Manipulation --- ## 🔹 1. Changing Text ```javascript id="dm2" let heading = document.querySelector("#title") heading.innerText = "Welcome to JavaScript" ``` 👉 Text change ho gaya 😎 --- ## 🔹 2. Changing HTML ```javascript id="dm3" heading.innerHTML = "<span>Hello World</span>" ``` 📌 HTML content bhi change kar sakte ho --- ## 🔹 3. Changing Styles ```javascript id="dm4" heading.style.color = "red" heading.style.backgroundColor = "yellow" ``` 👉 Direct CSS apply kar sakte ho --- ## 🔹 4. Creating New Element ```javascript id="dm5" let newPara = document.createElement("p") newPara.innerText = "This is new paragraph" ``` --- ## 🔹 5. Adding Element to Page ```javascript id="dm6" document.body.appendChild(newPara) ``` 👉 New element page par add ho gaya --- ## 🔹 6. Removing Element ```javascript id="dm7" newPara.remove() ``` 👉 Element delete ho gaya --- ## 🔥 Real Life Example Think of DOM like a **live document 📝** 👉 Text change karo 👉 Naya content add karo 👉 Design update karo Sab kuch JavaScript control karta hai --- ## 🔥 Simple Summary innerText → text change innerHTML → HTML change style → design change createElement → new element appendChild → add element remove → delete element --- ### 💡 Programming Rule **Websites are not static. JavaScript makes them dynamic.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) --- 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday