JavaScript Coding Challenge: Explaining Type Coercion

Hello, Tech Wizards 👋 🔥 JavaScript Coding Challenge – Day 6 | Event Loop Logic 🔥 What will be the output? console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); Think carefully about execution order. ✅ Answer: Start End Promise Timeout Why? 1️⃣ Synchronous code runs first → "Start" then "End" 2️⃣ Promises go to the microtask queue 3️⃣ setTimeout goes to the macrotask queue After the call stack is empty: Microtasks run first → "Promise" Then macrotasks → "Timeout" 📌 Concepts covered: Call Stack Microtask vs Macrotask Event Loop priority Most people assume setTimeout runs before Promise. It doesn’t. #JavaScript #FrontendDevelopment #WebDevelopment #CodingChallenge #100DaysOfCode #LearnInPublic #SoftwareDeveloper #TechCommunity #DeveloperJourney #WomenInTech

Day 4 of 30 Days of JavaScript💻....#JavaScript30 Today’s focus was on working with some of the most powerful and commonly used JavaScript array methods: 1 . filter() Used to extract specific data from arrays based on conditions. 2 . map() Learned how to transform array data into a new format. 3 . sort() Sorted complex datasets like objects and strings alphabetically and numerically. 4 . reduce() Takes an array and reduces it into one final result. Through these exercises, I understood how JavaScript can process datasets efficiently using clean and readable functional-style code. Working through these concepts step by step is helping me strengthen my logic and gain more confidence in writing JavaScript, which will definitely support me in frontend development and problem solving. #JavaScript #WebDevelopment #LearningInPublic #CodingJourney #FrontendDevelopment #30DaysOfCode

🚀 JavaScript Concepts Series – Day 6 / 30 📌 Closures in JavaScript 👀 Let’s Revise the Basics 🧐 A closure is when a function remembers variables from its outer scope even after the outer function has finished execution. 🔹 Key Points • Inner function can access outer variables • Data persists even after function execution • Useful for data privacy and state management 🔹 Example function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 1 counter(); // 2 💡 Key Insight Closure → Function + its lexical scope Remembers → Outer variables after execution Closures are widely used in callbacks, event handlers, and React hooks. More JavaScript concepts coming soon. 🚀 #javascript #js #webdevelopment #frontenddeveloper #coding #programming #developers #softwaredeveloper #learnjavascript #javascriptdeveloper #codinglife #devcommunity #webdev #reactjs #mernstack #codingjourney #codeeveryday #developerlife #100daysofcode #techlearning

🚀 Understanding Hoisting in JavaScript Many developers hear that JavaScript moves variables and functions to the top, but what actually happens behind the scenes? In JavaScript, hoisting occurs during the compilation phase, before the code executes. The JavaScript engine first scans the entire code and allocates memory for variables and functions. This means: • var variables are hoisted and initialized with undefined • let and const are also hoisted but remain in the Temporal Dead Zone (TDZ) until their declaration line is reached • Function declarations are fully hoisted, allowing them to be called before they appear in the code Example: console.log(a); var a = 10; Output: undefined Internally JavaScript treats it like this: var a; console.log(a); a = 10; ⚠️ Important: JavaScript does not physically move code to the top. During compilation the engine simply registers declarations in memory before execution begins. Understanding hoisting helps developers better grasp execution context, scope, and the JavaScript engine's behavior. #JavaScript #WebDevelopment #Frontend #Programming #Coding

🧠 JavaScript Closures — The Concept That Feels Confusing (Until It Clicks) Closures are not magic… they’re just how JavaScript remembers things. 👉 Definition: A closure is when a function “remembers” variables from its outer scope even after that outer function has finished executing. 💻 Example: function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 1 counter(); // 2 counter(); // 3 🤯 Why this works? Even though "outer()" is done, the "inner()" function still has access to "count". That’s a closure. 🔥 Real Use Cases: ✔ Data privacy (like private variables) ✔ Creating counters ✔ Maintaining state in functions ✔ Used heavily in React (hooks concept) 💡 Simple Way to Remember: 👉 “A function + its remembered environment = Closure” I learned this concept from 👉 Sheryians Coding School #javascript #frontend #webdevelopment #coding #developers #100DaysOfCode

🚀 Arrays are NOT real arrays in JavaScript. That was one of the most interesting things I learned today while studying Arrays in JavaScript. At first, arrays seem simple — just a collection of elements. But under the hood, JavaScript arrays are actually objects with special behavior, not fixed-size contiguous memory structures like in languages such as C++. What I learned about Arrays: • Arrays in JavaScript are mutable • They can store multiple data types • They are dynamic in size Key operations I practiced: • Adding/removing elements → push(), pop(), shift(), unshift() • Looping → classic for loop and modern iteration methods • Searching → indexOf(), lastIndexOf(), includes() • Manipulation → slice(), splice() • Conversion → join() (array → string) • Spread operator → modern and powerful way to copy/merge arrays One important insight: The sort() method can behave unexpectedly with numbers because it sorts values as strings by default. Example: [10, 2, 5].sort() // Output -> [10, 2, 5] To sort numbers correctly, we need a comparison function. To summarize everything, I created a detailed carousel Notes (Notes given by Rohit Negi). Course Instructor: Rohit Negi | Youtube Channel: Coder Army #JavaScript #WebDevelopment #LearningJourney #BuildInPublic #FrontendDevelopment #Fullstackdevelopment #Coding

⚠️ A Common JavaScript Hoisting Myth Many developers say: “JavaScript moves variable and function declarations to the top of the code.” But that’s not actually true. Nothing is physically moved. What really happens is that before the code starts executing, the JavaScript engine runs a memory creation phase where it scans the code and allocates memory for variables and functions. • "var" - initialized with "undefined" • "let" and "const" - created but stay in the Temporal Dead Zone (TDZ) • Functions - their full definition is stored in memory So hoisting is not about moving code, it’s about how the JavaScript engine prepares memory before execution begins. The deeper I go into JavaScript internals, the more interesting it gets.🤓 #JavaScript #BackendDevelopment #NodeJS #SoftwareEngineering #SystemDesign #Programming #LearningInPublic

🚀 JavaScript Execution Flow — Simplified Ever wondered how JavaScript actually runs your code behind the scenes? 🤔 Here’s a quick breakdown 👇 🧠 JavaScript Engine works with: • Memory Heap → stores variables • Call Stack → executes functions ⚡ Execution happens in 2 phases: 1. Memory Creation (variables → undefined, functions stored) 2. Code Execution (runs line by line) 🔄 Call Stack manages function execution step-by-step ⏳ Event Loop handles async tasks like: • setTimeout • API calls • Promises 🔥 That’s why output becomes: Start → End → Async 💡 JavaScript is single-threaded but still handles async like a pro! If you’re learning JS, understanding this flow will level up your debugging & logic building skills 💯 #JavaScript #WebDevelopment #Coding #Frontend #NodeJS #Programming #Developers #LearnToCode #100DaysOfCode #Tech

🚀 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

Have you ever faced unexpected behavior when copying objects in JavaScript? It’s a common mistake to assume that using `Object.assign` or the spread operator creates a deep copy. Imagine you're working in a team where one developer updates a nested object, only for others to see those changes reflected unexpectedly! The rule of thumb is to use `structuredClone` for complex objects to ensure you get a true deep copy. A hidden pitfall is that shallow copies only duplicate the first level of properties, leaving nested objects to reference the same memory. Remember, understanding these nuances can save you from debugging headaches and help you write cleaner, more predictable code! Keep leveling up your JavaScript skills, and you'll become the go-to developer on your team! ✨🚀💻 #programming #webdev #coding #javascript #structuredClone