JavaScript Functions & Execution Flow for Frontend Engineers

🚀 Day 3/90 — Becoming a Job-Ready Frontend Engineer Today’s focus was one of the most misunderstood topics in JavaScript: 👉 Type Coercion & the difference between == and === At first glance, both look similar. But internally, they behave very differently. Here’s what I deeply understood today: 🔹 JavaScript performs automatic type conversion (Implicit Coercion) 🔹 The + operator triggers string conversion when one operand is a string 🔹 Other operators like -, *, / force numeric conversion Example: "5" + 2 → "52" "5" - 2 → 3 Big difference. Then the important part: == (Loose Equality) • Compares value • Converts types if needed 5 == "5" → true === (Strict Equality) • Compares value • Compares type • No conversion 5 === "5" → false I also explored: ✔ Truthy & Falsy values ✔ Why false == 0 is true ✔ Why null == undefined is true but null === undefined is false ✔ Why relying on implicit coercion can create real production bugs Key takeaway: As a frontend engineer, never rely on JavaScript’s “magic conversions.” Be explicit. Be predictable. Strong fundamentals today = fewer bugs tomorrow. Next: Functions & Execution Flow. #FrontendDevelopment #JavaScript #WebDevelopment #ReactJS #NextJS #SoftwareEngineering #100DaysOfCode #ProgrammingJourney #RemoteDeveloper #TechLearning

🚀 Day 6/90 — Becoming a Job-Ready Frontend Engineer Today I studied one of the most powerful and interview-critical JavaScript concepts: 👉 Closures At first, closures felt abstract. But once I understood lexical scope deeply, everything started making sense. Here’s the core idea: A closure is created when a function remembers and accesses variables from its outer lexical scope — even after the outer function has finished execution. This means: ✔ Functions can “remember” data ✔ Variables can stay alive in memory ✔ We can create private state in JavaScript Example insight: When a function returns another function, the inner function still has access to the outer function’s variables. This concept is heavily used in: • React hooks • Event listeners • setTimeout / async callbacks • Data privacy patterns • Functional programming One powerful realization: JavaScript does not garbage collect variables if they are still being referenced by a closure. Understanding closures completely changed how I see function execution and memory behavior. Strong fundamentals today → advanced React tomorrow. Next: Building a mini project using closures + DOM. #FrontendDevelopment #JavaScript #WebDevelopment #Closures #SoftwareEngineering #ReactJS #NextJS #100DaysOfCode #ProgrammingJourney #RemoteDeveloper.

🚀 Mistakes I Made as a Frontend Developer When I started, I focused only on making things work… not on how they should work. Here are some mistakes I made 👇 ❌ Ignoring performance ❌ Writing messy and unstructured code ❌ Not understanding core concepts deeply ❌ Avoiding debugging ❌ Overusing copy-paste from the internet 💡 What I learned ✔ Clean code matters ✔ Performance is important ✔ Understanding > Copying ✔ Debugging is a skill 🔥 Simple Rule Don’t just make it work Make it better 💬 What is one mistake you made as a developer? 🚀 Explaining Frontend in the simplest way #FrontendDevelopment #Angular #WebDevelopment #JavaScript #SoftwareDeveloper #AngularDeveloper

🚀 Day 7/90 — Becoming a Job-Ready Frontend Engineer Today was not about theory. Today was about building. I created a Smart Counter App using: ✔ JavaScript Closures ✔ DOM Manipulation ✔ Event Listeners ✔ Private State Pattern Instead of using a global variable for the counter, I used a closure to keep the state private. Core idea: A function returns methods (increment, decrement, reset), and the internal count variable remains inaccessible from the outside. This helped me understand: 🔹 How JavaScript preserves variables through closures 🔹 How private state works conceptually 🔹 How event-driven programming updates the UI 🔹 How JavaScript execution connects with real user interaction One key realization: React’s state management concept becomes much easier to understand when you truly grasp closures and function scope. I also extended the project by adding: • A minimum value check • A limit message when the counter reaches max Learning by building hits differently.Create a image for this Linkedin post. Next: Arrays deep dive (map, filter, reduce — essential for React). #FrontendDevelopment #JavaScript #WebDevelopment #Closures #DOMManipulation #SoftwareEngineering #ReactJS #NextJS #100DaysOfCode #ProgrammingJourney #RemoteDeveloper

i was wrapped up “Vanilla JS: You Might Not Need a Framework” from Frontend Masters and it was a solid reminder of something we often overlook as frontend engineers. As we grow in our careers, it’s easy to default to frameworks for everything. But going back to Vanilla JavaScript highlights a few important things: • You understand what the browser can already do for you. • You write less abstraction, which often means less complexity • Performance becomes a natural outcome, not something you fight for later • Debugging gets easier when you’re closer to the source This doesn’t mean don’t use frameworks far from it. Frameworks solve real problems at scale. But the takeaway for me is the best engineers don’t rely on tools blindly they understand when not to use them. Sometimes, Vanilla JS is not just enough it’s the better choice. Curious to hear: when was the last time you chose not to use a framework?

🚀 Day 5/90 — Becoming a Job-Ready Frontend Engineer Today I focused on one of the most fundamental (and interview-heavy) JavaScript concepts: 👉 Scope & Hoisting At first, these topics look simple. But when you understand them deeply, you realize how many bugs come from misunderstanding scope behavior. Here’s what I explored: 🔹 Global Scope vs Function Scope vs Block Scope 🔹 Why var is function-scoped (and why it’s risky) 🔹 Why let and const are block-scoped 🔹 What actually happens during the Memory Creation Phase 🔹 How hoisting works internally 🔹 What the Temporal Dead Zone (TDZ) really means 🔹 How the Scope Chain resolves variables One key realization: JavaScript doesn’t “move code up” during hoisting. It allocates memory first, then executes line by line. That small detail changes how you debug real-world applications. Example mindset shift: var → hoisted and initialized as undefined let / const → hoisted but NOT initialized (TDZ) Understanding scope deeply is critical for: ✔ Writing predictable functions ✔ Avoiding accidental globals ✔ Mastering closures ✔ Debugging complex frontend applications Strong fundamentals build strong engineers. Next: Closures — the concept that separates beginners from advanced JavaScript developers. #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #ReactJS #NextJS #100DaysOfCode #ProgrammingJourney #RemoteDeveloper #TechCareer

🚀 Day 1/90 — JavaScript Frontend Engineer Journey Today I officially started my 90-day journey to become a Job-Ready Frontend Engineer. And instead of jumping directly into React or frameworks, I started with the core: 👉 How JavaScript Actually Works Behind the Scenes. Here’s what I learned today: 🔹 JavaScript is single-threaded 🔹 It runs inside an engine like Chrome’s V8 🔹 Every JS program starts with a Global Execution Context 🔹 Execution happens in two phases: 1️⃣ Memory Creation Phase 2️⃣ Code Execution Phase 🔹 Functions are fully hoisted 🔹 Variables declared with var are hoisted and initialized as undefined 🔹 let and const are hoisted but stay inside the Temporal Dead Zone I also deeply understood how the Call Stack works (LIFO principle) and how JavaScript manages function execution internally. This foundation is critical for: Understanding closures Mastering async JavaScript Writing predictable React code Cracking frontend interviews I believe strong fundamentals build strong engineers. 📌 Next: Variables, Data Types & Memory (Stack vs Heap) If you're also learning frontend or switching careers, let’s connect and grow together. #FrontendDevelopment #JavaScript #WebDevelopment #ReactJS #NextJS #100DaysOfCode #SoftwareEngineering #RemoteJobs #SelfLearning #ProgrammingJourney

🚀 Day 2/90 — Becoming a Job-Ready Frontend Engineer Today I went deeper into one of the most important JavaScript foundations: 👉 Variables, Data Types & Memory (Stack vs Heap) Most beginners just memorize var, let, const. Today I understood what actually happens in memory. Here’s what I learned: 🔹 JavaScript stores primitive values (string, number, boolean, null, undefined, bigint, symbol) in the Stack. 🔹 Objects, arrays, and functions are stored in the Heap and accessed by reference. That means: If you copy a primitive → you copy the value. If you copy an object → you copy the reference. Example mindset shift: let a = 5 let b = a Changing b does NOT affect a ✅ But: let user1 = { name: "Fahad" } let user2 = user1 Changing user2.name WILL affect user1 ❗ This concept is critical for: React state management Avoiding mutation bugs Writing predictable frontend applications I also deeply understood: ✔ var vs let vs const ✔ Block scope vs Function scope ✔ Hoisting behavior ✔ Temporal Dead Zone (TDZ) ✔ Why typeof null returns "object" (historical JS bug) Strong fundamentals = Fewer bugs + Better interviews. Tomorrow: Type Coercion & == vs === deep dive. Building in public. Improving daily. 💪 #FrontendDevelopment #JavaScript #WebDevelopment #ReactJS #NextJS #SoftwareEngineering #100DaysOfCode #RemoteDeveloper #ProgrammingJourney #TechCareer

If you're serious about mastering React, don't just learn randomly—focus on the concepts that actually build real-world skills. Here's a clean roadmap 👇 🔹 Core Fundamentals → JSX & Components (Functional vs Class) → Props & State management → Event handling & conditional rendering 🔹 Hooks Mastery → useState, useEffect, useRef → useMemo, useCallback → Custom hooks for reusability 🔹 Advanced Concepts → Context API & prop drilling solutions → React Router (navigation & layouts) → Forms handling (controlled/uncontrolled) 🔹 Performance Optimization → Memoization & lazy loading → Code splitting → Avoiding unnecessary re-renders 🔹 Real-World Skills → API integration (REST/GraphQL) → Error handling & debugging → Project structure & scalability 💡 Consistency + Practice + Projects = Real Growth. Whether you're starting out or preparing for interviews, mastering these topics will put you ahead of most developers. Let's build smarter, not just faster. 💻 #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #CodingJourney

🚀 Day 16 — React Fundamentals Started ⚛️ Continuing my full stack journey, today I stepped into Step 2: Frontend (React Focused) after building a strong JavaScript foundation 💻🔥 Started with React Core Concepts — not just using React, but understanding how it actually works internally 👇 🔹 Covered topics: - What is React & why it’s used - Single Page Application (SPA) concept - Virtual DOM & how React updates UI efficiently - Component-based architecture - JSX & how it converts into JavaScript internally 💡 Key Learning: React is not just about building UI — it’s about efficient rendering, reusable architecture, and understanding how updates happen behind the scenes. 👉 Always remember: - React is a library, not a framework - Virtual DOM helps update only required parts (performance boost ⚡) - Components make code reusable & scalable - JSX is converted into React.createElement (not directly understood by browser) 📌 Step 2 officially started — diving deeper into frontend engineering ⚛️ 📌 Day by day, getting closer to being job-ready 🚀 #ReactJS #FrontendDevelopment #FullStackDeveloper #MERNStack #InterviewPreparation #LearnInPublic #CodingJourney #Developers #Consistency #100DaysOfCode #WebDevelopment #NextJS #Programming #TechJourney #LinkedIn #Growth #Connections