JavaScript Interview Questions and Answers

🚀 JavaScript Mastery Roadmap (Concepts + Polyfills + Resources) If you’re preparing for Frontend / JavaScript interviews, this checklist is GOLD 👇 🧠 Core JavaScript Concepts you MUST know ✅ Scope in JS (Global, Function, Block) ✅ Scope Chaining ✅ Primitive vs Non-Primitive ✅ var vs let vs const ✅ Temporal Dead Zone (TDZ) ✅ Hoisting ✅ Prototypes, Prototype Object & Prototype Chaining ✅ Closures ✅ Pass by Value vs Pass by Reference ✅ Currying & Infinite Currying ✅ Memoization ✅ Rest Parameters & Spread Operator ✅ Object creation (all possible ways) ✅ Generator Functions ✅ JavaScript is Single-Threaded (but async 😄) ⚙️ Async JavaScript & Browser Internals 🔁 Callbacks (why we need them) 🔁 Callback Hell 🔁 Event Loop 🔁 Callback Queue & Microtask Queue 🔁 Promises (then, catch) 🔁 async / await 🔁 Microtask starvation (infinite microtasks – how to handle?) 🖱️ Events & DOM 🧩 Event Propagation 🧩 Event Bubbling & Capturing 🧩 stopPropagation() 🧩 Event Delegation 🧩 Advanced JS Concepts ✨ Type Coercion vs Type Conversion ✨ Throttle vs Debounce ✨ How JS parses & compiles code (step-by-step) ✨ First-Class Functions ✨ IIFE (Immediately Invoked Function Expressions) ✨ call, apply, bind (why & when) ✨ MapLimit ✨ Variable Shadowing ✨ this keyword ✨ Static methods in JS classes ✨ undefined vs not defined vs null ✨ Higher-Order Functions ✨ Execution Context & Call Stack ✨ Lexical Environment ✨ Garbage Collection ✨ Equality (== vs ===) ✨ Strict Mode ✨ async vs defer 🧪 Polyfills (Interview Favorite 🔥) 🛠 Array methods: map, filter, reduce, forEach, find 🛠 call, apply, bind 🛠 Promise & Promise APIs • Promise.all() • Promise.any() • Promise.allSettled() • Promise.race() 🛠 MapLimit 🛠 Debounce & Throttle 🛠 Event Emitter 🛠 setInterval polyfill 🛠 Parallel limit function 🛠 Deep vs Shallow Copy 🛠 Flatten deeply nested objects 🛠 Memoization / Caching 🛠 Promise.finally() 🛠 Retry mechanism 🎯 Best Learning & Practice Resources 📌 LeetCode – 30 Days of JavaScript (V.IMP) 📌 Roadside Coder → Polyfills & JS interview questions 📌 Namaste JavaScript → Deep understanding of JS concepts 📌 JavaScript.info → Docs, fundamentals & internals 📌 Learn with curiosity & use ChatGPT to go deeper 🚀 #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #FrontendEngineer #SoftwareDeveloper #InterviewPreparation #JavaScriptTips #JavaScriptInterview #AsyncJavaScript #Polyfills #CodingInterview #LeetCode #NamasteJavaScript #Frontend #facebook

So you want to write cleaner code in JavaScript - it's a game changer. Functional composition is key to achieving this, and it's actually pretty simple: you combine multiple functions into one. It's like building with Legos, you start with small pieces and create something complex. Here's the basic idea: you define a function that takes multiple functions as arguments, and it returns a new function that applies the original functions in a specific order - think of it like a recipe. You can use this concept to create new functions, like a master chef combining ingredients to create a new dish. For example, you can create a function that adds 2 to a number, then multiplies it by 3 - it's like a math puzzle. It looks something like this: ```javascript const compose = (...functions) => (x) => functions.reduceRight((acc, fn) => fn(acc), x); ``` And you can use it like this: ```javascript const add2 = (num) => num + 2; const multiply3 = (num) => num * 3; const add2ThenMultiply3 = compose(multiply3, add2); console.log(add2ThenMultiply3(5)); // Output: 21 ``` It's pretty cool. Functional composition also works with asynchronous functions - it's like a symphony, where each function plays its part at the right time. You can create a function that composes asynchronous functions, like this: ```javascript const asyncCompose = (...fns) => (initialInput) => fns.reduceRight( (promise, fn) => promise.then(fn), Promise.resolve(initialInput) ); ``` And use it like this: ```javascript const fetchData = (id) => new Promise((resolve) => { setTimeout(() => resolve(`Data for ${id}`), 1000); }); const transformData = (data) => `${data} transformed!`; const composedAsyncFunction = asyncCompose(transformData, fetchData); composedAsyncFunction(1).then(console.log); // Output after 1 second: "Data for 1 transformed!" ``` Now, to take it to the next level, you can use techniques like batching function calls and memoization - it's like optimizing a car engine, you get more power and efficiency. Memoization is like caching, you store the results of expensive function calls so you don't have to repeat them - it's a huge performance boost. You can create a memoize function like this: ```javascript const memoize = (fn) => { const cache = {}; return function (...args) { const key = JSON.stringify(args); if (!(key in cache)) { cache[key] = fn(...args); } return cache[key]; }; }; ``` It's a powerful tool. By using functional composition and these techniques, you can write more efficient and maintainable code in JavaScript - it's a total win. Check out this article for more info: https://lnkd.in/g3-F4DKC #javascript #functionalprogramming #codingtips

***The difference between a Statement and an Expression in JavaScript. The primary difference is that a JavaScript #expression produces a value, while a #statement performs an action but does not necessarily produce a value that can be immediately used elsewhere. Statement Instructs the program to perform an action or control flow (e.g., variable assignment, looping, conditions). While Expression Computes and returns a single value (e.g., a number, a string, a boolean, a function, an object). Statements can contain expressions, but most statements cannot be used where JavaScript expects an expression (e.g., as a function argument) While Expressions can be used as statements (known as expression statements) but only if they have a side effect, like calling a function or assigning a value. ***Different Method arrays and what they return as: 👇🏾👇🏾👇🏾👇🏾 #Methods_Returning_an_Index_or_a_Boolean These methods are for searching and testing conditions. Examples include: indexOf(): returning the index of an element or -1. findIndex(): returning the index of an element satisfying a test or -1. includes(): which returns true if an element is present. some(): which returns true if at least one element passes a test. every(): which returns true if all elements pass a test. Array.isArray(): a static method returning true if the argument is an array. #Methods_Returning_the_New_Length_or_Original_Array (Mutating) These methods modify the original array. push() and unshift(): return the new length of the array. splice(): returns an array of deleted elements. sort(), reverse() and fill(): return the modified array itself. #Methods_Returning_a_New_Array (Non-Mutating) These methods do not change the original array; they return a new array with the results of the operation. Examples include: map(), filter(), slice(), concat(), flat(). #Methods_Returning_a_Single_Value_or_Element These methods return a single value based on the array's content. Examples include: find(): returns the first element satisfying a test function or undefined. reduce(): return a single value from a calculation. pop(): which returns the removed last element. shift(): which returns the removed first element. at(): which returns the element at a specific index. join(): which returns a string of joined elements. The Curve Africa #ArrayMethodsInJavaScript #JavaScript #BackendLearning

Definition of common errors in #JavaScript 1. #SyntaxError: A #syntaxError in JavaScript (also known as a parsing error) occurs when the code violates the language's grammatical rules. The JavaScript engine throws a #SyntaxError when it attempts to interpret code with invalid structure, such as a missing parenthesis or a misspelled keyword. Unlike logic errors (which give the wrong output) or runtime errors (which happen during execution), a syntax error prevents the script from running at all because the interpreter cannot parse the code correctly. It is similar to a grammatical error in human language. 2. #ReferenceError: A #referenceError in JavaScript occurs when your code attempts to access a variable, function, or object that does not exist or has not been initialized in the current scope. It essentially means the JavaScript interpreter cannot find a valid reference to the item you are trying to use. 3. #TypeError: A #TypeError in JavaScript is an error that occurs when an operation cannot be performed because a value is not of the expected or valid data type for that operation. It indicates that while a variable might exist, it's being used in an inappropriate way given its type. 4. #RangeError: A #RangeError in JavaScript indicates that a value is not within the set or range of allowed values for a function or constructor. It is thrown when an argument is numerically valid but falls outside the specific constraints of the operation being performed. #RangeError is one of the standard, built-in error types that inherit from the generic Error object. #What is an #Operand in #JavaScript? In JavaScript, an #operand is a value or an expression that an #operator acts upon to produce a result. Operators are symbols or keywords (like +, =, or typeof) that perform operations on this data. #Key #Characteristics #of #Operands 1. #Values_being_manipulated: Operands are essentially the "nouns" of a JavaScript statement, while operators are the "verbs". 2. #Types: Operands can be of any JavaScript data type, including literal values (like numbers or strings), variables, or even the results of other, more complex, expressions. 3. #Position: In common binary operations (like addition), operands are positioned on either side of the operator (e.g., left operand and right operand). In unary operations (like negation), there is a single operand. The Curve Africa #JavaScript #MyTechJourney #TheCurveAfrica

So you want to write cleaner code in JavaScript - it's a game-changer. Functional composition is key. It's like building with Legos - you create these tiny functions that do one thing, and then you combine them to make something amazing. You define a function that takes multiple functions as arguments, and it returns a new function that applies the original functions in a specific order - it's pretty straightforward. It works. For example, you can create a `compose` function that takes multiple functions and returns a new function that applies them in a specific order - like this: ```javascript const compose = (...functions) => (x) => functions.reduceRight((acc, fn) => fn(acc), x); ``` And then you can use it to compose other functions, like `add2` and `multiply3`. It's simple: ```javascript const add2 = (num) => num + 2; const multiply3 = (num) => num * 3; const add2ThenMultiply3 = compose(multiply3, add2); console.log(add2ThenMultiply3(5)); // Output:``` But here's the thing - functional composition isn't just for synchronous functions. It also works with asynchronous functions, which is huge. You can create an `asyncCompose` function that takes multiple asynchronous functions and returns a new function that applies them in a specific order - like this: ```javascript const asyncCompose = (...fns) => (initialInput) => fns.reduceRight( (promise, fn) => promise.then(fn), Promise.resolve(initialInput) ); ``` And then you can use it to compose asynchronous functions, like `fetchData` and `transformData`. It's pretty cool: ```javascript const fetchData = (id) => new Promise((resolve) => { setTimeout(() => resolve(`Data for ${id}`), 1000); }); const transformData = (data) => `${data} transformed!`; const composedAsyncFunction = asyncCompose(transformData, fetchData); composedAsyncFunction(1).then(console.log); // Output after 1 second: "Data for 1 transformed!" ``` Now, to take it to the next level, you can use techniques like batching function calls and memoization. Memoization is like caching - it stores the results of expensive function calls so you don't have to repeat them. You can create a `memoize` function that takes a function and returns a new function that caches its results - like this: ```javascript const memoize = (fn) => { const cache = {}; return function (...args) { const key = JSON.stringify(args); if (!(key in cache)) { cache[key] = fn(...args); } return cache[key]; }; }; ``` It's a big deal. By using functional composition and these techniques, you can write more efficient and maintainable code in JavaScript - and that's what it's all about. Source: https://lnkd.in/g3-F4DKC #javascript #functionalprogramming #codingtips

⚛️ React.js : JSX JSX stands for JavaScript XML. It allows developers to write HTML-like code inside JavaScript, making UI code more readable and expressive. JSX is not HTML — it is a syntax extension for JavaScript that gets converted into JavaScript behind the scenes. ✔ JSX Syntax JSX looks similar to HTML but follows JavaScript rules. Key points: Written inside JavaScript files Allows embedding UI directly in logic Transpiled to React.createElement() Example idea (conceptual): UI elements are written as tags These tags are actually JavaScript objects JSX makes React code easier to understand and maintain. ✔ JSX vs HTML Although JSX resembles HTML, there are important differences. JSX: Uses className instead of class Uses camelCase for attributes (onClick) Must return a single parent element HTML: Uses class attribute Allows multiple root elements Attributes follow standard HTML naming JSX is stricter because it follows JavaScript rules. ✔ Expressions in JSX JSX allows JavaScript expressions inside UI. Expressions can include: Variables Function calls Conditional expressions Mathematical operations They are written using curly braces {}, enabling dynamic rendering of content. This feature makes UI responsive to data changes. ✔ JSX Rules JSX follows specific rules to avoid ambiguity. Important rules: Must return one parent element All tags must be properly closed Attribute names follow camelCase JavaScript expressions must be inside {} Following these rules ensures clean and error-free UI code. ✔ Why JSX is Important Improves code readability Combines UI and logic in one place Makes components easier to debug Encourages reusable UI design JSX is a core concept that connects JavaScript logic with React UI seamlessly. #ReactJS #JSX #FrontendDevelopment #WebDevelopment #LearningInPublic #JavaScript

🌟 10 Useful JavaScript Snippets You Might Not Know Quick, practical JS helpers that can save time and clean up your code! 💡 --- 1️⃣ Randomize an array (Fisher-Yates shuffle) ```javascript const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5); console.log(shuffleArray([1, 2, 3, 4, 5])); ``` 2️⃣ Flatten nested arrays ```javascript const flatten = (arr) => [].concat(...arr); console.log(flatten([1, [2, 3], [4, [5]]])); ``` 3️⃣ Check if an object is empty ```javascript const isEmpty = (obj) => Object.keys(obj).length === 0; console.log(isEmpty({})); // true ``` 4️⃣ Remove duplicates from an array ```javascript const unique = (arr) => [...new Set(arr)]; console.log(unique([1, 2, 2, 3, 3, 4])); ``` 5️⃣ Get current date in YYYY-MM-DD format ```javascript const today = () => new Date().toISOString().slice(0, 10); console.log(today()); ``` 6️⃣ Capitalize the first letter of a string ```javascript const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1); console.log(capitalize("hello world")); ``` 7️⃣ Convert RGB to Hex ```javascript const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); console.log(rgbToHex(255, 100, 50)); ``` 8️⃣ Wait/delay function ```javascript const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); await delay(2000); // waits 2 seconds ``` 9️⃣ Copy text to clipboard ```javascript const copyToClipboard = (text) => navigator.clipboard.writeText(text); copyToClipboard("Hello, devs! 👨💻"); ``` 🔟 Extract parameters from URL ```javascript const getParams = (url) => Object.fromEntries(new URL(url).searchParams); console.log(getParams('https://lnkd.in/g3Y-T5jw')); ``` --- 📌 Which snippet did you find most useful? Have a better version? Share below! 👇 --- 📌 Follow Sasikumar S for more hands-on developer content ❤️ Join skAI – Daily Developer Learning Community for daily tips, growth hacks & career opportunities 💌 Repost to help others in your network 🤝 Connect: sasiias2024@gmail.com 💟 Explore more: sk-techland.web.app #JavaScript #WebDevelopment #CodingTips #JS #DeveloperTools #Programming #CodeSnippets #TechTips #Frontend #LearnToCode

So, you think you know JavaScript objects inside and out. But, let's get real - do you really understand how they inherit properties? It's like trying to find a specific book in a huge library, you gotta know where to look. JavaScript's secret sauce is prototypes. Every object has this internal prototype link that's like a map to its ancestors. When you try to access a property, JavaScript goes on a search mission through the prototype chain - it's like following a trail of breadcrumbs. Here's the lowdown: you try to access a property on an object, and if it's there, you get its value, no big deal. But, if it's not, JavaScript checks the object's prototype, and if it's not there, it keeps searching until it finds the property or hits a dead end. It's kinda like when you're trying to remember where you put your keys - you check the usual spots, and if you still can't find them, you start searching everywhere else. Simple. Now, let's dive deeper - the prototype chain is like a family tree, where each object inherits properties from its parent. And, just like in real life, the properties you inherit from your parents are shared with your siblings, but the ones you own are unique to you. For example, take a look at this code: ```javascript const animal = { eats: true, walk: function() { console.log('Animal walks'); } }; const rabbit = { jumps: true }; Object.setPrototypeOf(rabbit, animal); console.log(rabbit.jumps); // true console.log(rabbit.eats); // true rabbit.walk(); // "Animal walks" ``` In this example, the `rabbit` object inherits properties from the `animal` object - it's like the `rabbit` is saying, "Hey, I've got a parent who can teach me some cool stuff." And, here's the thing - methods on the prototype are shared across all instances, like a family recipe that's passed down through generations. But, properties on the instance are unique to each object, like a personal journal that's just for you. Oh, and one more thing - `__proto__` points to the object's prototype, like a sign that says, "Hey, my parent is over here." And, `prototype` is on constructor functions, like a blueprint for building a house. Now, you might be wondering about ES6 classes - they're like a fancy new car that's actually just a redesigned old model. They're syntactic sugar over constructor functions and prototypes, making it easier to create objects that inherit properties. And, if you're into React, you should know that class components use prototypes, but functional components don't - it's like the difference between a big, fancy restaurant and a food truck. Source: https://lnkd.in/ghnuf2BC #JavaScript #Prototypes #Inheritance #Coding

Tagged Template Literals (The Magic Function Call) in JavaScript 🚀 𝐓𝐡𝐞 𝐌𝐚𝐠𝐢𝐜 𝐨𝐟 "𝐓𝐚𝐠𝐠𝐞𝐝 𝐓𝐞𝐦𝐩𝐥𝐚𝐭𝐞𝐬": 𝐂𝐚𝐥𝐥𝐢𝐧𝐠 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬 𝐖𝐢𝐭𝐡𝐨𝐮𝐭 () 🪄 𝐇𝐞𝐚𝐝𝐥𝐢𝐧𝐞: 𝐄𝐯𝐞𝐫 𝐰𝐨𝐧𝐝𝐞𝐫𝐞𝐝 𝐡𝐨𝐰 𝐬𝐭𝐲𝐥𝐞𝐝.𝐝𝐢𝐯 𝐨𝐫 𝐠𝐪𝐥 𝐰𝐨𝐫𝐤𝐬? 𝐈𝐭'𝐬 𝐧𝐨𝐭 𝐦𝐚𝐠𝐢𝐜, 𝐢𝐭'𝐬 𝐣𝐮𝐬𝐭 "𝐓𝐚𝐠𝐠𝐞𝐝 𝐓𝐞𝐦𝐩𝐥𝐚𝐭𝐞𝐬" 🧠 Hey LinkedInFamily, We all love Template Literals (backticks) for mixing variables with strings. 𝐜𝐨𝐧𝐬𝐭 𝐦𝐬𝐠 = "𝐇𝐞𝐥𝐥𝐨 ${𝐧𝐚𝐦𝐞}"; But did you know you can put a Function Name right before the backticks? This is called a 𝐓𝐚𝐠𝐠𝐞𝐝 𝐓𝐞𝐦𝐩𝐥𝐚𝐭𝐞, and it completely changes how the string is processed. 🔍 How does it work? When you use a tag (function) before a template string, the browser doesn't just return a string. Instead, it calls the function and passes: 1. An array of the plain text parts. 2. The values of all variables (${...}) as separate arguments. This gives you full control to modify, sanitize, or reformat the data before it becomes a final string. 💡 Real-World Power: This is exactly how libraries like Styled Components working! 1. They take your CSS string. 2. They process it inside the tag function. 3. They generate a unique class name and inject the styles. 🛡 My Engineering Takeaway JavaScript allows us to create our own "mini-languages" (DSLs) using this feature. It’s a powerful tool for libraries that need to parse custom structures like CSS, HTML, or SQL queries safely. 𝐒𝐭𝐨𝐩 𝐣𝐮𝐬𝐭 𝐜𝐨𝐧𝐜𝐚𝐭𝐞𝐧𝐚𝐭𝐢𝐧𝐠 𝐬𝐭𝐫𝐢𝐧𝐠𝐬. 𝐒𝐭𝐚𝐫𝐭 𝐩𝐫𝐨𝐜𝐞𝐬𝐬𝐢𝐧𝐠 𝐭𝐡𝐞𝐦 🛠️✨ Ujjwal Kumar || Software Developer || JS Architecture Enthusiast || Metaprogramming #JavaScript #WebDevelopment #TaggedTemplates #ES6 #UjjwalKumar #TheDeveloper #SoftwareEngineering #CodingTips #StyledComponents #AdvancedJS

𝗖𝗼𝗿𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 & 𝗟𝗮𝗻𝗴𝘂𝗮𝗴𝗲 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀   1. What is the difference between var, let, and const? (temporal dead zone, block scoping, re-declaration, re-assignment)   2. Explain hoisting in JavaScript. How does it behave differently with var, function, let and const?   3. What are closures in JavaScript? Give a practical example where closures are useful.   4. How does the this keyword work in JavaScript? Explain its value in different contexts (global, object method, constructor, arrow function, event handler, strict mode).   5. What is the difference between == and ===? When does type coercion happen and what are some surprising coercion results?   6. Explain null vs undefined vs void 0. When would you intentionally return null vs undefined?   7. What are the different data types in JavaScript? What is the difference between primitive and reference types?   8. How can you reliably check the type of a value in JavaScript? (typeof, instanceof, Object.prototype.toString, Array.isArray, etc.)   9. What is coercion? Give examples of implicit and explicit coercion.   10. Explain the difference between ==, ===, Object.is(), and SameValueZero.   11. What is an IIFE? Why was it commonly used before let/const and modules?   12. What are arrow functions? How do they differ from regular functions (regarding this, arguments, super, constructor behavior)?   13. What are higher-order functions? Name at least 5 built-in examples.   14. Explain the difference between function declaration, function expression, and arrow function expression.   15. What is the arguments object? Why is it usually better to use rest parameters (…args) instead?   16. What is the Event Loop? Explain the call stack, task queue (macrotask), microtask queue, and rendering phase.   17. What is the difference between macrotasks and microtasks? Give examples of each.   18. Explain how setTimeout(…, 0) really works.   19. Compare setTimeout vs setInterval. When would one be preferred over the other?   20. What are Promises? Explain the states (pending, fulfilled, rejected) and the .then/.catch/.finally chain.   21. What do Promise.all, Promise.allSettled, Promise.any, Promise.race do? When would you use each?   22. How does async/await work under the hood? Is it just syntactic sugar?   23. How can you handle errors properly with async/await? (try/catch vs .catch)   24. What happens if you forget to await an async function?   25. How would you run multiple promises concurrently but still keep good error handling? For help and guidance in you carrier path https://lnkd.in/gH3paVi7 Join my dev community for resources📚, tech talks🧑🏻💻and learning 🧠 https://lnkd.in/gt8WeZSt #React #AI #Frontend #WebDevelopment #CareerGrowth #EngineeringMindset