JavaScript undefined vs not defined: Debugging errors in code

Day 45/50 – JavaScript Interview Question? Question: What is the difference between call(), apply(), and bind()? Simple Answer: All three set the this context explicitly. call(thisArg, arg1, arg2, ...) invokes immediately with individual arguments. apply(thisArg, [args]) invokes immediately with an array of arguments. bind(thisArg) returns a new function with this permanently bound, without invoking. Why it matters in real projects: These methods are essential for method borrowing, event handlers with correct context, React class component methods, and functional programming patterns. Understanding them prevents common this binding bugs and enables powerful composition techniques. One common mistake: Confusing when to use each method. Use call when you know arguments, apply when you have an array, and bind when you need a reusable function with fixed context. Also, forgetting that arrow functions can't have their this rebound. Bonus: const person = { name: 'Alice', greet(greeting, punctuation) { console.log(`${greeting}, ${ this.name }${punctuation}`); } }; const person2 = { name: 'Bob' }; // call() - invoke immediately with individual args person.greet.call(person2, 'Hello', '!'); // "Hello, Bob!" // apply() - invoke immediately with array person.greet.apply(person2, ['Hi', '?']); // "Hi, Bob?" // bind() - return new function (doesn't invoke) const greetBob = person.greet.bind(person2); greetBob('Hey', '.'); // "Hey, Bob." // Practical use cases: // 1. Method borrowing const arrayLike = { 0: 'a', 1: 'b', length: 2 }; const arr = Array.prototype.slice.call(arrayLike); console.log(arr); // ['a', 'b'] // Modern alternative const arr2 = Array.from(arrayLike); // 2. Finding max/min with apply const numbers = [5, 2, 9, 1, 7]; const max = Math.max.apply(null, numbers); // 9 // Modern alternative const max2 = Math.max(...numbers); // 3. Event handlers with correct context class Button { constructor(label) { this.label = label; this.clicks = 0; } handleClick() { this.clicks++; console.log(`${this.label}: ${this.clicks} clicks`); } render() { const btn = document.createElement('button'); // ✗ Wrong - loses context btn.addEventListener('click', this.handleClick); // ✓ Right - preserves context btn.addEventListener('click', this.handleClick.bind(this)); } } // 4. Partial application with bind function multiply(a, b) { return a * b; } const double = multiply.bind(null, 2); console.log(double(5)); // 10 console.log(double(10)); // 20 // 5. Function composition function add(x, y) { return x + y; } const add5 = add.bind(null, 5); const result = [1, 2, 3].map(add5); // [6, 7, 8] // Polyfill for bind (interview favorite) Function.prototype.myBind = function(context, ...args) { const fn = this; return function(...newArgs) { return fn.apply(context, [...args, ...newArgs]); }; }; // Arrow functions can't be rebound const arrowFunc = () => { console.log(this.name); }; const obj = { name: 'Test' }; arrowFunc.call(obj); // Won't bind 'this' to obj!

Day 35/50 – JavaScript Interview Question? Question: What is the new keyword and what happens when you use it? Simple Answer: The new keyword creates an instance of a constructor function or class. It performs four steps: creates an empty object, sets the prototype, binds this to the new object, and returns the object (unless the constructor explicitly returns another object). 🧠 Why it matters in real projects: Understanding new is fundamental to JavaScript's prototypal inheritance and OOP patterns. It's crucial when working with classes, custom data structures, and understanding how frameworks like React create component instances. 💡 One common mistake: Forgetting new when calling a constructor, causing this to refer to the global object (or undefined in strict mode) instead of creating a new instance. Also, not knowing that arrow functions can't be used as constructors. 📌 Bonus: // Constructor function function Person(name, age) { this.name = name; this.age = age; } Person.prototype.greet = function() { return `Hello, I'm ${this.name}`; }; // Using new keyword const alice = new Person('Alice', 30); // What happens behind the scenes: function Person(name, age) { // 1. const this = Object.create(Person.prototype); // 2. this.__proto__ = Person.prototype; this.name = name; // 3. Bind properties to this this.age = age; // 4. return this; (implicit) } // Common mistakes: // ✗ Forgetting new const bob = Person('Bob', 25); // undefined, this = window! console.log(window.name); // "Bob" - polluted global! // ✓ With new const charlie = new Person('Charlie', 35); // ✓ // Arrow functions can't be constructors const PersonArrow = (name) => { this.name = name; }; const dave = new PersonArrow('Dave'); // ✗ TypeError! // ES6 Classes (syntactic sugar over prototypes) class Employee extends Person { constructor(name, age, title) { super(name, age); // Must call before using this this.title = title; } } // Custom return value overrides function Custom() { this.name = 'Test'; return { custom: true }; // This is returned instead } const obj = new Custom(); console.log(obj); // { custom: true } #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #OOP #Constructors

Day 42/50 – JavaScript Interview Question? Question: What is the Temporal Dead Zone (TDZ) and why does it exist? Simple Answer: The Temporal Dead Zone is the period from entering a scope until a let or const variable is declared. During this time, accessing the variable throws a ReferenceError. It exists to catch errors early and make code more predictable. 🧠 Why it matters in real projects: Understanding TDZ helps debug confusing ReferenceErrors and explains why let/const behave differently from var. It enforces better coding practices by preventing access to uninitialized variables, making bugs more obvious during development rather than in production. 💡 One common mistake: Assuming let and const aren't hoisted because of TDZ. They ARE hoisted, but remain uninitialized in the TDZ. Also, using variables before declaration in complex scopes and getting unexpected ReferenceErrors. 📌 Bonus: // var - no TDZ (hoisted with undefined) console.log(varVariable); // undefined var varVariable = 'Hello'; // let/const - TDZ exists console.log(letVariable); // ReferenceError! let letVariable = 'World'; // TDZ in block scope function example() { // TDZ starts here for 'x' console.log(x); // ReferenceError: Cannot access before initialization let x = 10; // TDZ ends here console.log(x); // 10 } // Tricky TDZ scenario let x = 'outer'; function test() { // TDZ for inner 'x' starts here console.log(x); // ReferenceError! (not 'outer') let x = 'inner'; // TDZ ends } // Why TDZ exists: // 1. Catch errors early function process() { console.log(value); // Intentional? Typo? TDZ makes it obvious! let value = 42; } // 2. Make const meaningful const PI = 3.14159; // Without TDZ, accessing PI before declaration would give undefined // making const less useful // 3. Prevent confusing behavior function confusing() { // What should this print? function getValue() { return value; // 'outer' or ReferenceError? } let value = 'inner'; console.log(getValue()); } // typeof operator gotcha console.log(typeof undeclaredVar); // "undefined" - safe console.log(typeof declaredLater); // ReferenceError! - TDZ let declaredLater = 10; // Best practices: // ✓ Declare variables at the top of their scope function betterCode() { let x, y, z; // Declare first x = getValue(); y = processData(x); z = x + y; } // ✓ Use const by default, let when needed const config = { api: '/api' }; // Won't reassign let counter = 0; // Will change #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #TDZ #ES6 #InterviewPrep #Hoisting

Day 47/50 – JavaScript Interview Question? Question: What is the difference between prototype and __proto__? Simple Answer: prototype is a property on constructor functions containing the object used as prototype for new instances. __proto__ is the actual internal link on every object pointing to its prototype. Use Object.getPrototypeOf() instead of __proto__. 🧠 Why it matters in real projects: Understanding the prototype chain explains how JavaScript inheritance works, how methods like .map() are available on arrays, and how classes work under the hood. Essential for creating efficient object hierarchies. 💡 One common mistake: Confusing prototype with __proto__, or modifying Object.prototype which affects all objects globally. Also using deprecated __proto__ instead of standard Object.getPrototypeOf(). 📌 Bonus: // Constructor function function Person(name) { this.name = name; } Person.prototype.greet = function() { return `Hello, I'm ${this.name}`; }; const alice = new Person('Alice'); // Key difference: console.log(Person.prototype); // Object with greet method console.log(alice.__proto__ === Person.prototype); // true console.log(Object.getPrototypeOf(alice) === Person.prototype); // true // Prototype chain: // alice → Person.prototype → Object.prototype → null // Inheritance example function Employee(name, title) { Person.call(this, name); this.title = title; } Employee.prototype = Object.create(Person.prototype); Employee.prototype.constructor = Employee; const bob = new Employee('Bob', 'Developer'); console.log(bob.greet()); // Inherited from Person // Modern ES6 equivalent class ModernEmployee extends Person { constructor(name, title) { super(name); this.title = title; } } // Best practices: // ✓ Use Object.getPrototypeOf() const proto = Object.getPrototypeOf(alice); // ✗ Don't modify Object.prototype Object.prototype.myMethod = function() {}; // BAD! // ✗ Don't use __proto__ directly (deprecated) // ✓ Use Object.setPrototypeOf() instead #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

🤔 Preparing for your next JavaScript interview? Today, we're tackling one of the most crucial and misunderstood concepts in JavaScript: The Event Loop. JavaScript is single-threaded, meaning it has only one "Call Stack" and can only do one thing at a time. So, how does it handle time-consuming operations like API calls (fetch) or timers (setTimeout) without freezing the entire browser? The answer is that the JavaScript engine doesn't work alone. It gets help from the browser environment and a manager called the Event Loop. Here’s the complete system in a nutshell: 1. The Call Stack: This is where your JavaScript code is executed, one line at a time. 2. Web APIs: These are features provided by the browser (not the JS engine). When your code calls a slow operation like setTimeout, the JS engine hands it off to the Web API to handle in the background. The engine then immediately moves on to the next line of code, keeping the Call Stack free. 3.The Callback Queue (or Task Queue): Once the Web API finishes its job (the timer completes, the data arrives), it doesn't interrupt your code. Instead, it places the function you provided (the "callback") into this waiting line. This brings us to the final, critical piece. How does the function get from the waiting line back into the main code to be run? ✅ Enter the Event Loop: The Event Loop is a simple, constantly running process with one golden rule: "If the Call Stack is empty, take the first item from the Callback Queue and push it onto the Call Stack to be executed." ``` console.log('First'); setTimeout(() => { console.log('Second'); }, 0); console.log('Third'); // Output: First, Third, Second ``` Why this order? 1. `console.log('First')` goes to the Call Stack and runs. 2. `setTimeout` is handed to a Web API. JavaScript immediately continues. 3. `console.log('Third')` goes to the Call Stack and runs. 4. The `Call Stack` is now empty. 5. In the background, the timer finishes instantly (0ms) and places its callback `() => console.log('Second')` into the Callback Queue. 6. The Event Loop sees the Call Stack is empty, takes the callback from the queue, and pushes it onto the stack to run. This system is what makes JavaScript "non-blocking." The Event Loop ensures that slow tasks wait their turn without ever freezing the user interface. #javascript #eventloop #asynchronousjavascript #webdevelopment #frontenddevelopment #backenddevelopment #nodejs #v8engine #callstack #microtasks

🚀 5 Advanced JavaScript Interview Questions for Frontend Developers Modern frontend interviews often test deep JavaScript concepts, not just syntax. Here are 5 advanced questions every frontend developer should understand. 1️⃣ What is a Closure in JavaScript? A closure is created when a function remembers variables from its outer scope even after the outer function has finished executing. Example: function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); Closures are commonly used for data privacy and function factories. 2️⃣ What is the JavaScript Event Loop? JavaScript is single-threaded, but it can handle asynchronous tasks using the event loop. The event loop manages: Call Stack Web APIs Callback Queue Microtask Queue (Promises) This allows non-blocking operations like API calls and timers. 3️⃣ What is the difference between null and undefined? • undefined → A variable declared but not assigned a value • null → An intentional absence of value assigned by the developer 4️⃣ What are Promises and how do they work? A Promise represents the result of an asynchronous operation. It has three states: Pending Fulfilled Rejected Promises are commonly used for API requests and async operations. 5️⃣ What is Debouncing in JavaScript? Debouncing limits how often a function executes. Example use cases: Search input suggestions Window resize events Scroll events It improves performance and user experience. 💡 Understanding these concepts helps frontend developers build efficient and scalable applications. #JavaScript #FrontendDevelopment #WebDevelopment #Programming #CodingInterview #MERN #Developer #JS

Day 49/50 – JavaScript Interview Question? Question: What is the difference between stopPropagation(), stopImmediatePropagation(), and preventDefault()? Simple Answer: stopPropagation() prevents event from bubbling/capturing to other elements. stopImmediatePropagation() also prevents other handlers on current element. preventDefault() cancels default browser action but doesn't stop propagation. 🧠 Why it matters in real projects: These control event behavior in complex UIs with nested elements. Misusing them causes bugs like forms not submitting, clicks triggering parent handlers, or custom behavior failing. Critical for proper event handling. 💡 One common mistake: Using stopPropagation() everywhere "to be safe" breaks event delegation patterns. Also confusing preventDefault() with stopping propagation—they serve different purposes. 📌 Bonus: // HTML: <div id="outer"><button id="inner">Click</button></div> const outer = document.getElementById('outer'); const inner = document.getElementById('inner'); // stopPropagation() - stops event flow inner.addEventListener('click', (e) => { console.log('Inner'); e.stopPropagation(); // Stops here! }); outer.addEventListener('click', () => { console.log('Outer'); // Won't fire }); // stopImmediatePropagation() - stops all handlers inner.addEventListener('click', (e) => { console.log('Handler 1'); e.stopImmediatePropagation(); }); inner.addEventListener('click', () => { console.log('Handler 2'); // Won't fire! }); // preventDefault() - cancels default action const link = document.querySelector('a'); link.addEventListener('click', (e) => { e.preventDefault(); // Link won't navigate // Event still propagates to parent! }); const form = document.querySelector('form'); form.addEventListener('submit', (e) => { e.preventDefault(); // Form won't submit handleAjaxSubmit(new FormData(form)); }); // Practical: Modal overlay modal.addEventListener('click', (e) => { e.stopPropagation(); // Clicks on modal don't close it }); overlay.addEventListener('click', () => { closeModal(); // Clicks on overlay close it }); // Best practice: Don't break delegation document.querySelector('.list').addEventListener('click', (e) => { if (e.target.matches('.item')) { // Don't use stopPropagation here! handleItemClick(e.target); } }); #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #Events #EventPropagation #WebDev #DOM

React Interview Questions for Senior Developers? Javascript Questions? 1) Difference b/w Synchornous and Asynchornous code? 2) Difference b/w primitive and non primitive? 3) Difference b/w pass by value and pass by reference? 4) Difference b/w == and === operator? 5) What is hositing? 6) what is currying? 7) what is the scope of this keyword inside normal function, arrow function , object method and constructor method? 8) what is difference between var, let and const? 9) what are different types of scope in javascript? 10) what are higher order functions? Give Some Examples 11) what is lexical scope? 12) what is promise in javascript? 13) what are generator functions in javascript? 14) what are the ways to handle asynchornous code? 15) what is difference between deep copy and shallow copy? 13) how are promises handled in javascript? what is callback in javascript? 14) what are pure functions? React.js Questions 1) What is Virtual DOM? 2) What is Reconciliation in React? 3) What are error boundaries in React? 4) To Directly access the DOM which hook is used? 5) What is difference between state and props? 6) what are pure components? 7) what are controlled vs uncontrolled components? 8) what is difference between arrow function and normal function? 9) what are different components of Redux? 10) what is differenc between parameter and argument? 11) what are different life cycle methods in class based component? 12) How useEffect can be used in functional components? 13) what is uni-directional data binding? 14) what is jsx? 15) what is event bubbling and event propagation? 16) what is difference between useEffect and useLayout Effect? 17) what are some important hooks? 18) What are the rules of defining hooks in react? 19) what is difference b/w hook and normal function? 20) what is different b/w content API and redux? 21) What is state lifting in react? 22) What are the different ways to optimize React Application? 23) Explain lazy loading, virtualization, memoization , production build.

🚀 JavaScript Polyfill: Implementing bind() from Scratch As a Frontend Developer, understanding how JavaScript works internally gives you a serious edge in interviews. One commonly asked question: 👉 “Can you write a polyfill for Function.prototype.bind?” Let’s break it down 👇 🔹 What does bind() do? Returns a new function Permanently binds this to a given object Supports partial application (pre-filling arguments) Works correctly with the new keyword 🔥 Basic Polyfill if (!Function.prototype.myBind) { Function.prototype.myBind = function (context, ...args) { const fn = this; return function (...newArgs) { return fn.apply(context, [...args, ...newArgs]); }; }; } 🚀 Interview-Level Polyfill (Handles new keyword) if (!Function.prototype.myBind) { Function.prototype.myBind = function (context, ...args) { const fn = this; function boundFunction(...newArgs) { // If used with `new` if (this instanceof boundFunction) { return new fn(...args, ...newArgs); } return fn.apply(context, [...args, ...newArgs]); } // Maintain prototype chain boundFunction.prototype = Object.create(fn.prototype); return boundFunction; }; } 🧠 Why This Matters? Most developers know how to use bind() Few understand how to implement it. Interviewers love this question because it tests: ✔️ this behavior ✔️ Prototypes ✔️ Closures ✔️ apply() usage ✔️ Constructor behavior 💡 Pro Tip for Interviews When explaining: “bind returns a new function with permanently bound this. In polyfill, we store original function reference, return a wrapper, control context using apply, and handle constructor case using instanceof.” Clear. Confident. Complete. ✅ If you’re preparing for JavaScript interviews, mastering polyfills like this is a game changer. call() polyfill apply() polyfill debounce() throttle() Which one should I post next? 👇 #JavaScript #Frontend #Angular #WebDevelopment #InterviewPrep #Polyfills #NodeJS #ReactJS

here's some important JavaScript questions to crack interviews 𝟭. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗶𝘀 𝗸𝗲𝘆𝘄𝗼𝗿𝗱? - Refers to the object that is currently executing the function - In global scope, this is the window object (in browsers) - Arrow functions do not have their own this 𝟮. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗮𝗹 𝗜𝗻𝗵𝗲𝗿𝗶𝘁𝗮𝗻𝗰𝗲? - JS objects inherit properties and methods from other objects via a prototype chain - Every object has a hidden __proto__ property pointing to its prototype - ES6 class syntax is just cleaner syntax over prototypal inheritance 𝟯. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗦𝗽𝗿𝗲𝗮𝗱 𝗮𝗻𝗱 𝗥𝗲𝘀𝘁 𝗢𝗽𝗲𝗿𝗮𝘁𝗼𝗿 (...)? - Spread expands an array or object: const newArr = [...arr, 4, 5] - Rest collects remaining arguments into an array: function fn(a, ...rest) {} - Same syntax, different context position determines behavior - Great for copying arrays/objects without mutation 𝟰. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗗𝗲𝘀𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗶𝗻𝗴? - Extract values from arrays or objects into variables cleanly - Array: const [first, second] = [1, 2] - Object: const { name, age } = user - Supports default values: const { name = 'Guest' } = user 𝟱. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗘𝘃𝗲𝗻𝘁 𝗗𝗲𝗹𝗲𝗴𝗮𝘁𝗶𝗼𝗻? - Instead of adding listeners to each child element, add one listener to the parent - Uses event bubbling events travel up the DOM tree - More memory efficient for large lists or dynamic content - Check event.target inside the handler to identify which child was clicked 𝟲. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲 𝗯𝗲𝘁𝘄𝗲𝗲𝗻 𝗰𝗮𝗹𝗹(), 𝗮𝗽𝗽𝗹𝘆()? - All three explicitly set the value of this - call() invokes immediately, passes args one by one - apply() invokes immediately, passes args as an array 𝟳. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗠𝗲𝗺𝗼𝗶𝘇𝗮𝘁𝗶𝗼𝗻? - Caching the result of a function call so it doesn't recompute for the same input - Improves performance for expensive or repeated operations - Commonly implemented using closures and objects/Maps 𝟴. 𝗪𝗵𝗮𝘁 𝗮𝗿𝗲 𝗛𝗶𝗴𝗵𝗲𝗿-𝗢𝗿𝗱𝗲𝗿 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀? - Functions that take other functions as arguments or return them - Examples: .map(), .filter(), .reduce(), .forEach() - Core concept in functional programming with JavaScript 𝟵. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲 𝗯𝗲𝘁𝘄𝗲𝗲𝗻 𝗗𝗲𝗲𝗽 𝗖𝗼𝗽𝘆 𝗮𝗻𝗱 𝗦𝗵𝗮𝗹𝗹𝗼𝘄 𝗖𝗼𝗽𝘆? - Shallow copy copies only the top level nested objects are still referenced - Object.assign() and spread {...obj} create shallow copies - Deep copy duplicates everything including nested levels 𝟭𝟬. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗼𝗽𝘁𝗶𝗼𝗻𝗮𝗹 𝗰𝗵𝗮𝗶𝗻𝗶𝗻𝗴 (?.) 𝗮𝗻𝗱 𝗻𝘂𝗹𝗹𝗶𝘀𝗵 𝗰𝗼𝗮𝗹𝗲𝘀𝗰𝗶𝗻𝗴 (??)? - ?. safely accesses nested properties without throwing if something is null/undefined - user?.address?.city returns undefined instead of crashing - ?? returns the right side only if the left is null or undefined Follow the Frontend Circle By Sakshi channel on WhatsApp: https://lnkd.in/gj5dp3fm 𝗙𝗼𝗹𝗹𝗼𝘄𝘀 𝘂𝘀 𝗵𝗲𝗿𝗲 → https://lnkd.in/geqez4re