Rahul Singh’s Post

🚨 I recently went through a JavaScript interview and they asked some very tricky questions. Honestly, these were not the usual “What is closure?” or “What is hoisting?” questions. They were designed to test how deeply you understand JavaScript execution, async behavior, and edge cases. If you’re preparing for Frontend / React interviews, don’t miss these questions. 👇 🧠 1️⃣ Predict the Output console.log([] + []); console.log([] + {}); console.log({} + []); console.log({} + {}); What exactly gets printed and why does JavaScript behave like this? ⚡ 2️⃣ Event Loop Deep Dive console.log("start"); setTimeout(() => console.log("timeout")); Promise.resolve().then(() => console.log("promise")); queueMicrotask(() => console.log("microtask")); console.log("end"); 👉 What is the exact output order? 🔥 3️⃣ Closures + Loop Trap for (var i = 0; i < 3; i++) { setTimeout(() => { console.log(i); }, 100); } What will be printed and why does this happen? 🧩 4️⃣ this Binding Confusion const obj = { value: 10, getValue() { return this.value; } }; const getValue = obj.getValue; console.log(getValue()); What will this print? ⚠️ 5️⃣ Object Reference Trap const a = { name: "JS" }; const b = a; b.name = "React"; console.log(a.name); Why does this happen? 🧪 6️⃣ Array Mutation Trick const arr = [1,2,3]; arr[10] = 99; console.log(arr.length); console.log(arr); What does the array actually look like? 🧠 7️⃣ Destructuring Edge Case const obj = { a: 1, b: 2 }; const { a, ...rest } = obj; rest.b = 5; console.log(obj.b); Does the original object change? ⚡ 8️⃣ Promise Chain Trap Promise.resolve(1) .then(x => x + 1) .then(x => { throw new Error("boom"); }) .catch(() => 10) .then(x => console.log(x)); What is the final output? 🔥 9️⃣ typeof Weirdness console.log(typeof NaN); console.log(typeof null); console.log(typeof []); Why do these results exist in JavaScript? 🧨 🔟 Implicit Type Coercion console.log("5" - 3); console.log("5" + 3); console.log(true + false); console.log([] == false); Explain how JavaScript converts the types internally. 💡 Principal Engineer Advice In interviews, they’re not testing if you memorized JavaScript. They are testing if you understand: ⚡ Execution Context ⚡ Event Loop ⚡ Closures ⚡ Type Coercion ⚡ Object References Master these and JavaScript interviews become much easier. 🔥 I’ll keep posting tricky Frontend / React interview questions daily to help juniors crack interviews. #javascript #frontend #reactjs #webdevelopment #frontendengineer #codinginterview

If I am taking your #FrontendEngineer Interview, 𝗜’𝗺 𝗮𝘀𝗸𝗶𝗻𝗴 𝘆𝗼𝘂 𝘁𝗵𝗲𝘀𝗲 𝟯𝟬 𝗾𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀 𝟭𝟬𝟬%: 1. Explain the difference between var, let, and const in JavaScript. 2. What are closures in JavaScript and how do you use them? 3. How do you handle asynchronous code using async/await and Promises? 4. Explain the virtual DOM in React and how it improves performance. 5. How do you manage state in React using useState and useReducer? 5. Explain the difference between props and state in React. 7. How do you implement context API for global state management? 8. How do you optimize React applications for performance? 9. Explain the difference between class components and functional components. 10. How do you handle forms and validation in React? 11. What are React hooks and how do you create custom hooks? 12. How do you implement routing in React using react-router-dom? 13. Explain the concept of server-side rendering (SSR) in Next.js. 14. How do you fetch data in Next.js using getStaticProps and getServerSideProps? 15. Explain the difference between REST APIs and GraphQL. 16. How do you implement API calls and error handling in React? 17. How do you handle authentication and authorization in frontend apps? 18. Explain CSS Grid vs Flexbox and when to use each. 19. How do you implement responsive design in modern web apps? 20. How do you optimize web performance and reduce load times? 21. Explain Progressive Web Apps (PWAs) and their benefits. 22. How do you implement lazy loading and code splitting in React? 23. What are web accessibility standards (WCAG) and how do you implement them? 24. How do you write unit tests in React using Jest and React Testing Library? 25. Explain end-to-end testing using Cypress or Selenium. 26. How do you handle version control and collaboration using Git? 27. Explain the difference between npm and yarn. 28. How do you debug JavaScript and React applications effectively? 29. Explain the concept of component-driven architecture. 30. Build a complete frontend application that consumes APIs, manages state, and is fully responsive. 𝐠𝐞𝐭 𝐞𝐛𝐨𝐨𝐤 𝐰𝐢𝐭𝐡 (detailed 232 ques = 90+ frequently asked Javascript interview questions and answers, 90+ Reactjs Frequent Ques & Answers, 50+ Output based ques & ans, 23+ Coding Questions & ans, 2 Machine coding ques & ans) 𝐄𝐛𝐨𝐨𝐤 𝐋𝐢𝐧𝐤: https://lnkd.in/gJMmH-PF Follow on Instagram : https://lnkd.in/gXTrcaKP #javascriptdeveloper #reactjs #reactnative #vuejsdeveloper #angular #angulardeveloper

I recently purchased this eBook, and I have to say — it’s genuinely worth the investment. At a very minimal cost, it provides high-quality, structured interview preparation for JavaScript and ReactJS. The content is crisp, well-explained, and includes many frequently asked interview questions along with practical examples. It’s a great resource for anyone preparing for frontend interviews or looking to strengthen core concepts. Highly recommended for beginners and even working professionals who want value-driven, affordable learning material.

If I am taking your #FrontendEngineer Interview, 𝗜’𝗺 𝗮𝘀𝗸𝗶𝗻𝗴 𝘆𝗼𝘂 𝘁𝗵𝗲𝘀𝗲 𝟯𝟬 𝗾𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀 𝟭𝟬𝟬%: 1. Explain the difference between var, let, and const in JavaScript. 2. What are closures in JavaScript and how do you use them? 3. How do you handle asynchronous code using async/await and Promises? 4. Explain the virtual DOM in React and how it improves performance. 5. How do you manage state in React using useState and useReducer? 5. Explain the difference between props and state in React. 7. How do you implement context API for global state management? 8. How do you optimize React applications for performance? 9. Explain the difference between class components and functional components. 10. How do you handle forms and validation in React? 11. What are React hooks and how do you create custom hooks? 12. How do you implement routing in React using react-router-dom? 13. Explain the concept of server-side rendering (SSR) in Next.js. 14. How do you fetch data in Next.js using getStaticProps and getServerSideProps? 15. Explain the difference between REST APIs and GraphQL. 16. How do you implement API calls and error handling in React? 17. How do you handle authentication and authorization in frontend apps? 18. Explain CSS Grid vs Flexbox and when to use each. 19. How do you implement responsive design in modern web apps? 20. How do you optimize web performance and reduce load times? 21. Explain Progressive Web Apps (PWAs) and their benefits. 22. How do you implement lazy loading and code splitting in React? 23. What are web accessibility standards (WCAG) and how do you implement them? 24. How do you write unit tests in React using Jest and React Testing Library? 25. Explain end-to-end testing using Cypress or Selenium. 26. How do you handle version control and collaboration using Git? 27. Explain the difference between npm and yarn. 28. How do you debug JavaScript and React applications effectively? 29. Explain the concept of component-driven architecture. 30. Build a complete frontend application that consumes APIs, manages state, and is fully responsive. 𝐠𝐞𝐭 𝐞𝐛𝐨𝐨𝐤 𝐰𝐢𝐭𝐡 (detailed 232 ques = 90+ frequently asked Javascript interview questions and answers, 90+ Reactjs Frequent Ques & Answers, 50+ Output based ques & ans, 23+ Coding Questions & ans, 2 Machine coding ques & ans) 𝐄𝐛𝐨𝐨𝐤 𝐋𝐢𝐧𝐤: https://lnkd.in/gJMmH-PF Follow on Instagram : https://lnkd.in/gXTrcaKP #javascriptdeveloper #reactjs #reactnative #vuejsdeveloper #angular #angulardeveloper

🚀 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

🚀 Got a frontend interview coming up? Screenshot this. 📸 Here are the JavaScript topics that come up again and again in interviews. ――――――――――――――――――――――― 1️⃣ Core JavaScript Basics → Data types and comparisons → Truthy vs falsy values → Difference between == and === → Implicit vs explicit type coercion → Object references vs primitive values A classic trap: two objects with the same values are NOT equal in JavaScript because objects are compared by reference. ――――――――――――――――――――――― 2️⃣ Scope & Execution Context → Closures and lexical scope → Hoisting and the Temporal Dead Zone → The this keyword (arrow vs regular functions) Very common question: “What will this console.log output?” Always trace the scope chain carefully. ――――――――――――――――――――――― 3️⃣ Functions & Useful Patterns → Spread vs rest operators → call, apply, and bind → Currying and partial application If you can clearly explain spread vs rest, you're already ahead of many candidates. ――――――――――――――――――――――― 4️⃣ Working with Arrays & Objects → map, filter, reduce → When NOT to use them → Shallow vs deep copying Understanding shallow copies can save you from some very confusing bugs. ――――――――――――――――――――――― 5️⃣ JavaScript Mechanics → Prototypal inheritance → typeof vs instanceof → Event loop and call stack → Microtasks vs macrotasks Drawing the event loop diagram once makes async questions much easier. ――――――――――――――――――――――― 6️⃣ Async JavaScript → Callbacks vs Promises vs async/await → Error handling with async/await → Debounce vs throttle → Event delegation and bubbling Many developers forget proper error handling in async code. ――――――――――――――――――――――― 7️⃣ Browser & Networking Basics → How browsers render HTML, CSS and JS → Critical rendering path → Reflow vs repaint → DNS lookup, TCP handshake, TLS → CORS and preflight requests These topics show up a lot in mid-senior frontend interviews. ――――――――――――――――――――――― 8️⃣ Performance & Caching → Preload, prefetch and lazy loading → Service workers → localStorage, sessionStorage and cookies Knowing when to use each storage option matters more than memorising definitions. ――――――――――――――――――――――― 9️⃣ Frontend Architecture & Accessibility → Responsive design and mobile-first layouts → Media queries and viewport units → Semantic HTML, ARIA roles, focus management Accessibility questions are becoming more common in interviews. ――――――――――――――――――――――― A tip that helped me: Pick one section a day Learn it deeply Build a small demo Explain it to someone else That’s how concepts actually stick. 💪 ――――――――――――――――――――――― Which area do you feel least confident about right now? 1️⃣ JavaScript fundamentals 2️⃣ Event loop & async 3️⃣ Browser internals 4️⃣ Performance Save this post so you can review it before your next interview 🔖 #JavaScript #FrontendDev #ReactJS #WebDev #InterviewPrep

🚨 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗧𝗿𝗮𝗽 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀 (𝗢𝘂𝘁𝗽𝘂𝘁 𝗕𝗮𝘀𝗲𝗱) Many JavaScript interviews don’t test how much you know… They test how deeply you understand the language. Here are 3 small JavaScript snippets that often confuse developers in interviews 👇 🧠 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻 𝟭: 𝘃𝗮𝗿 𝘃𝘀 𝗹𝗲𝘁 𝗶𝗻 𝗹𝗼𝗼𝗽𝘀 𝑓𝑜𝑟 (𝑣𝑎𝑟 𝑖 = 0; 𝑖 < 3; 𝑖++) {   𝑠𝑒𝑡𝑇𝑖𝑚𝑒𝑜𝑢𝑡(() => 𝑐𝑜𝑛𝑠𝑜𝑙𝑒.𝑙𝑜𝑔(𝑖), 1000); } 𝗢𝘂𝘁𝗽𝘂𝘁: 3, 3, 3 💡 𝗪𝗵𝘆? var is 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝘀𝗰𝗼𝗽𝗲𝗱, not block scoped. All callbacks share the same i variable. By the time setTimeout runs, the loop has finished and i = 3. ✔️ 𝗙𝗶𝘅 𝘂𝘀𝗶𝗻𝗴 𝗹𝗲𝘁 for (let i = 0; i < 3; i++) {   setTimeout(() => console.log(i), 1000); } Output: 0, 1 ,2 Because let creates a new binding for each iteration. 🧠 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻 𝟮: 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗧𝘆𝗽𝗲 𝗖𝗼𝗲𝗿𝗰𝗶𝗼𝗻 console.log("5" - 3); console.log("5" + 3); console.log(true + true); Output: 2, 53, 2 💡 𝗘𝘅𝗽𝗹𝗮𝗻𝗮𝘁𝗶𝗼𝗻 JavaScript performs 𝗶𝗺𝗽𝗹𝗶𝗰𝗶𝘁 𝘁𝘆𝗽𝗲 𝗰𝗼𝗲𝗿𝗰𝗶𝗼𝗻. "5" - 3 → number conversion → 5 - 3 = 2 "5" + 3 → string concatenation → "53" true + true → 1 + 1 = 2 👉 The + operator prefers string concatenation, while other operators trigger numeric conversion. 🧠 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻 𝟯: 𝘁𝗵𝗶𝘀 𝗶𝗻𝘀𝗶𝗱𝗲 𝗮𝗿𝗿𝗼𝘄 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 const obj = {   name: "Shubham",   greet: function() {    setTimeout(() => {     console.log(this.name);    }, 1000);   } }; obj.greet(); Output: Shubham 💡 𝗪𝗵𝘆? Arrow functions do not have their own this. They inherit this from the surrounding scope. Here, this refers to obj. 💬 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗧𝗶𝗽 Most JavaScript interview questions revolve around: • Scope • Closures • this keyword • Type coercion • Event loop Mastering these concepts makes 𝗝𝗦 𝗶𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗾𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀 𝗺𝘂𝗰𝗵 𝗲𝗮𝘀𝗶𝗲𝗿. 🔥 𝗤𝘂𝗶𝗰𝗸 𝗖𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲 What will be the output of this? console.log([] + []); console.log([] + {}); console.log({} + []); Write your answers in the comments 👇 ♻️ If you found this helpful, repost to help other developers preparing for JavaScript interviews. 📌 Follow Shubham Kumar Raj for more such content😊 #javascript #webdevelopment #frontenddeveloper #codinginterview #softwaredevelopment #learnjavascript #100daysofcode #hiring

👉 Solve below o/p based question if u beileve u have good understanding of JS Concepts" 🚨 I’ve appeared for multiple senior full-stack interviews recently, and "this" based quetion are must ask: 🚨 Senior-Level JavaScript Interviews Are NOT About Syntax — They’re About Understanding " .. .... ....... Here are a couple of commonly asked (and often confusing) questions 👇 🧠 Q1: Understanding this and Arrow Functions let obj = { name: "Ravi", fn: function () { console.log(this.name); }, arrFn: function () { (() => { console.log(this.name); })(); }, }; obj.fn(); obj.arrFn(); 💡 Concepts being tested: this binding in regular functions Lexical this in arrow functions Execution context Method invocation vs inner function 👉 Key Insight: Arrow functions don’t have their own this — they inherit it from their surrounding scope. ------------------------------------------------------------------- 🧠 Q2: Classes, Binding, and Function References class Person { age = 20; constructor(name) { this.name = name; this.func = this.func.bind(this); } func() { console.log(this.name); } arrowFunc = () => { console.log(this.name, this.age); }; } const person1 = new Person("Rahul"); person1.func(); person1.arrowFunc(); const copyFn = person1.func; copyFn(); 💡 Concepts being tested: Class fields & initialization Explicit binding using .bind(this) Difference between normal methods vs arrow functions in classes Function reference vs method call How "this" behaves when function is detached Do you really understand this? Can you predict output without running the code? 💬 If you’re preparing for senior roles, don’t just “know” JavaScript — understand its behavior in edge cases. #javascript #frontend #fullstack #webdevelopment #interviewprep #reactjs #nodejs #softwareengineering #codinginterview #jsconcepts

🚀 Day 4/30 – Frontend Interview Series 🔥 Topic: Closures in JavaScript 💡 What is a Closure? A closure is created when a function “remembers” its outer variables even after the outer function has finished executing. 👉 In simple words: A function + its lexical scope = Closure 🧠 Example: function outerFunction() { let count = 0; return function innerFunction() { count++; console.log(count); }; } const counter = outerFunction(); counter(); // 1 counter(); // 2 counter(); // 3 🔍 Why Closures are Important? ✔ Data hiding / Encapsulation ✔ Used in callbacks ✔ Used in React (hooks internally use closures) ✔ Helps in maintaining state ⚡ Real-world Use Case: function createUser(name) { return function() { console.log(`User: ${name}`); }; } const user1 = createUser("Rushikesh"); user1(); // User: Rushikesh 🎯 Interview Questions: ❓ What is closure in JavaScript? ❓ Where are closures used in real applications? ❓ How closures help in data privacy? #Day4 #JavaScript #FrontendDevelopment #ReactJS #WebDevelopment #CodingInterview #LearnInPublic #Developers

6 important interview question for angular developers: 1. What is the difference between Unicast and Multicast Observables? - Unicast means each subscriber gets its own independent execution of the observable, so the producer runs separately for each subscriber. Multicast means multiple subscribers share the same execution and receive the same data stream. - By default, Observables are unicast. - Multicast is achieved using Subjects or operators like share(). 2. What is the difference between Cold and Hot Observables? - Cold Observables start emitting values only when subscribed, and each subscriber gets a fresh execution. - Hot Observables emit values regardless of subscriptions, and subscribers receive only ongoing values (they may miss past emissions). Example: Cold → HTTP calls Hot → DOM events, WebSocket, Subject 3. How are Unicast/Multicast related to Cold/Hot Observables? - Cold Observables are usually unicast because each subscription creates a new execution. - Hot Observables are usually multicast because the same data source is shared among multiple subscribers. However, this is not a strict rule—operators like shareReplay() can convert cold observables into multicast ones. 4. What is the difference between Promise and Observable? - A Promise emits a single value and executes immediately when created, while an Observable can emit multiple values over time and executes only when subscribed. - Observables also support cancellation using unsubscribe() and provide powerful operators like map, switchMap, etc., which Promises lack. 5. Why does Angular use Observables instead of Promises? - Angular uses Observables because they support streams of data, lazy execution, cancellation, and powerful operators for handling complex async flows like HTTP calls, user input, and real-time updates. This makes them more flexible and scalable than Promises. 6. What happens if you subscribe multiple times to an Angular HTTP Observable? - Angular HTTP Observables are cold and unicast, so each subscription triggers a separate API call. To avoid multiple calls, you can use operators like shareReplay(1) to share the response among subscribers. ------------ Read my medium article, I write about Angular and JavaScript related interview content. https://lnkd.in/gUYuypyT #angular #javascript #interview