JavaScript Hoisting and Temporal Dead Zone Explained

Day 2: The Secret Life of a Function Call — Global vs. Local Execution Context 🚀 Today, I went deeper into the "Big Box" of JavaScript to understand exactly what happens when we call a function. Using this simple square function as an example, here is the line-by-line magic: 🎭 The Two-Phase Performance Phase 1: Memory Allocation Before a single line of code runs, JavaScript scans everything. n, square2, and square4 are allocated memory and set to undefined. The square function gets its own memory space with the entire function code stored inside. Phase 2: Code Execution Line 1: n is assigned the value 2. Line 6: This is where it gets interesting! A Function Invocation happens. 📦 The "Mini Box": Functional Execution Context When square(n) is called, a New Execution Context is created inside the Global one! Memory Phase: A local variable ans is created (undefined). Code Phase: num becomes 2, ans becomes 4. The Return Statement: This is the exit signal. It returns the value 4 to square2 and destroys the local execution context immediately. 📚 The Call Stack: The Manager of it All How does JS keep track of these nested boxes? The Call Stack. It's a stack (LIFO - Last In, First Out). Bottom of stack: Global Execution Context (GEC). When a function is called, it's pushed onto the stack. When it returns, it's popped off. 💡 Interview Tip: Did you know the Call Stack has many names? It’s also called the Execution Context Stack, Program Stack, Control Stack, Runtime Stack, or Machine Stack. Understanding how the stack grows and shrinks is the key to mastering Recursion and avoiding the dreaded "Stack Overflow"! Drop a "🚀" if you’re also following the Namaste JavaScript series! #JavaScript #WebDevelopment #CallStack #ExecutionContext #ProgrammingLogic #FrontendEngineer #CodingCommunity #JSFundamentals

There's always something to gain from going back to the fundamentals. Between client projects and building out systems, I've been carving out time to sharpen my JavaScript. Recently covered: → Primitive vs Reference Data Types → Number, Null, Undefined, BigInt, and Symbols → The typeof operator → Ternary operators → Introduction to Object Destructuring None of this is glamorous. But the designers and developers who write clean, predictable code are almost always the ones who took the fundamentals seriously. Still a few more concepts on the list. Sharing the progress as I go. #JavaScript #WebDevelopment #Webflow #LearningInPublic

hi connections Day 22 of 30: Extending the Prototype with LeetCode 2619 🚀 Today’s challenge, Array Prototype Last, dives into one of JavaScript’s most powerful features: Prototypal Inheritance. Instead of writing a standard function, the task was to enhance the global Array object so that every array can call .last() to retrieve its final element. The Logic By adding a method to Array.prototype, we make it available to every array instance. Inside the function, the this keyword refers to the array itself, allowing us to access its length and indices. Key Takeaways: The "this" Context: Understanding how this refers to the calling object is crucial for building custom utilities. Edge Case Handling: In this problem, returning -1 for empty arrays is a specific requirement that differs from the usual undefined. Efficiency: Accessing an element by index is O(1), making this a lightning-fast operation regardless of array size. Customizing prototypes is a common practice in library development, and mastering it helps in writing cleaner, more intuitive code for complex applications. One more day down, more logic mastered! 💻✨ #JavaScript #LeetCode

🚨 JavaScript Brain Teasers That Will Mess With Your Mind. ❓ console.log(["A"] + ["B"]) 👉 Output: "AB" ❓ let arr1 = [1,2,3] let arr2 = [4,5,6] console.log(arr1 + arr2) 👉 Output: "1,2,34,5,6" ❓ console.log(+null) 👉 Output: 0 ❓ console.log(+"hello") 👉 Output: NaN ❓ let arr = [1,2,3] let str = "1,2,3" console.log(arr == str) 👉 Output: true ❓ console.log(10 == [10]) 👉 Output: true ❓ console.log(10 == [[[[10]]]]) 👉 Output: true ❓ var fruits = ["orange", "mango", "banana"] var fruitObj = { ...fruits } console.log(fruitObj) 👉 Output: {0: "orange", 1: "mango", 2: "banana"} ❓ console.log(null ?? true) 👉 Output: true ❓ console.log(undefined ?? true) 👉 Output: true 🔥 Takeaway: Most of this comes down to type coercion and how JS internally converts values. #JavaScript #WebDevelopment #Coding #Frontend #Programming #JavaScriptTips #JavaScriptTricks #JSConcepts #LearnJavaScript #FrontendDevelopment #FrontendDeveloper #WebDevCommunity #CodingTips #CodeNewbie #ProgrammingLife #DeveloperCommunity #DevLife #CodeChallenge #DailyCoding #CodeWithMe #TechContent #SoftwareDevelopment #FullStackDeveloper #JSDevelopers #ProgrammingTips #CodeDaily #DevTips

Early on, I used var for everything in JavaScript. Then I learned why that's a problem. JavaScript has three ways to declare variables: var — function-scoped, can be re-declared, and has hoisting quirks that cause subtle bugs. Avoid it in modern code. let — block-scoped, can be reassigned. Use it when the value needs to change. const — block-scoped, cannot be reassigned. Use it by default for everything that doesn't change. My rule of thumb: Start with const. If you need to reassign, use let. Never use var. This isn't just style preference — it's about writing predictable, debuggable code. When I open a file and see const everywhere, I immediately know those values shouldn't change. It's self-documenting. In a team environment, readable and predictable code is just as important as working code. Do you still reach for var out of habit? It's worth breaking.

JavaScript Under the Hood For the past two weeks, I have been delving into the internal workings of JavaScript. Here are the topics I have covered in detail: * Window object * Memory execution phase * Code execution phase * Global Execution Context * Function Execution Context * Closures and lexical scopes * Binding the 'this' keyword * Reference types * Heap and stack * DOM: * Repaint * Reflow * C++ DOM nodes * Event capturing and bubbling * Render tree Asynchronous JavaScript: * Event loop * Call stack * Promises * Microtasks * Macrotasks * Callback hell Objects: * Prototypes * The 'this' keyword * Shallow copy * Deep copy And many more topics. you can watch Lydia Hallie Youtube channel to learn some of the concepts . youtube channel ** https://lnkd.in/dFPqHBUv

Day 01: Precision Matters 🔢 Kicking off my coding journey by tackling a classic: The Plus Minus Challenge. The Problem: Given an array of integers, calculate the ratios of positive numbers, negative numbers, and zeros. The catch? The output must be precise to six decimal places. The Solution: It’s all about iteration and formatting. By looping through the array and categorizing each element, we can determine the counts. The key to meeting the precision requirement in JavaScript is using the .toFixed(6) method. javascript function plusMinus(arr) { let n = arr.length; let positive = 0, negative = 0, zero = 0; for(let val of arr) { if(val > 0) positive++; else if(val < 0) negative++; else zero++; } console.log((positive/n).toFixed(6)); console.log((negative/n).toFixed(6)); console.log((zero/n).toFixed(6)); } plusMinus(arr); Key Takeaway: Even simple logic requires attention to detail—especially when it comes to floating-point precision! #CodingChallenge #JavaScript #ProblemSolving #100DaysOfCode #DataStructures

🚀 Dynamic Currying in JavaScript — Why it actually matters At first, currying feels like a trick: sum(1)(2)(3) But the real power isn’t syntax — it’s reusability. 💡 The idea 👉 Fix some arguments now 👉 Reuse the function later 🔧 Example const filter = fn => arr => arr.filter(fn); const filterEven = filter(x => x % 2 === 0); filterEven([1,2,3,4]); // [2,4] Instead of repeating logic everywhere, you create reusable building blocks. ⚡ Real-world uses API helpers → request(baseUrl)(endpoint) Logging → logger("ERROR")(msg) Event handlers → handleClick(id)(event) Validation → minLength(8)(value) 🧠 Key takeaway Currying isn’t about fancy functions. It’s about writing code that is: ✔ Reusable ✔ Composable ✔ Cleaner Libraries like Lodash and Ramda use this pattern heavily. Once this clicks, your approach to writing functions changes completely. #JavaScript #WebDevelopment #FunctionalProgramming #Currying #CleanCode #Frontend #Coding #100DaysOfCode #DeveloperJourney #TechCommunity

🚀 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

🚀 I finally understood Closures in JavaScript (and it was confusing at first) At first, I thought every function call resets variables… But closures completely changed my understanding. Here’s the simple idea 👇 👉 A closure is when a function remembers variables from its outer function, even after the outer function has finished. Example: function outer() { let count = 0; return function () { count++; console.log(count); }; } const counter = outer(); counter(); // 1 counter(); // 2 counter(); // 3 💡 Why does this work? Because the inner function “remembers” the variable count. Even though outer() has already executed, the value is not lost. 🔥 Key takeaway: Normal functions → reset values every time Closures → keep values alive This concept is widely used in: ✔️ Counters ✔️ Data hiding ✔️ Event handlers Still practicing and improving my JavaScript fundamentals 💻 Have you ever struggled with closures? 🤔 #JavaScript #WebDevelopment #MERNStack #Coding #Learning #100DaysOfCode