Day 4 of 100: JavaScript Basics and Interactivity

🚀 Just finished building my JavaScript Complete Theory Notes / Cheat Sheet 📘⚡ Over the past few days, I compiled a structured roadmap of JavaScript concepts covering everything from fundamentals to advanced topics. Here’s what I included 👇 🔹 Variables & Data Types 🔹 Operators, Type Coercion & Control Flow 🔹 Functions, Scope, Closures & Hoisting 🔹 this keyword and prototypes 🔹 Arrays, Objects, Maps & Sets 🔹 ES6+ features like Destructuring, Spread, Rest, Modules 🔹 Async JavaScript (Callbacks, Promises, Async/Await, Event Loop) 🔹 DOM Manipulation & Event Handling 🔹 Web APIs, Storage, and Modern JS Patterns What started as simple revision notes slowly turned into a complete developer reference guide. The best part? While writing this, I didn’t just memorize syntax, I started understanding how JavaScript actually thinks behind the scenes: ⚡ Call Stack ⚡ Heap Memory ⚡ Event Loop ⚡ Microtasks vs Macrotasks Learning never stops. Next step: applying these concepts in real-world projects and interview-focused problem solving 💻🔥 #JavaScript #WebDevelopment #FrontendDeveloper #ReactJS #FullStackDeveloper #CodingJourney #SoftwareDevelopment #LearningInPublic #TechJourney

🚀 Lecture 1: Mastering JavaScript Array Basics (map, filter, reduce) 🔹 Title: JavaScript Array Methods Explained: map(), filter(), reduce() (With Real Use Cases) 🔹 Post Content: If you’re still using loops for everything, you’re slowing yourself down. Modern JavaScript gives you powerful array methods that make your code cleaner, shorter, and more readable. Let’s break down the 3 most important ones: 1️⃣ map() – Transform Data Used when you want to modify every element in an array. Example: const prices = [100, 200, 300]; const discounted = prices.map(p => p * 0.9); 👉 Output: [90, 180, 270] Reality Check: If you're not transforming data, don’t use map(). #mern #webdeveloper #javascriptintern #juniorwebdeveloper

🚀 Day 9/100 — #100DaysOfCode Diving deeper into JavaScript and understanding how it really works behind the scenes 💻 Today was all about moving from basics to advanced concepts that power real-world applications. 📚 What I learned: 🧠 Core Concepts • Scope — understanding where variables are accessible • Execution Context — how JavaScript runs code step-by-step • Closures — functions remembering their outer scope ⚡ Advanced Concepts • this keyword — context of execution • Object-Oriented JavaScript — structuring code using objects 🔄 Asynchronous JavaScript • Callbacks — handling async tasks • Promises — better async handling • Async/Await — clean and readable async code 🌐 API Handling • Fetch API — getting data from servers • HTTP Basics — request & response understanding 💡 Key Insight: JavaScript is not just a language — it’s an ecosystem for building dynamic, real-world applications. 🔥 Day 9 complete. Learning how real apps communicate and function. #JavaScript #AsyncJS #WebDevelopment #100DaysOfCode #CodingJourney #BuildInPublic

I thought JavaScript runs code line by line. It doesn't. Before executing a single line, the JS engine creates something called an Execution Context. Think of it like a stack of plates. Each function call adds a new plate on top. Last plate added is the first one removed. That's your Call Stack. Inside each execution context, two phases happen: Memory Phase — Variables are stored before code runs. var gets stored as undefined. let and const? They exist but are untouchable. That zone is called the Temporal Dead Zone. Execution Phase — Now the code actually runs. Values get assigned. Functions get called. I spent 4 years writing JavaScript. Never knew this was happening under the hood. Day 2. Still here. #JavaScript #BuildingInPublic #100DaysOfCode

🚀 Understanding Factory Functions in JavaScript Ever felt confused using constructors and the new keyword? 🤔 That’s where Factory Functions make life easier! 👉 A Factory Function is simply a function that creates and returns objects. 💡 Why use Factory Functions? ✔️ No need for new keyword ✔️ Easy to understand (perfect for beginners) ✔️ Avoids this confusion ✔️ Helps in writing clean and reusable code ✔️ Supports data hiding using closures 🧠 Example: function createUser(name, age) { return { name, age, greet() { console.log("Hello " + name); } }; } const user = createUser("Sushant", 21); user.greet(); ⚠️ One downside: Methods are not shared (can use more memory) 🎯 Conclusion: Factory Functions are a great way to start writing clean and maintainable JavaScript code without complexity. #JavaScript #WebDevelopment #FrontendDeveloper #CodingJourney #LearnToCode #100DaysOfCode

🚀 30 Days of JavaScript – Day 16 Starting to build more structured programs using JavaScript. 💡 Today’s Project: Contact Manager This program allows users to: • Add contacts (name & phone) • View stored contacts 🧠 Concepts Used: • functions • arrays of objects • oops • menu-driven logic This helped me understand how to organize code into reusable functions. 🎥 Demo below 👇 Full source code in the First comment. #JavaScript #WebDevelopment #CodingJourney #LearningJavaScript #ProblemSolving

Day 5 of My JavaScript Journey 🚀 Today, I learned about if/else statements and type conversion in JavaScript. The if/else statement is used to control the flow of a program based on conditions. Example: if (age > 18) { console.log("Adult"); } else { console.log("Not an adult"); } I also learned about type conversion and coercion. • Type conversion is when we manually change a value from one type to another. • Type coercion is when JavaScript automatically converts types behind the scenes. For example: "5" + 2 = "52" (coercion happens) One thing that stood out to me: JavaScript can behave unexpectedly if you don’t understand type coercion. Key takeaway: Always be mindful of data types when writing conditions and operations. #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode

•I broke my consistency for a while… but I’m back again, and this time with more clarity and discipline ...... Day 29 of my JavaScript journey :- Today was all about deeply understanding how JavaScript handles asynchronous operations and why things sometimes get messy. Here’s what I learned: 🔹Callback Hell •Nested callbacks make code hard to read and maintain •Difficult to debug and scale •Showed me why structured async patterns matter 🔹Asynchronous Task Execution •JavaScript is single-threaded but can handle async tasks efficiently •Operations like API calls, timers, and events don’t block execution •Helped me understand real-world non-blocking behavior 🔹Web APIs (in depth) •Provided by the browser (setTimeout, fetch, DOM events, etc.) •Run outside the JavaScript engine •Push completed tasks to the callback queue 🔹Event Loop & Callback Queue •Event loop continuously checks the call stack and queue •Executes tasks only when the stack is empty •Core mechanism behind async execution #JavaScript #AsyncProgramming #WebDevelopment #LearningInPublic #Day29

🚀 Day 37 - Revision Day 🔁 Today was all about revisiting previously learned JavaScript concepts and strengthening my foundation. No new topics......just focused revision to deepen understanding. 📚 What I revised: • JavaScript fundamentals (variables, data types) • Functions & scope • Arrays and objects • DOM basics • Problem-solving exercises ✅ Key Takeaways: ✔ Revision makes concepts stick better ✔ Small gaps become visible when you revisit ✔ Strong fundamentals = better coding confidence Slowing down today to move faster tomorrow...!💡 #LearnInPublic #JavaScript #WebDevelopment #CodingJourney #Consistency

📌 Learning JavaScript Through Real Projects Recently, I worked on implementing a client-side filtering system using JavaScript — combining search input, status selection, and date filtering. One key improvement I made was restructuring my logic into reusable functions. Instead of handling everything inside an event listener, I: Created a dedicated filtering function Passed dynamic inputs (search text, status, date) Returned filtered results based on conditions This approach improved: ✔ Code readability ✔ Maintainability ✔ Reusability 💡 Takeaway: Writing working code is good — but writing scalable and reusable code is better. I’m continuing to refine how I structure logic as I build more projects. #JavaScript #FrontendDevelopment #SoftwareEngineering #CleanCode #WebDevelopment