JavaScript Fundamentals: Hoisting and Global Execution Context

🚀 Day 11 of My JavaScript Learning Journey Today I learned about JavaScript Scopes and Function Execution Context (FEC) — a core concept to understand how JavaScript manages variables and executes code. 📌 Key concepts I explored: 🔹 Scopes in JavaScript • Global Scope – Variables accessible throughout the program • Local Scope – Variables accessible within a function • Block Scope – Variables declared with let and const inside {} 🔹 Key Difference • var → Function scoped • let & const → Block scoped 🔹 Function Execution Context (FEC) Every time a function is called, JavaScript creates a new execution context. ⚙️ FEC Lifecycle: 1️⃣ Memory Creation Phase • Variables are hoisted and initialized • Functions are stored in memory 2️⃣ Execution Phase • Code runs line by line • Variables get their actual values 🔹 FEC Components • Variable Environment • Scope Chain (access to outer scope) • this keyword 💡 Understanding scopes and execution context helps in writing efficient, bug-free, and optimized JavaScript code. Step by step, I’m strengthening my JavaScript fundamentals and internal working knowledge. 💻✨ #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #LearningInPublic #DeveloperJourney #ProgrammingBasics

Day 19 of my JavaScript journey 🚀 Built a Registration Form Validator using HTML, CSS, and JavaScript. This project validates user inputs like name, email, password, and ensures correct data before submission. This project helped me practice: • Form validation logic • Regular expressions (Regex) • DOM manipulation • Handling user input errors 🔗 Live Demo: https://lnkd.in/gs7ADxub 💻 GitHub Repo: https://lnkd.in/gkcgwdie Learning how to build more secure and user-friendly forms step by step. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

🚀 Day 4 of My JavaScript Learning Journey Today I learned about the building blocks of JavaScript code, which help the JavaScript engine understand and process programs. 📌 Key concepts I explored: • Tokens – The smallest units of code in the source text. • Keywords – Reserved words that have special meaning in JavaScript (like if, for, let, etc.). • Identifiers – User-defined names for variables, functions, or objects. • Literals – Fixed values written directly in the code (like "hello", 42, true). ⚙️ During the parsing phase, the JavaScript engine reads the source code and converts it into a sequence of tokens. These tokens help build the structure of the program and allow the engine to execute it correctly. Step by step, I’m strengthening my understanding of JavaScript fundamentals and how code is processed internally. 💻✨ #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #LearningInPublic #DeveloperJourney #ProgrammingBasics

🚀 Day 15 of My JavaScript Learning Journey Today I explored one of the most important concepts in JavaScript — how it actually works behind the scenes! 🤯 Here’s what I learned 👇 🧠 JavaScript Engine & Single Thread Concept JavaScript runs on a single thread — meaning it executes one task at a time. But still, it feels fast… how? 👀 ⚙️ What Makes JS Synchronous By default, JavaScript executes code line by line (synchronously). But real-world apps need more power! 🌐 Understanding Web APIs Browsers provide Web APIs (like setTimeout, DOM events) that handle async tasks outside JS engine 💡 📥 Callback Queue & Task Queue Async tasks go into queues and wait for their turn to be executed. 🔁 Event Loop Explained The Event Loop checks if the call stack is empty and then pushes tasks from the queue — this is how async magic happens! ✨ 📌 Summary & Key Takeaways: ✔ JS is single-threaded but handles async operations smartly ✔ Event Loop is the heart of async behavior ✔ Web APIs make non-blocking execution possible 📚 Prerequisites I Used: • Basic HTML & CSS • VS Code • Browser 🎯 Skills I'm Building: 💻 Interactive web apps 🧩 Strong JavaScript fundamentals 🎨 Clean & maintainable code #Day15 #JavaScript #LearnJavaScript #WebDevelopment #CodingJourney #FrontendDevelopment #Programming #Beginners #JavaScriptBasics #EventLoop #AsyncJavaScript

🚀 Day 1/30 — JavaScript Journey Begins “You’re not bad at JavaScript… You just learned it the WRONG way.” Most beginners jump straight into frameworks like React… Without understanding the language itself. That’s the biggest mistake. ❌ Today, we fix that. 👇 🔥 What I Learned Today: ✅ What is JavaScript (and why it runs everywhere) ✅ How JS works in the browser ✅ Variables (let, const, var) — the RIGHT way ✅ Basic data types (string, number, boolean, null, undefined) 💡 Reality Check: If your foundation is weak… No framework can save you. Strong basics = Strong developer. 🎯 Day 1 Task: ✔️ Write 10 variable examples ✔️ Experiment in browser console ✔️ Understand let vs const deeply ⚡ Commitment: I will show up for 30 days. No excuses. No shortcuts. 💬 Comment “DAY 1” if you’re starting with me 🔁 Follow for daily JavaScript mastery #JavaScript #WebDevelopment #CodingJourney #LearnToCode #30DaysChallenge

Day 22 of my JavaScript journey 🚀 Updated my Contact Form by adding JavaScript functionality to make it more interactive and user-friendly. Features: ✔️ Form validation (required fields & email format) ✔️ Real-time error messages ✔️ Prevent submission on invalid input ✔️ Improved user experience with dynamic feedback This update helped me understand how to move from just designing forms to building functional and user-friendly applications. 🔗 Live Demo: https://lnkd.in/gcawshv3 💻 GitHub Repo: https://lnkd.in/gPDFb_vJ Learning not just to build, but to improve and refine my projects step by step. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

🔑 Mastering the this keyword in JavaScript! Understanding this can be a game-changer for your JavaScript journey! It can be tricky, but once you get it, your code will be more dynamic and powerful. Here’s a quick breakdown: 🌍 Global Context: In the global scope, this refers to the global object (like window in browsers). 🏠 Object Method: When used inside an object method, this refers to the object itself. 🛠️ Function Context: In regular functions, this defaults to the global object (or undefined in strict mode). 🏃♂️ Arrow Functions: They do not have their own this; they inherit it from the parent scope. 💡 Pro Tip: Use bind(), call(), or apply() to explicitly set the value of this. Follow ABDUL REHMAN ♾️ For More Updates 👍👍 Learn more from w3schools.com , JavaScript Mastery ✨ #JavaScriptTips #WebDevelopment #CodingInsights

Day 2 of My JavaScript Journey Today was all about understanding functions and scope — core concepts that make JavaScript powerful 💻 🔹 Created both normal functions and arrow functions with parameters 🔹 Worked with objects + functions to print dynamic output 👉 “Rahul is learning React” 🔹 Learned about scope (Global vs Local) 📌 Inside function → Local value 📌 Outside function → Global value 🔹 Built a simple multiply function using arrow syntax 💡 Key Takeaway: Functions help write reusable code, and understanding scope avoids unexpected bugs. Step by step, improving my logic and confidence in JavaScript 🔥 #JavaScript #CodingJourney #WebDevelopment #100DaysOfCode #LearnInPublic #ReactJS

🚀 Day 2 of My JavaScript Learning Journey Today I explored the concept of the JavaScript Engine, which is responsible for executing JavaScript code and converting it into machine-understandable instructions. 📌 Key things I learned: • A JavaScript Engine executes JavaScript by converting it into optimized machine code. • Google Chrome uses the V8 Engine. • Mozilla Firefox uses SpiderMonkey. • Apple Safari uses JavaScriptCore. ⚙️ I also learned the basic workflow of how JavaScript code runs: code.js → Parser → AST → Interpreter → Compiler → Output Understanding how JavaScript engines work helps developers write more efficient and optimized code. Step by step, I’m building my understanding of JavaScript and modern web development. 💻✨ #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #LearningInPublic #DeveloperJourney #TechLearning

📌 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