🚀 Day 84 of My #100DaysOfCode Challenge Today I explored an interesting concept in JavaScript — Microtasks vs Macrotasks. JavaScript is single-threaded, but it can still handle asynchronous operations efficiently using the Event Loop. Behind the scenes, tasks are organized into different queues. 1️⃣ Macrotasks Macrotasks include operations like: - "setTimeout" - "setInterval" - DOM events - I/O operations These tasks go into the Macrotask Queue and are executed after the call stack is empty. 2️⃣ Microtasks Microtasks include: - "Promise.then()" - "Promise.catch()" - "MutationObserver" Microtasks have higher priority and run before macrotasks, even if they were scheduled later. Example console.log("Start"); setTimeout(() => { console.log("Macrotask"); }, 0); Promise.resolve().then(() => { console.log("Microtask"); }); console.log("End"); Output Start End Microtask Macrotask Even though "setTimeout" runs with "0ms", the Promise (Microtask) executes first because microtasks are processed before macrotasks. Understanding these small details helps developers debug asynchronous behavior and write more predictable code. Every day I’m discovering how deep and fascinating JavaScript really is. 💻✨ #Day84 #100DaysOfCode #JavaScript #EventLoop #WebDevelopment #LearningInPublic
JavaScript Microtasks vs Macrotasks Explained
More Relevant Posts
-
🚀 Day 88 of My #100DaysOfCode Challenge I thought I knew JavaScript… until I found these 🤯 Today I came across some weird (but real) JavaScript facts that honestly surprised me. Sharing here because I know I’m not the only one who didn’t know this 👇 💡 Things JavaScript does that feel illegal 😅 1️⃣ NaN is not equal to itself console.log(NaN === NaN); // false Yes… even JavaScript is confused here. 2️⃣ typeof null = "object" console.log(typeof null); // "object" This is actually a bug… and it still exists. 3️⃣ Functions can behave like objects function demo() {} demo.x = 10; console.log(demo.x); // 10 I didn’t expect this at all. 4️⃣ This looks correct but it’s not console.log(15 > 10 > 5); // false JavaScript evaluates it step by step… not the way we think. 5️⃣ [] + [] = "" console.log([] + []); // "" This one really broke my brain. JavaScript is not just a language… it’s full of surprises 😄 The more I learn, the more I realize how many small things we usually ignore — but they actually matter a lot. If you knew all of these already… respect 🙌 If not, welcome to the club 🤝 #Day88 #100DaysOfCode #JavaScript #CodingJourney #WebDevelopment #LearningInPublic
To view or add a comment, sign in
-
-
🚀 Day 86 of My #100DaysOfCode Challenge Today I discovered a lesser-known feature in JavaScript — Symbols. Most developers work with object keys using strings, but JavaScript also provides another unique type called Symbol. A Symbol creates a unique and hidden property key that cannot accidentally conflict with other keys. Example const id = Symbol("id"); const user = { name: "Tejal", [id]: 12345 }; console.log(user.name); // Tejal console.log(user[id]); // 12345 Why Symbols are interesting • Every Symbol is unique • Helps create hidden object properties • Prevents accidental property overwriting • Often used internally in libraries and frameworks Even if two symbols have the same description, they are still different. const a = Symbol("key"); const b = Symbol("key"); console.log(a === b); // false Learning about features like Symbols helps me understand how JavaScript works behind the scenes and how large applications manage object data safely. Exploring deeper concepts every day. 💻✨ #Day86 #100DaysOfCode #JavaScript #WebDevelopment #LearningInPublic #CodingJourney
To view or add a comment, sign in
-
-
🚀 Day 85 of My #100DaysOfCode Challenge One of the most confusing things in JavaScript is the "this" keyword. Many developers think "this" always refers to the current object… but that’s not always true. In JavaScript, the value of "this" depends on how a function is called, not where it is written. Let’s see a quick example 👇 const user = { name: "Tejal", greet() { console.log(this.name); } }; user.greet(); ✅ Output Tejal Here "this" refers to the object that called the function. But look at this 👇 const user = { name: "Tejal", greet: () => { console.log(this.name); } }; user.greet(); ❌ Output undefined Why? Because arrow functions don’t create their own "this". They inherit "this" from the surrounding scope. ⚡ Simple rule to remember • Regular functions → "this" depends on how the function is called • Arrow functions → "this" comes from the outer scope Understanding this small concept can save hours of debugging in real projects. JavaScript keeps reminding me that small details often make the biggest difference. #Day85 #100DaysOfCode #JavaScript #CodingJourney #WebDevelopment #LearningInPublic
To view or add a comment, sign in
-
-
🚀 Day 7/100 of #100DaysOfCode Today was all about strengthening JavaScript fundamentals — revisiting concepts that seem simple but are often misunderstood. 🔁 map() vs forEach() Both are used to iterate over arrays, but they serve different purposes: 👉 map() Returns a new array Used when you want to transform data Does not modify the original array Example: const doubled = arr.map(num => num * 2); 👉 forEach() Does not return anything (undefined) Used for executing side effects (logging, updating values, etc.) Often modifies existing data or performs actions Example: arr.forEach(num => console.log(num)); ⚔️ Key Difference: Use map() when you need a new transformed array Use forEach() when you just want to loop and perform actions ⚖️ == vs === (Equality in JS) 👉 == (Loose Equality) Compares values after type conversion Can lead to unexpected results Example: '5' == 5 // true 😬 👉 === (Strict Equality) Compares value AND type No type coercion → safer and predictable Example: '5' === 5 // false ✅ 💡 Takeaway: Small concepts like these make a big difference in writing clean, bug-free code. Mastering the basics is what separates good developers from great ones. 🔥 Consistency > Intensity On to Day 8! #JavaScript #WebDevelopment #CodingJourney #LearnInPublic #Developers #100DaysOfCode #SheryiansCodingSchool #Sheryians
To view or add a comment, sign in
-
-
🚀 Day 39/50 – Scope in JavaScript Today I learned about Scope in JavaScript, which defines where variables can be accessed in a program. 🔹 Scope determines the visibility and accessibility of variables. 📌 Types of Scope in JavaScript 1️⃣ Global Scope – Variables declared outside any function can be accessed anywhere. let name = "Priyanka"; function show() { console.log(name); } show(); 2️⃣ Function Scope – Variables declared inside a function are accessible only within that function. function test() { let msg = "Hello"; console.log(msg); } test(); 3️⃣ Block Scope – Variables declared with let and const inside {} are block-scoped. if(true){ let x = 10; console.log(x); } 4️⃣ Local Scope – Variables declared inside a block or function are local to that area. 💡 Key Learnings: ✅ var → function scoped ✅ let and const → block scoped ✅ Scope helps avoid variable conflicts ✅ Improves code security and readability Thanks for mentors 10000 Coders Raviteja T Abdul Rahman #Day39 #50DaysOfCode #JavaScript #WebDevelopment #FrontendDeveloper #CodingJourney #LearningEveryday
To view or add a comment, sign in
-
-
💻 JavaScript Array Methods – Hands-on Practice Completed Worked on some fundamental Array methods in JavaScript and practiced how they actually behave 👇 ✔️ Used push() and pop() to add/remove elements from the end ✔️ Used unshift() and shift() to work with elements at the beginning ✔️ Explored length to track array size ✔️ Understood the difference between slice() and splice() through practice 💡 Key takeaway: slice() does not modify the original array, while splice() directly changes it — this difference is really important while working with data. Practicing these basics is helping me build a strong foundation in JavaScript 🚀 #JavaScript #WebDevelopment #Frontend #CodingJourney #LearningByDoing
To view or add a comment, sign in
-
-
Day 27 of Learning JavaScript 🚀 Started building a Weather App using API. Goal: Fetch and display weather data. Combining: • API • DOM • Events Feels like a real-world project. #javascript #frontenddeveloper #projects
To view or add a comment, sign in
-
hi connections Day 13 of 30: Mastering the "Sleep" Function in JavaScript! Today’s LeetCode challenge was a deep dive into asynchronous timing. ⏳ The Goal: Write an asynchronous function that sleeps for a specified number of milliseconds. The Lesson: JavaScript is single-threaded, so we can't just "pause" the whole engine. Instead, we use Promises and setTimeout to tell the engine: "Go do other tasks, and come back to this specific line of code after X milliseconds." This is a vital pattern for: ✅ Rate-limiting API calls to stay within quota. ✅ Adding intentional delays for better UI/UX (like loading states). ✅ Polling a server for updates at specific intervals. Understanding the difference between blocking and non-blocking code is what makes for a smooth, high-performance application! #JavaScript #WebDevelopment #AsyncProgramming #LeetCode #CodingChallenge #Day13 #SoftwareEngineering #FrontendTips
To view or add a comment, sign in
-
-
🚀 What I Learned Today – JavaScript Arrays Today I explored Arrays in JavaScript and here are the key takeaways 👇 🔹 Arrays are a collection of items 🔹 They are linear (elements stored sequentially) 🔹 Arrays are mutable (can be changed after creation) 📌 Array Indices Positions of elements in an array (starting from 0) 📌 Looping Through Arrays Used to print or access all elements easily 📌 Useful Array Methods ✔️ push() – add element to end ✔️ pop() – remove element from end ✔️ unshift() – add element to start ✔️ shift() – remove element from start ✔️ toString() – convert array to string ✔️ concat() – merge arrays ✔️ slice() – get part of array (no change to original) ✔️ splice() – modify array (add/remove/replace) 💡 Example: slice(start, end) splice(start, deleteCount, newElement) Learning step by step and building strong fundamentals 💪 #JavaScript #WebDevelopment #CodingJourney #FrontendDevelopment #100DaysOfCode)
To view or add a comment, sign in
-
-
🚀 Day 89 of My #100DaysOfCode Challenge I thought JavaScript automatically manages memory… so we don’t have to worry about it, right? 🤔 Wrong. Today I learned about something most beginners ignore — Garbage Collection in JavaScript. 💡 What actually happens? JavaScript automatically removes unused memory using something called Garbage Collection. It works on a simple idea: 👉 If something is not reachable, it gets removed from memory. 🧠 Example let user = { name: "Tejal" }; user = null; // now previous object becomes unreachable Now JavaScript will automatically clean this memory. --- ⚠️ But here’s the real problem… Even with automatic memory cleanup, memory leaks can still happen. Some common reasons: • Unused event listeners • Closures holding references • Global variables not cleared --- 💭 What I realized I used to think memory management is not my problem as a developer… But now I understand: 👉 Writing clean code also means not holding unnecessary memory --- JavaScript handles a lot for us… but understanding what’s happening behind the scenes makes a huge difference. Learning something new every day 💻✨ #Day89 #100DaysOfCode #JavaScript #WebDevelopment #CodingJourney #LearningInPublic
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development