JavaScript this keyword behavior with destructuring

JavaScript Output-Based Question What will be logged (line by line)? Comment your answer in order (Don’t run the code) Correct Output: 10 2 undefined undefined Why this output comes? (Step-by-Step) Global scope a = 5; Creates a global variable a.. obj.printA(); • Called as a method of obj • this → obj • this.a → 10 fn(); const fn = obj.printA; fn(); • Function is called without context • this → global object (non-strict mode) • a = 2 updates the global variable a • this.a → 2 obj.printA.call(this); • this explicitly set to global context • But this.a is not a property lookup here • Result → undefined obj.printA.bind(this)(); • bind permanently binds this to global • this.a still doesn’t exist as an object property • Result → undefined Key Takeaways ✔ this depends on how a function is called ✔ Variable assignment ≠ object property ✔ Extracting a method loses its context ✔ call sets this temporarily ✔ bind sets this permanently One wrong assumption about this can break production code. #JavaScript #ThisKeyword #CallBindApply #InterviewQuestions #FrontendDeveloper #MERNStack

If 𝐡𝐨𝐢𝐬𝐭𝐢𝐧𝐠 still feels like “JavaScript moves code to the top,” your fundamentals need reinforcement. JavaScript never rearranges your code. What actually happens is simpler—and more powerful. Before execution, the engine creates memory. That’s where `var`, `let`, `const`, and function declarations are registered. Understanding this changes everything. During the **memory creation phase**: * `var` is hoisted and initialized with `undefined` * `let` and `const` are hoisted but placed in the **Temporal Dead Zone (TDZ)** * Function declarations are fully stored in memory Then comes the **execution phase**, where code runs line by line and values are assigned. That’s why this works: `console.log(a)` → `undefined` `var a = 10;` But this throws an error: `console.log(b)` → ReferenceError `let b = 10;` 𝐒𝐚𝐦𝐞 𝐡𝐨𝐢𝐬𝐭𝐢𝐧𝐠. 𝐃𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐭 𝐢𝐧𝐢𝐭𝐢𝐚𝐥𝐢𝐳𝐚𝐭𝐢𝐨𝐧 𝐫𝐮𝐥𝐞𝐬. In production, shallow understanding leads to undefined values, unpredictable refactors, and “JavaScript is weird” complaints. It’s not weird. It’s precise. Practical reminders: * Avoid `var` in modern codebases * Declare variables at the top of their scope intentionally * Understand TDZ before debugging scope-related errors Strong engineers don’t memorize slogans—they understand execution context. Can you clearly explain why `let` behaves differently from `var` without saying “it’s not hoisted”? #JavaScript #WebDevelopment #FrontendEngineering #CleanCode #ExecutionContext #SoftwareEngineering #ProgrammingFundamentals

🧠Mastering JavaScript — One Concept at a Time (2/32) Today I am very happy because my understanding of hoisting, scope, and sharing with you is now complete. 🔥Scope in Real Life Scope simply means: Where can I access this variable? Block Scope → Code inside {} like in loops, if , etc. Function Scope → Code inside a function let and const follow block scope. var ignores block scope — which leads to bugs. 🧨Hoisting JavaScript prepares memory before running code. It moves all declarations to the top — this is called hoisting. But: var is hoisted and set to undefined let and const are hoisted but not initialised — so accessing them early gives ReferenceError ⚠Common Confusions (JS Reality Checks) const doesn't make things fully constant. It protects the variable, not the value. var is outdated — it's better to use let and const let and const behave similarly, but const gives more safety use it when you're not planning to reassign. 🧠 Mindset Rule Use const by default. Use let only when you plan to change the value. Avoid var — it belongs to the past. Revisiting these fundamentals makes JavaScript feel less “magical” and more predictable. In the next post, I’ll go deeper into how the Data Type and Type System. How long did it take you to understand scope and hoisting truly? #JavaScript #LearningInPublic #WebDevelopment #FrontendDevelopment #MasteringJavaScript

🚀 Common Types of Errors in JavaScript While coding in JavaScript, you’ve probably seen errors in the console. Understanding them makes debugging much easier. Here are the most common types: 🔹 1. Syntax Error Occurs when the code breaks JavaScript rules. let a = ; // ❌ Missing value The code won’t run until the syntax is fixed. 🔹 2. Reference Error Occurs when trying to use a variable that doesn’t exist. console.log(x); // ❌ x is not defined 🔹 3. Type Error Occurs when an operation is performed on the wrong data type. let num = 10; num.toUpperCase(); // ❌ Not a string 🔹 4. Range Error Occurs when a value is out of the allowed range. let arr = new Array(-1); // ❌ Invalid array length 🔹 5. Logical Error The code runs, but the output is wrong. let total = 10 + "5"; console.log(total); // "105" ❌ Instead of 15 💡 Tip: • Syntax errors stop execution • Runtime errors crash execution • Logical errors give wrong results Understanding errors is the first step to becoming better at debugging. #JavaScript #WebDevelopment #FrontendDevelopment #CodingTips #Debugging

𝗗𝗮𝘆 𝟱/𝟵𝟬: 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗛𝗼𝗶𝘀𝘁𝗶𝗻𝗴 — 𝗧𝗵𝗲 "𝗜𝗻𝘃𝗶𝘀𝗶𝗯𝗹𝗲" 𝗟𝗶𝗳𝘁 I learned that JavaScript doesn’t always run top-to-bottom. It has a unique behavior called 𝗛𝗼𝗶𝘀𝘁𝗶𝗻𝗴, where declarations are moved to the top of the scope before execution. Here is the "Cheat Sheet" for how JS handles different types: 🔹 𝘃𝗮𝗿 (𝗧𝗵𝗲 𝗟𝗼𝗼𝘀𝗲 𝗪𝗮𝘆): Hoisted but initialized as undefined. You can use it before the code line, but you won't get the value. 🔹 𝗹𝗲𝘁 & 𝗰𝗼𝗻𝘀𝘁 (𝗧𝗵𝗲 𝗠𝗼𝗱𝗲𝗿𝗻 𝗪𝗮𝘆): Hoisted but stuck in the 𝗧𝗲𝗺𝗽𝗼𝗿𝗮𝗹 𝗗𝗲𝗮𝗱 𝗭𝗼𝗻𝗲 (𝗧𝗗𝗭). Accessing them early triggers a ReferenceError. 🔹 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 (𝗧𝗵𝗲 𝗩𝗜𝗣𝘀): Fully hoisted. You can call a function at the top of your script even if it’s defined at the very bottom! 𝗧𝗵𝗲 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆: Just because you can use hoisting doesn't mean you should. Professional code always declares variables first to keep logic clear and bug-free. Understanding these "quirks" is what separates a coder from an Engineer. 👨💻 #90DaysOfCode #JavaScript #PentagonSpace #FullStack #WebDev #Hoisting #CleanCode

🚀 Understanding Variables & Functions in JavaScript (Behind the Scenes) When we declare a variable or write a function in JavaScript, a lot happens internally before execution. • Memory Creation Phase Before running the code, JavaScript allocates memory: Variables are stored in memory. If declared with var, they are initialized as undefined. Functions are fully stored in memory (hoisted completely). • Execution Phase Now the code runs line by line. Values replace undefined, and functions execute when called. • Stack & Heap Stack Memory → Stores primitive values and function execution context. Heap Memory → Stores objects, arrays, and reference types. • Main Thread JavaScript is single-threaded. All variables, functions, and execution contexts go through the Call Stack (main thread). • Why Memory Address Matters? For reference types, the variable doesn’t store the actual value — it stores the address pointing to heap memory. That’s why copying objects behaves differently from copying primitives. Understanding this helps in: ✔ Avoiding bugs ✔ Writing optimized code ✔ Understanding hoisting ✔ Managing memory better JavaScript may look simple, but internally it follows a well-structured execution model. #JavaScript #WebDevelopment #MemoryManagement #DSA #Frontend Vikas Kumar Pratyush Mishra

const in javascript It prints 2. Even though we used const. Most developers think const means unchangeable. So when an object’s property updates successfully, it feels wrong. Like JavaScript ignored its own rule. But it didn’t. const prevents reassignment. It doesn’t freeze the value inside. The variable is locked. The object it points to isn’t. This subtle distinction causes real confusion in frontend development, interviews, and production code. Understanding reference vs value is one of those JavaScript quirks that separates confidence from correctness. If you're learning clean JavaScript, debugging tricky behavior, or preparing for JavaScript interview concepts, this is foundational. Follow CodeBreakDev for code that looks right… but isn’t.

Stop Mutating Your State! 🛑 Understanding Deep Copy vs. Shallow Copy in JavaScript As JavaScript developers, we often run into "ghost bugs" where updating one object accidentally changes another. This happens because of how JavaScript handles References. The Pitfall: Shallow Copying Using the spread operator (...) is great for simple, flat objects, but it only performs a "shallow" copy. If your object contains nested objects or arrays, the references to those nested items are still shared between the original and the copy. The Solution: Modern Deep Copy In the past, we relied on JSON.parse(JSON.stringify(obj)) which is slow and fragile or external libraries like Lodash. Today, we have a superior, built-in solution: structuredClone(). Why should you switch to structuredClone()? Predictable State: Essential for frameworks like React where immutability is key. Clean Code: No more "Spread Hell" where you manually spread five nested levels just to update one property. Performance: It is a native browser API, highly optimized, and handles complex data types natively. (See the code snippet below for the direct comparison!) How are you handling complex state updates in your projects? Are you still using the spread operator for everything, or have you fully adopted structuredClone? Let’s discuss in the comments! 🚀 #JavaScript #WebDevelopment #ReactJS #CleanCode #FullStack #SoftwareEngineering #ProgrammingTips #webdevelopment #programming #TechFuture

⚡ There’s an invisible engine inside JavaScript Quietly deciding what runs first and what has to wait. That engine is the Event Loop. Most developers use promises, async/await, and setTimeout every day. But very few actually understand how the execution order is decided. That’s why: Logs appear in the “wrong” order Async bugs feel random Event loop questions confuse even experienced devs In Part 6 of the JavaScript Confusion Series, I break down the Event Loop with a simple visual mental model— so you understand it once, and never forget it. Read it here: https://lnkd.in/d_KnvPeV 💬 Comment “LOOP” and I’ll send the next part. 🔖 Save it for interview prep. 🔁 Share with a developer who still fears async code. #javascript #webdevelopment #frontend #programming #reactjs #learnjavascript #softwareengineering

Today I solved a classic JavaScript problem: Removing duplicates from an array without using built-in methods like Set. Instead of relying on shortcuts, I implemented the logic manually using nested loops to fully understand how duplicate detection works internally. 🧠 Problem Given an array like: Copy code [1, 2, 2, 3, 4, 3] Return: [1, 2, 3, 4] 🔍 My Approach I created a new empty array called unique to store only distinct values. I looped through each element of the original array. For every element, I checked whether it already exists inside the unique array. If it does not exist, I pushed it into the unique array. If it already exists, I skipped it. This approach uses: An outer loop to iterate over the original array An inner loop to check for existing values A boolean flag (exists) to track duplicates 💡 Why I Chose This Approach While JavaScript provides a built-in way to remove duplicates using: [...new Set(arr)] I intentionally avoided it to: Strengthen my understanding of loops Improve my logical thinking Practice writing interview-style solutions Understand time complexity and algorithm behavior ⏱ Time Complexity O(n²) — because for each element, we may check the entire unique array. 🎯 Key Learning This problem helped me understand: Nested loop logic How duplicate detection works internally The importance of loop structure and placement Debugging mistakes like incorrect loop conditions Building strong fundamentals makes advanced concepts easier later. Consistency > shortcuts 💪 #JavaScript #ProblemSolving #WebDevelopment #100DaysOfCode #FrontendDeveloper #DSA #LearningInPublic