JavaScript Primitive vs Reference Types Explained

🤔 JavaScript behaves the way it does for a reason. Type coercion exists so different values can interact without throwing errors all the time. But if you don’t know the rules, it can feel unpredictable. 🧠 JavaScript interview question What is type coercion in JavaScript? ✅ Short answer • JavaScript automatically converts values between types when needed • This can happen implicitly or explicitly • Operators decide how and when conversion happens 🔍 A bit more detail • Implicit coercion Happens during operations like +, -, ==, or Boolean checks • Explicit coercion You force conversion using Number(), String(), Boolean() • The + operator If one side is a string, it concatenates Otherwise, it tries numeric addition • Equality == Tries to convert both sides to a common type before comparing "10" + 5 // "105" "10" - 5 // 5 0 == false // true "" == 0 // true null == undefined // true ⚠️ Small but important detail Only the empty string is false when converted to Boolean. "0" is a non empty string, so it is true. Boolean("") // false Boolean("0") // true I’m sharing one JavaScript interview style question every day so we can all build stronger fundamentals together. #javascript #frontend #webdevelopment #interviewprep

Day 13/365 – Top #JavaScript Interview Questions 🔥Part2 Q19). What are higher-order functions? Q20). What is currying in JavaScript? Q21). What is an IIFE and why is it used? Q22). What is prototypal inheritance? Q23). What is debouncing and throttling? Q24). What is the difference between the spread operator and rest operator? Q25). What is the difference between Object.freeze() and Object.seal()? Q26). What is the difference between a Promise and an Observable? Q27). What is the difference between slice() and splice()? Q28). How do you optimize performance in JavaScript applications? Q29). What is the difference between synchronous and asynchronous code? Q30). What is the difference between null ,undefined and NaN? Q31). What are object methods like Object.keys(), Object.values(), and Object.entries()? Q32). What is the difference between DOM and BOM? Q33). What is destructuring in JavaScript and how is it useful? Q34). What is the difference between filter() and find()? Q35) How do you handle errors in JavaScript? Q36).  What is Object.assign() and how does it work? #javascript #interview #webdevlopment #js #365daysofjs #jsinterview #interviewprepration

🧩 JavaScript Output-Based Question (call / bind) ❓ What will be logged? 👉 Comment your answer below (Don’t run the code ❌) Correct Output : A 🧠 Why this output comes? (Step-by-Step) 1️⃣ bind() creates a NEW function const bound = greet.bind(a); bind() permanently sets this to object a and returns a new bound function. 2️⃣ call() cannot change a bound this bound.call(b); Once a function is bound: • call() • apply() • bind() again ❌ cannot override the original binding So even though call(b) is used, this still points to a. That’s why : A is printed. 🔑 Key Takeaways ✔️ bind() sets this permanently ✔️ call() and apply() set this only temporarily ✔️ call() cannot override bind() ✔️ This is a very common interview trap If you remember one thing: bind beats call and apply #JavaScript #CallBindApply #InterviewQuestions #FrontendDeveloper #MERNStack #ReactJS

Day 15/50 – JavaScript Interview Question? Question: What is the Event Loop in JavaScript? Simple Answer: The Event Loop is the mechanism that handles asynchronous operations in JavaScript's single-threaded environment. It continuously checks the Call Stack and Task Queues, executing code in a specific order: synchronous code first, then microtasks (promises), then macrotasks (setTimeout, events). 🧠 Why it matters in real projects: Understanding the Event Loop is crucial for debugging asynchronous behavior, preventing UI blocking, and optimizing performance. It explains why promises execute before setTimeout even with 0ms delay. 💡 One common mistake: Not understanding the priority of microtasks vs macrotasks, leading to unexpected execution order in complex async code. 📌 Bonus: console.log('1: Start'); setTimeout(() => console.log('2: Timeout'), 0); Promise.resolve() .then(() => console.log('3: Promise 1')) .then(() => console.log('4: Promise 2')); console.log('5: End'); // Output order: // 1: Start // 5: End // 3: Promise 1 // 4: Promise 2 // 2: Timeout // Why? Sync code → Microtasks (Promises) → Macrotasks (setTimeout) #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

🔥 JavaScript Output-Based Question (Closures) ❓ Question What will be the output of the above code? 👉 Comment your answer below (Don’t run the code ❌) Output: 1 2 1 3 🧠 Why this output comes? (Step-by-Step Explanation) This example is all about JavaScript Closures. 1️⃣ Each function call creates a NEW closure const counter1 = createCounter(); const counter2 = createCounter(); counter1 and counter2 are created by separate executions Each execution creates its own count variable in memory So internally: counter1 → count = 0 counter2 → count = 0 (completely independent) 2️⃣ Execution Flow counter1() → count = 0 → 1 → prints 1 counter1() → count = 1 → 2 → prints 2 counter2() → different closure → count = 0 → 1 → prints 1 counter1() → back to first closure → count = 2 → 3 → prints 3 #JavaScript #Closures #FrontendDeveloper #MERNStack #ReactJS #InterviewQuestions

Controlling `this` in JavaScript: Call vs. Apply vs. Bind. 🎮 One of the most common interview questions for mid-level developers is: "𝑊ℎ𝑎𝑡 𝑖𝑠 𝑡ℎ𝑒 𝑑𝑖𝑓𝑓𝑒𝑟𝑒𝑛𝑐𝑒 𝑏𝑒𝑡𝑤𝑒𝑒𝑛 𝐶𝑎𝑙𝑙, 𝐵𝑖𝑛𝑑, 𝑎𝑛𝑑 𝐴𝑝𝑝𝑙𝑦?" They all do the same core job: They allow you to manually set what `this` refers to inside a function. But they do it in slightly different ways. 𝐇𝐞𝐫𝐞 𝐢𝐬 𝐭𝐡𝐞 𝟏𝟎-𝐬𝐞𝐜𝐨𝐧𝐝 𝐛𝐫𝐞𝐚𝐤𝐝𝐨𝐰𝐧: 1️⃣ 𝐂𝐚𝐥𝐥 & 𝐀𝐩𝐩𝐥𝐲 (𝐓𝐡𝐞 𝐈𝐦𝐦𝐞𝐝𝐢𝐚𝐭𝐞 𝐈𝐧𝐯𝐨𝐤𝐞𝐫𝐬) Both of these execute the function 𝑖𝑚𝑚𝑒𝑑𝑖𝑎𝑡𝑒𝑙𝑦. The only difference is how they handle arguments. • 𝐂𝐚𝐥𝐥: Passes arguments individually (comma-separated).  • 𝑀𝑛𝑒𝑚𝑜𝑛𝑖𝑐: 𝐂all = 𝐂ommas. • 𝐀𝐩𝐩𝐥𝐲: Passes arguments as a single Array.  • 𝑀𝑛𝑒𝑚𝑜𝑛𝑖𝑐: 𝐀pply = 𝐀rray. 2️⃣ 𝐁𝐢𝐧𝐝 (𝐓𝐡𝐞 𝐏𝐥𝐚𝐧𝐧𝐞𝐫) • 𝐁𝐢𝐧𝐝: Does NOT execute the function immediately. • Instead, it returns a 𝐧𝐞𝐰 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧 𝐜𝐨𝐩𝐲 with the `this` context permanently locked (bound) to the object you specified. You can then call this new function whenever you want later. 𝐖𝐡𝐲 𝐢𝐬 𝐭𝐡𝐢𝐬 𝐮𝐬𝐞𝐟𝐮𝐥? It allows "Method Borrowing." You can use a method from one object (like a helper function) and use it on a completely different object, just by changing the `this` context! Check out the syntax comparison below! 👇 Which one do you use most often? I find `bind` essential for passing methods into React components or event listeners! #JavaScript #WebDevelopment #CodingInterviews #SoftwareEngineering #Frontend #JSConcepts

#Interview Prep JavaScript array.sort() array.sort() is a JavaScript method used to arrange array elements in a specific order. By providing a compare function, we can control whether the sorting is ascending or descending. Example array Explanation ✅ arr = [6, 2, 4] arr.sort((a, b) => { return a - b; }) How TWO elements are chosen (visual angle) [ 6 , 2 , 4 ] ↑ ↑ a b JS picks neighbor elements a = 6 b = 2 Compare: 6 - 2 = 4 → swap After swap: [ 2 , 6 , 4 ] ▶️ Second pick [ 2 , 6 , 4 ] ↑ ↑ a b Now picks: a = 6 b = 4 Compare: 6 - 4 = 2 → swap After swap: [ 2 , 4 , 6 ] ▶️ Third (check) [ 2 , 4 , 6 ] ↑ ↑ a b Compare: 2 - 4 = -2 → no swap Array stays same ✅ JS always picks TWO values Assigns: first value → a second value → b It compares adjacent elements Moves forward like a sliding window [ a , b ] → compare → swap / no swap → move right 🔄 Same idea for descending arr.sort((a,b) => { return b - a }) [ 6 , 2 , 4 ] ↑ ↑ a b 2 - 6 = -4 → no swap → bigger stays first Result: [ 6 , 4 , 2 ] #JavaScript #Frontend #WebDevelopment #CodingTips #LinkedInLearning #ArrayMethods #Interview

🚀 Top 150 React Interview Questions — 15/150 ⚛️ 🧠 What is JSX? JSX stands for JavaScript XML. It is a syntax extension that lets you write HTML-like code directly inside JavaScript. Instead of complex DOM methods, you can simply write UI in a clean, readable way. ✨ Why we use JSX: ✍️ Easier to write – Much faster than React.createElement() 👀 Visual clarity – Looks like HTML, so UI structure is easy to understand 🧠 Power of JavaScript – Use variables, conditions, loops, and logic inside UI ⚙️ How JSX works behind the scenes: 🌐 Browsers cannot read JSX 🔧 A compiler called Babel converts JSX into plain JavaScript Example: const element = <h1>Hi</h1>; ➡️ Babel converts it to: React.createElement('h1', null, 'Hi'); 📏 Important JSX rules: 1️⃣ Single root element – Wrap everything in one parent (div or <>...</>) 2️⃣ CamelCase attributes – className, onClick, etc. 3️⃣ Closing tags required – <img />, <br /> 4️⃣ JS expressions – Use { } to inject JavaScript 📌 Easy way to remember: JSX is syntactic sugar 🍬 It doesn’t add new power to JavaScript — it just makes UI code cleaner, readable, and declarative. 👇 Comment “React” if this series helps you. #ReactJS #JSX #JavaScript #FrontendDevelopment #ReactInterview #WebDevelopment #LearningInPublic #ReactFundamentals

JavaScript Hoisting: A Tricky but Important Concept (Interview Favorite!) Output: 👉 World 🤔 What’s going on here? This happens because of JavaScript hoisting. Function declarations are hoisted completely (both name and body). Function expressions assigned to var are hoisted only as undefined. 🔍 Behind the scenes (Memory Creation Phase) JavaScript processes the code like this: function foo() { console.log("World"); } var foo; So when foo() is executed, JavaScript already knows about the function declaration — that’s why "World" is printed. 📌 Key Takeaways ✔ Function declarations have higher priority than var ✔ Avoid using the same name for functions and variables ✔ Understanding hoisting helps prevent unexpected bugs 💬 This is a very common JavaScript interview question, especially for frontend developers. #JavaScript #Hoisting #FrontendEngineering #WebDevelopment #JSConcepts #InterviewPreparation #CodingTips

Day 10/50 – JavaScript Interview Question? Question: What's the difference between null and undefined? Simple Answer: undefined means a variable has been declared but not assigned a value, or a function doesn't return anything. null is an explicit assignment representing "no value" or "empty." 🧠 Why it matters in real projects: Understanding this distinction helps with API responses, function returns, and optional parameters. null is typically used to explicitly indicate "no object" while undefined usually indicates something wasn't initialized or doesn't exist. 💡 One common mistake: Using typeof null and expecting "null", but it actually returns "object" due to a historical JavaScript bug that was never fixed for backward compatibility. 📌 Bonus: let x; console.log(x); // undefined console.log(typeof x); // "undefined" let y = null; console.log(y); // null console.log(typeof y); // "object" (legacy bug!) // Checking for both if (value == null) { // true for both null AND undefined } if (value === null) { // true only for null } if (value === undefined) { // true only for undefined } #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews