{"id":11169,"date":"2026-09-06T11:25:01","date_gmt":"2026-09-06T05:55:01","guid":{"rendered":"https:\/\/www.monsterindia.com\/career-advice\/javascript-interview-questions-and-answers-11169\/"},"modified":"2026-09-07T12:33:09","modified_gmt":"2026-09-07T07:03:09","slug":"javascript-interview-questions-and-answers","status":"publish","type":"post","link":"https:\/\/www.foundit.com.ph\/career-advice\/javascript-interview-questions-and-answers\/","title":{"rendered":"120+ JavaScript Interview Questions and Answers for 2026"},"content":{"rendered":"<p class=\"wp-block-paragraph\">JavaScript remains one of the most versatile and <a href=\"https:\/\/www.foundit.com.ph\/career-advice\/5-programming-languages-that-every-techie-should-master\/\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>in-demand programming languages<\/strong><\/a> in 2026. Whether you are a fresher or a professional developer, mastering JavaScript is crucial for career advancement.<p class=\"wp-block-paragraph\">Interviews for JavaScript roles often cover a wide range of questions, from basic concepts to advanced problem-solving.<\/p><p class=\"wp-block-paragraph\">This guide covers <strong>100+ JavaScript interview questions and answers for 2026<\/strong>, starting with fundamentals and progressing to advanced concepts, browser behaviour and coding-based interview problems.<\/p><h2 class=\"wp-block-heading\">JavaScript Interview Questions for Freshers<\/h2><h3 class=\"wp-block-heading\">1. What is JavaScript?<\/h3><p class=\"wp-block-paragraph\">JavaScript is a high-level, dynamically typed programming language used to add behaviour and interactivity to applications. It runs natively in web browsers and can also run outside the browser through runtimes such as Node.js.<\/p><p class=\"wp-block-paragraph\">JavaScript supports multiple programming styles, including procedural, functional and object-oriented programming through prototypes and classes.<\/p><h3 class=\"wp-block-heading\">2. Is JavaScript compiled or interpreted?<\/h3><p class=\"wp-block-paragraph\">Modern JavaScript is not accurately described as purely interpreted. JavaScript engines parse the source code and may use <strong>Just-In-Time (JIT) compilation<\/strong> and runtime optimisation to execute frequently used code efficiently.<\/p><p class=\"wp-block-paragraph\">For example, engines such as V8 can optimise code while the program is running instead of compiling the entire application ahead of time in the same way as a traditional ahead-of-time compiled language.<\/p><h3 class=\"wp-block-heading\">3. Is JavaScript statically typed or dynamically typed?<\/h3><p class=\"wp-block-paragraph\">JavaScript is <strong>dynamically typed<\/strong>. A variable is not permanently restricted to one data type and can hold values of different types at different points in the program.<\/p><pre class=\"wp-block-code\"><code>let value = 10;\nvalue = \"hello\";\nvalue = true;<\/code><\/pre><p class=\"wp-block-paragraph\">The type belongs to the value rather than being fixed to the variable declaration.<\/p><h3 class=\"wp-block-heading\">4. What are the primitive data types in JavaScript?<\/h3><p class=\"wp-block-paragraph\">JavaScript has seven primitive data types:<\/p><ul class=\"wp-block-list\">\n<li><strong>String<\/strong><\/li>\n\n\n\n<li><strong>Number<\/strong><\/li>\n\n\n\n<li><strong>BigInt<\/strong><\/li>\n\n\n\n<li><strong>Boolean<\/strong><\/li>\n\n\n\n<li><strong>Undefined<\/strong><\/li>\n\n\n\n<li><strong>Null<\/strong><\/li>\n\n\n\n<li><strong>Symbol<\/strong><\/li>\n<\/ul><p class=\"wp-block-paragraph\">Objects are non-primitive values. Arrays and functions are specialised forms of objects in JavaScript.<\/p><h3 class=\"wp-block-heading\">5. What is the difference between primitive and reference values?<\/h3><p class=\"wp-block-paragraph\">Primitive values such as strings, numbers and booleans are immutable values. Objects, arrays and functions are objects, and variables referring to them hold references to those objects.<\/p><pre class=\"wp-block-code\"><code>const a =  ;\nconst b = a;\n\nb.value = 2;\n\nconsole.log(a.value); \/\/ 2<\/code><\/pre><p class=\"wp-block-paragraph\">Both <code>a<\/code> and <code>b<\/code> refer to the same object, so changing it through one reference is visible through the other.<\/p><h3 class=\"wp-block-heading\">6. What is the difference between var, let and const?<\/h3><figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Keyword<\/th><th>Scope<\/th><th>Redeclaration<\/th><th>Reassignment<\/th><\/tr><\/thead><tbody><tr><td><code>var<\/code><\/td><td>Function-scoped<\/td><td>Allowed in the same scope<\/td><td>Allowed<\/td><\/tr><tr><td><code>let<\/code><\/td><td>Block-scoped<\/td><td>Not allowed in the same scope<\/td><td>Allowed<\/td><\/tr><tr><td><code>const<\/code><\/td><td>Block-scoped<\/td><td>Not allowed in the same scope<\/td><td>Not allowed<\/td><\/tr><\/tbody><\/table><\/figure><p class=\"wp-block-paragraph\">A <code>const<\/code> object can still have its properties changed. <code>const<\/code> prevents reassignment of the variable binding; it does not automatically make the referenced object immutable.<\/p><pre class=\"wp-block-code\"><code>const user =  ;\n\nuser.name = \"Riya\"; \/\/ allowed\n\n\/\/ user =  ; \/\/ TypeError<\/code><\/pre><h3 class=\"wp-block-heading\">7. What is the difference between == and === in JavaScript?<\/h3><p class=\"wp-block-paragraph\"><code>==<\/code> performs <strong>loose equality<\/strong> and may convert operand types before comparison. <code>===<\/code> performs <strong>strict equality<\/strong> without type coercion.<\/p><pre class=\"wp-block-code\"><code>5 == \"5\"   \/\/ true\n5 === \"5\"  \/\/ false<\/code><\/pre><p class=\"wp-block-paragraph\">Strict equality is generally easier to reason about because it avoids implicit type conversion.<\/p><h3 class=\"wp-block-heading\">8. What is type coercion in JavaScript?<\/h3><p class=\"wp-block-paragraph\"><strong>Type coercion<\/strong> is the conversion of a value from one type to another. JavaScript can perform coercion implicitly, or developers can convert values explicitly.<\/p><pre class=\"wp-block-code\"><code>\"5\" + 2       \/\/ \"52\"\n\"5\" - 2       \/\/ 3\n\nNumber(\"5\")   \/\/ 5\nString(10)    \/\/ \"10\"<\/code><\/pre><p class=\"wp-block-paragraph\">The first two examples show implicit coercion. <code>Number()<\/code> and <code>String()<\/code> perform explicit conversion.<\/p><h3 class=\"wp-block-heading\">9. What is NaN in JavaScript?<\/h3><p class=\"wp-block-paragraph\"><code>NaN<\/code> means <strong>Not-a-Number<\/strong>. It represents a numeric result that cannot be represented as a valid number.<\/p><pre class=\"wp-block-code\"><code>Number(\"hello\"); \/\/ NaN<\/code><\/pre><p class=\"wp-block-paragraph\">A useful interview detail is that:<\/p><pre class=\"wp-block-code\"><code>typeof NaN; \/\/ \"number\"<\/code><\/pre><p class=\"wp-block-paragraph\">To check for NaN reliably, <code>Number.isNaN()<\/code> is usually preferable to comparing directly with <code>NaN<\/code>.<\/p><h3 class=\"wp-block-heading\">10. What is the difference between null and undefined?<\/h3><p class=\"wp-block-paragraph\"><code>undefined<\/code> commonly means that a value has not been assigned or does not exist. <code>null<\/code> is an explicit value typically used to represent the intentional absence of a value.<\/p><pre class=\"wp-block-code\"><code>let result;\nconsole.log(result); \/\/ undefined\n\nconst selectedUser = null;<\/code><\/pre><p class=\"wp-block-paragraph\">One historical JavaScript quirk is:<\/p><pre class=\"wp-block-code\"><code>typeof null; \/\/ \"object\"<\/code><\/pre><p class=\"wp-block-paragraph\">Despite that result, <code>null<\/code> is a primitive value, not an object.<\/p><h3 class=\"wp-block-heading\">11. What is hoisting in JavaScript?<\/h3><p class=\"wp-block-paragraph\">Hoisting describes how JavaScript processes declarations before executing the code in a scope. It does not literally move source-code lines to the top.<\/p><p class=\"wp-block-paragraph\">Function declarations can normally be called before their textual declaration:<\/p><pre class=\"wp-block-code\"><code>greet();\n\nfunction greet()  <\/code><\/pre><p class=\"wp-block-paragraph\">Variables declared with <code>var<\/code> exist before their declaration is reached but initially contain <code>undefined<\/code>. Variables declared with <code>let<\/code> and <code>const<\/code> also belong to their scope before the declaration line, but cannot be accessed during the Temporal Dead Zone.<\/p><h3 class=\"wp-block-heading\">12. What is the Temporal Dead Zone?<\/h3><p class=\"wp-block-paragraph\">The <strong>Temporal Dead Zone (TDZ)<\/strong> is the period between entering a scope and reaching the declaration of a <code>let<\/code>, <code>const<\/code> or <code>class<\/code> binding. Accessing the binding during this period throws a <code>ReferenceError<\/code>.<\/p><pre class=\"wp-block-code\"><code> <\/code><\/pre><h3 class=\"wp-block-heading\">13. What is scope in JavaScript?<\/h3><p class=\"wp-block-paragraph\">Scope determines where a variable or function can be accessed.<\/p><ul class=\"wp-block-list\">\n<li><strong>Global scope:<\/strong> accessible broadly within the relevant environment.<\/li>\n\n\n\n<li><strong>Function scope:<\/strong> variables declared with <code>var<\/code> inside a function belong to that function.<\/li>\n\n\n\n<li><strong>Block scope:<\/strong> <code>let<\/code> and <code>const<\/code> are scoped to blocks such as loops and <code>if<\/code> statements.<\/li>\n\n\n\n<li><strong>Module scope:<\/strong> top-level declarations in an ES module belong to that module rather than becoming ordinary global bindings.<\/li>\n<\/ul><h3 class=\"wp-block-heading\">14. What is lexical scope?<\/h3><p class=\"wp-block-paragraph\">Lexical scope means the accessibility of variables is determined by where functions and blocks are written in the source code.<\/p><pre class=\"wp-block-code\"><code>const outer = \"outside\";\n\nfunction showValue()  \n\nshowValue(); \/\/ outside<\/code><\/pre><p class=\"wp-block-paragraph\">The function can access <code>outer<\/code> because it was defined within a scope where that binding is available.<\/p><h3 class=\"wp-block-heading\">15. What is a closure in JavaScript?<\/h3><p class=\"wp-block-paragraph\">A <strong>closure<\/strong> is created when a function retains access to variables from its surrounding lexical environment even after the outer function has finished executing.<\/p><pre class=\"wp-block-code\"><code>function createCounter()  ;\n}\n\nconst counter = createCounter();\n\ncounter(); \/\/ 1\ncounter(); \/\/ 2<\/code><\/pre><p class=\"wp-block-paragraph\">Closures are commonly used for encapsulating state, factory functions, event handlers and callbacks.<\/p><h3 class=\"wp-block-heading\">16. What is an IIFE in JavaScript?<\/h3><p class=\"wp-block-paragraph\">An <strong>Immediately Invoked Function Expression (IIFE)<\/strong> is a function expression that executes as soon as it is created.<\/p><pre class=\"wp-block-code\"><code>(function ()  )();<\/code><\/pre><p class=\"wp-block-paragraph\">IIFEs were historically useful for creating isolated scopes before ES modules and block-scoped declarations became widely used.<\/p><h3 class=\"wp-block-heading\">17. What are functions in JavaScript?<\/h3><p class=\"wp-block-paragraph\">Functions are callable objects that encapsulate reusable behaviour. JavaScript supports several common function forms, including:<\/p><ul class=\"wp-block-list\">\n<li>function declarations;<\/li>\n\n\n\n<li>function expressions;<\/li>\n\n\n\n<li>arrow functions;<\/li>\n\n\n\n<li>methods;<\/li>\n\n\n\n<li>generator functions; and<\/li>\n\n\n\n<li>async functions.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Functions are <strong>first-class values<\/strong>, meaning they can be assigned to variables, stored in objects, passed to other functions and returned from functions.<\/p><h3 class=\"wp-block-heading\">18. What is a higher-order function?<\/h3><p class=\"wp-block-paragraph\">A <strong>higher-order function<\/strong> accepts one or more functions as arguments, returns a function, or both.<\/p><pre class=\"wp-block-code\"><code>const numbers = [1, 2, 3, 4];\n\nconst doubled = numbers.map(\n  number =&gt; number * 2\n);\n\nconsole.log(doubled); \/\/ [2, 4, 6, 8]<\/code><\/pre><p class=\"wp-block-paragraph\">Methods such as <code>map()<\/code>, <code>filter()<\/code> and <code>reduce()<\/code> are common examples of APIs that accept callback functions.<\/p><h3 class=\"wp-block-heading\">19. What is a callback function?<\/h3><p class=\"wp-block-paragraph\">A <strong>callback<\/strong> is a function passed to another function so that it can be called at an appropriate point.<\/p><pre class=\"wp-block-code\"><code>function processUser(name, callback)  \n\nprocessUser(\"Aman\", user =&gt;  `);\n});<\/code><\/pre><p class=\"wp-block-paragraph\">Callbacks are used in synchronous APIs such as array methods and in asynchronous APIs such as event handlers.<\/p><h3 class=\"wp-block-heading\">20. What are arrow functions, and how are they different from regular functions?<\/h3><p class=\"wp-block-paragraph\">Arrow functions provide a shorter syntax for function expressions.<\/p><pre class=\"wp-block-code\"><code>const add = (a, b) =&gt; a + b;<\/code><\/pre><p class=\"wp-block-paragraph\">The major interview difference is that an arrow function does <strong>not create its own <code>this<\/code>, <code>arguments<\/code> or <code>super<\/code> binding<\/strong>. It uses <code>this<\/code> from the surrounding lexical context.<\/p><p class=\"wp-block-paragraph\">Arrow functions also cannot be used as constructors with <code>new<\/code> and are often unsuitable when a method specifically needs a dynamic <code>this<\/code> value.<\/p><p class=\"has-background wp-block-paragraph\" ><strong>Read Also: <a href=\"https:\/\/www.foundit.com.ph\/career-advice\/java-interview-questions-and-answers-for-2-to-3-years-experience\/\" target=\"_blank\" rel=\"noopener\" title=\"\">50+ Java Interview Questions and Answers for 2-3 Years Experience<\/a><\/strong><\/p><h2 class=\"wp-block-heading\">JavaScript Objects, Prototypes and Arrays Interview Questions<\/h2><h3 class=\"wp-block-heading\">21. What is an object in JavaScript?<\/h3><p class=\"wp-block-paragraph\">An object is a collection of properties where each property has a key and a value. Property values can be primitives, other objects or functions.<\/p><pre class=\"wp-block-code\"><code>const user =  `;\n  }\n};<\/code><\/pre><p class=\"wp-block-paragraph\">Objects are commonly used to represent structured data and behaviour together.<\/p><h3 class=\"wp-block-heading\">22. What are the different ways to create objects in JavaScript?<\/h3><p class=\"wp-block-paragraph\">Common approaches include:<\/p><ul class=\"wp-block-list\">\n<li><strong>Object literal:<\/strong> <code> <\/code><\/li>\n\n\n\n<li><strong>Constructor function:<\/strong> used with <code>new<\/code><\/li>\n\n\n\n<li><strong>Object.create():<\/strong> creates an object with a specified prototype<\/li>\n\n\n\n<li><strong>Class syntax:<\/strong> provides a cleaner syntax over JavaScript&rsquo;s prototype-based object model<\/li>\n<\/ul><pre class=\"wp-block-code\"><code>const obj1 =  ;\n\nconst obj2 = Object.create(null);\n\nclass User  \n}\n\nconst obj3 = new User(\"Aman\");<\/code><\/pre><h3 class=\"wp-block-heading\">23. What is a prototype in JavaScript?<\/h3><p class=\"wp-block-paragraph\">Every ordinary JavaScript object has an internal link to another object called its <strong>prototype<\/strong>, unless its prototype is explicitly set to <code>null<\/code>.<\/p><p class=\"wp-block-paragraph\">If JavaScript cannot find a requested property directly on an object, it searches the object&rsquo;s prototype and then continues upward through the prototype chain.<\/p><h3 class=\"wp-block-heading\">24. What is prototype chaining?<\/h3><p class=\"wp-block-paragraph\"><strong>Prototype chaining<\/strong> is the process JavaScript uses to look up properties through an object&rsquo;s chain of prototypes.<\/p><pre class=\"wp-block-code\"><code>const animal =  ;\n\nconst dog = Object.create(animal);\ndog.barks = true;\n\nconsole.log(dog.barks); \/\/ true\nconsole.log(dog.eats);  \/\/ true<\/code><\/pre><p class=\"wp-block-paragraph\"><code>barks<\/code> is found directly on <code>dog<\/code>, while <code>eats<\/code> is inherited from <code>animal<\/code>.<\/p><h3 class=\"wp-block-heading\">25. What is the difference between __proto__ and prototype?<\/h3><p class=\"wp-block-paragraph\"><code>prototype<\/code> is a property found on constructor functions and is used for objects created with <code>new<\/code>.<\/p><p class=\"wp-block-paragraph\"><code>__proto__<\/code> is a legacy accessor that exposes an object&rsquo;s internal prototype link. In modern code, methods such as <code>Object.getPrototypeOf()<\/code> and <code>Object.setPrototypeOf()<\/code> are clearer alternatives.<\/p><pre class=\"wp-block-code\"><code>function Person()  \n\nconst person = new Person();\n\nconsole.log(\n  Object.getPrototypeOf(person) === Person.prototype\n); \/\/ true<\/code><\/pre><h3 class=\"wp-block-heading\">26. How does inheritance work in JavaScript?<\/h3><p class=\"wp-block-paragraph\">JavaScript uses <strong>prototype-based inheritance<\/strong>. Objects can inherit properties and methods through their prototype chain.<\/p><p class=\"wp-block-paragraph\">Class syntax provides a more familiar way to express this relationship, but JavaScript classes still use prototypes internally.<\/p><pre class=\"wp-block-code\"><code>class Animal  \n}\n\nclass Dog extends Animal  \n}\n\nconst dog = new Dog();\n\ndog.speak(); \/\/ \"sound\"\ndog.bark();  \/\/ \"woof\"<\/code><\/pre><h3 class=\"wp-block-heading\">27. What does the new keyword do in JavaScript?<\/h3><p class=\"wp-block-paragraph\">When a constructor function is called with <code>new<\/code>, JavaScript roughly performs these steps:<\/p><ol class=\"wp-block-list\">\n<li>Creates a new object.<\/li>\n\n\n\n<li>Links the new object&rsquo;s prototype to the constructor&rsquo;s <code>prototype<\/code> property.<\/li>\n\n\n\n<li>Calls the constructor with <code>this<\/code> referring to the new object.<\/li>\n\n\n\n<li>Returns the new object unless the constructor explicitly returns another object.<\/li>\n<\/ol><pre class=\"wp-block-code\"><code>function Person(name)  \n\nconst person = new Person(\"Aman\");<\/code><\/pre><h3 class=\"wp-block-heading\">28. What is the this keyword in JavaScript?<\/h3><p class=\"wp-block-paragraph\">The value of <code>this<\/code> depends mainly on <strong>how a function is called<\/strong>, not where the function is written.<\/p><p class=\"wp-block-paragraph\">Common cases include:<\/p><ul class=\"wp-block-list\">\n<li><strong>Method call:<\/strong> <code>this<\/code> usually refers to the object before the dot.<\/li>\n\n\n\n<li><strong>Constructor call with new:<\/strong> <code>this<\/code> refers to the new instance.<\/li>\n\n\n\n<li><strong>call(), apply() or bind():<\/strong> <code>this<\/code> can be explicitly controlled.<\/li>\n\n\n\n<li><strong>Arrow function:<\/strong> it does not create its own <code>this<\/code>; it uses the surrounding lexical value.<\/li>\n<\/ul><pre class=\"wp-block-code\"><code>const user =  \n};\n\nuser.showName(); \/\/ Aman<\/code><\/pre><h3 class=\"wp-block-heading\">29. What is the difference between call(), apply() and bind()?<\/h3><figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Method<\/th><th>Behaviour<\/th><\/tr><\/thead><tbody><tr><td><code>call()<\/code><\/td><td>Invokes the function immediately and passes arguments separately<\/td><\/tr><tr><td><code>apply()<\/code><\/td><td>Invokes the function immediately and accepts arguments as an array or array-like object<\/td><\/tr><tr><td><code>bind()<\/code><\/td><td>Returns a new function with a specified <code>this<\/code> value and optional preset arguments<\/td><\/tr><\/tbody><\/table><\/figure><pre class=\"wp-block-code\"><code>function greet(greeting)  , $ `;\n}\n\nconst user =  ;\n\ngreet.call(user, \"Hello\");\ngreet.apply(user, [\"Hi\"]);\n\nconst boundGreet = greet.bind(user);\nboundGreet(\"Welcome\");<\/code><\/pre><h3 class=\"wp-block-heading\">30. What is a factory function?<\/h3><p class=\"wp-block-paragraph\">A <strong>factory function<\/strong> is a regular function that creates and returns an object without requiring the <code>new<\/code> keyword.<\/p><pre class=\"wp-block-code\"><code>function createUser(name)  `;\n    }\n  };\n}\n\nconst user = createUser(\"Aman\");<\/code><\/pre><h3 class=\"wp-block-heading\">31. What is a constructor function?<\/h3><p class=\"wp-block-paragraph\">A constructor function is a regular function intended to create object instances with the <code>new<\/code> keyword.<\/p><pre class=\"wp-block-code\"><code>function Person(name)  \n\nPerson.prototype.greet = function ()  `;\n};\n\nconst person = new Person(\"Aman\");<\/code><\/pre><p class=\"wp-block-paragraph\">Constructor functions were widely used before class syntax was introduced and remain important for understanding prototypes.<\/p><h3 class=\"wp-block-heading\">32. What is the difference between Object.freeze() and Object.seal()?<\/h3><figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Object.freeze()<\/th><th>Object.seal()<\/th><\/tr><\/thead><tbody><tr><td>Prevents adding properties<\/td><td>Prevents adding properties<\/td><\/tr><tr><td>Prevents deleting properties<\/td><td>Prevents deleting properties<\/td><\/tr><tr><td>Prevents changing existing data properties<\/td><td>Allows changing writable existing properties<\/td><\/tr><tr><td>Is shallow<\/td><td>Is shallow<\/td><\/tr><\/tbody><\/table><\/figure><p class=\"wp-block-paragraph\">A frozen object is not automatically deeply immutable. Nested objects can still be modified unless they are also frozen.<\/p><pre class=\"wp-block-code\"><code>const user = Object.freeze( \n});\n\nuser.profile.age = 26; \/\/ nested object can still change<\/code><\/pre><h3 class=\"wp-block-heading\">33. What is the difference between shallow copy and deep copy?<\/h3><p class=\"wp-block-paragraph\">A <strong>shallow copy<\/strong> creates a new top-level object, but nested objects continue to be shared by reference.<\/p><p class=\"wp-block-paragraph\">A <strong>deep copy<\/strong> creates independent copies of nested values as well.<\/p><pre class=\"wp-block-code\"><code>const original =  \n};\n\nconst copy =  ;\n\ncopy.user.name = \"Riya\";\n\nconsole.log(original.user.name); \/\/ Riya<\/code><\/pre><p class=\"wp-block-paragraph\">The spread syntax created only a shallow copy, so both objects still reference the same nested <code>user<\/code> object.<\/p><h3 class=\"wp-block-heading\">34. What is structuredClone() in JavaScript?<\/h3><p class=\"wp-block-paragraph\"><code>structuredClone()<\/code> creates a deep clone of many JavaScript values using the structured clone algorithm.<\/p><pre class=\"wp-block-code\"><code>const original =  \n};\n\nconst copy = structuredClone(original);\n\ncopy.user.name = \"Riya\";\n\nconsole.log(original.user.name); \/\/ Aman<\/code><\/pre><p class=\"wp-block-paragraph\">It can clone many built-in data structures that JSON-based cloning cannot handle correctly. However, not every JavaScript value is cloneable; functions, for example, cannot be cloned with <code>structuredClone()<\/code>.<\/p><h3 class=\"wp-block-heading\">35. What are arrays in JavaScript?<\/h3><p class=\"wp-block-paragraph\">An array is an ordered, zero-indexed collection used to store multiple values. JavaScript arrays are dynamic and can contain values of different types.<\/p><pre class=\"wp-block-code\"><code>const values = [\n  10,\n  \"hello\",\n  true,\n   \n];<\/code><\/pre><p class=\"wp-block-paragraph\">Arrays are objects internally, so:<\/p><pre class=\"wp-block-code\"><code>typeof []; \/\/ \"object\"\n\nArray.isArray([]); \/\/ true<\/code><\/pre><h3 class=\"wp-block-heading\">36. What is the difference between map(), filter() and reduce()?<\/h3><figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Method<\/th><th>Purpose<\/th><\/tr><\/thead><tbody><tr><td><code>map()<\/code><\/td><td>Transforms every element and returns a new array<\/td><\/tr><tr><td><code>filter()<\/code><\/td><td>Returns elements that satisfy a condition<\/td><\/tr><tr><td><code>reduce()<\/code><\/td><td>Combines array elements into a single accumulated result<\/td><\/tr><\/tbody><\/table><\/figure><pre class=\"wp-block-code\"><code>const numbers = [1, 2, 3, 4];\n\nnumbers.map(n =&gt; n * 2);\n\/\/ [2, 4, 6, 8]\n\nnumbers.filter(n =&gt; n % 2 === 0);\n\/\/ [2, 4]\n\nnumbers.reduce((sum, n) =&gt; sum + n, 0);\n\/\/ 10<\/code><\/pre><h3 class=\"wp-block-heading\">37. What is the difference between map() and forEach()?<\/h3><p class=\"wp-block-paragraph\"><code>map()<\/code> creates and returns a new array containing the callback results. <code>forEach()<\/code> executes a callback for each element but returns <code>undefined<\/code>.<\/p><pre class=\"wp-block-code\"><code>const numbers = [1, 2, 3];\n\nconst doubled = numbers.map(\n  n =&gt; n * 2\n);\n\nconst result = numbers.forEach(\n  n =&gt; console.log(n)\n);\n\nconsole.log(result); \/\/ undefined<\/code><\/pre><p class=\"wp-block-paragraph\">Use <code>map()<\/code> when the goal is to produce a transformed array. Use <code>forEach()<\/code> when the goal is mainly to perform an action for each item.<\/p><h3 class=\"wp-block-heading\">38. What is the difference between slice() and splice()?<\/h3><p class=\"wp-block-paragraph\"><code>slice()<\/code> returns a selected portion of an array without modifying the original array.<\/p><p class=\"wp-block-paragraph\"><code>splice()<\/code> changes the original array by removing, replacing or inserting elements.<\/p><pre class=\"wp-block-code\"><code>const numbers = [1, 2, 3, 4];\n\nnumbers.slice(1, 3);\n\/\/ [2, 3]\n\nnumbers.splice(1, 2);\n\/\/ numbers is now [1, 4]<\/code><\/pre><h3 class=\"wp-block-heading\">39. What is destructuring in JavaScript?<\/h3><p class=\"wp-block-paragraph\"><strong>Destructuring<\/strong> extracts values from arrays or properties from objects into variables.<\/p><pre class=\"wp-block-code\"><code>const user =  ;\n\nconst   = user;\n\nconst numbers = [10, 20];\n\nconst [first, second] = numbers;<\/code><\/pre><p class=\"wp-block-paragraph\">Destructuring can also provide default values, rename object properties and extract nested data.<\/p><h3 class=\"wp-block-heading\">40. What is the difference between spread and rest syntax?<\/h3><p class=\"wp-block-paragraph\">Both use <code>...<\/code>, but their purpose depends on context.<\/p><ul class=\"wp-block-list\">\n<li><strong>Spread:<\/strong> expands values from an iterable or object into another structure.<\/li>\n\n\n\n<li><strong>Rest:<\/strong> collects remaining values into an array or object.<\/li>\n<\/ul><pre class=\"wp-block-code\"><code>const numbers = [1, 2, 3];\n\nconst copied = [...numbers];\n\nfunction sum(...values)  \n\nsum(1, 2, 3); \/\/ 6<\/code><\/pre><h3 class=\"wp-block-heading\">41. What is a Set in JavaScript?<\/h3><p class=\"wp-block-paragraph\">A <strong>Set<\/strong> stores unique values. Adding the same value more than once does not create duplicate entries.<\/p><pre class=\"wp-block-code\"><code>const values = new Set([\n  1,\n  2,\n  2,\n  3\n]);\n\nconsole.log([...values]);\n\/\/ [1, 2, 3]<\/code><\/pre><p class=\"wp-block-paragraph\">Sets are useful for membership checks and removing duplicate primitive values from arrays.<\/p><h3 class=\"wp-block-heading\">42. What is a Map in JavaScript?<\/h3><p class=\"wp-block-paragraph\">A <strong>Map<\/strong> stores key-value pairs and allows keys of any value type, including objects.<\/p><pre class=\"wp-block-code\"><code>const map = new Map();\n\nconst user =  ;\n\nmap.set(user, \"Admin\");\n\nconsole.log(map.get(user));\n\/\/ Admin<\/code><\/pre><p class=\"wp-block-paragraph\">Unlike ordinary object property keys, Map keys are not limited to strings and symbols.<\/p><h3 class=\"wp-block-heading\">43. What is the difference between Map and Object?<\/h3><figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Map<\/th><th>Object<\/th><\/tr><\/thead><tbody><tr><td>Keys can be values of any type<\/td><td>Own property keys are strings or symbols<\/td><\/tr><tr><td>Provides <code>size<\/code><\/td><td>Requires another operation to count keys<\/td><\/tr><tr><td>Directly iterable<\/td><td>Usually iterated through methods such as <code>Object.keys()<\/code> or <code>Object.entries()<\/code><\/td><\/tr><tr><td>Designed specifically for key-value collections<\/td><td>Also supports prototypes, methods and general object modelling<\/td><\/tr><\/tbody><\/table><\/figure><p class=\"wp-block-paragraph\">Use the structure that best matches the problem rather than assuming one is universally better.<\/p><h3 class=\"wp-block-heading\">44. What are WeakMap and WeakSet?<\/h3><p class=\"wp-block-paragraph\"><strong>WeakMap<\/strong> and <strong>WeakSet<\/strong> hold object references weakly, which means their presence in these collections does not by itself prevent the objects from being garbage collected.<\/p><ul class=\"wp-block-list\">\n<li><strong>WeakMap:<\/strong> stores key-value pairs with weakly held object or non-registered symbol keys.<\/li>\n\n\n\n<li><strong>WeakSet:<\/strong> stores weakly held objects or non-registered symbols.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Unlike Map and Set, WeakMap and WeakSet are not generally enumerable because entries can disappear when their keys or values are garbage collected.<\/p><h3 class=\"wp-block-heading\">45. What is optional chaining?<\/h3><p class=\"wp-block-paragraph\">The optional chaining operator <code>?.<\/code> safely accesses a property or method when the preceding value may be <code>null<\/code> or <code>undefined<\/code>.<\/p><pre class=\"wp-block-code\"><code>const user =  ;\n\nconsole.log(\n  user.profile?.contact?.email\n); \/\/ undefined<\/code><\/pre><p class=\"wp-block-paragraph\">Without optional chaining, accessing the missing nested property directly could throw a <code>TypeError<\/code>.<\/p><h3 class=\"wp-block-heading\">46. What is nullish coalescing?<\/h3><p class=\"wp-block-paragraph\">The nullish coalescing operator <code>??<\/code> returns the right-hand value only when the left-hand value is <code>null<\/code> or <code>undefined<\/code>.<\/p><pre class=\"wp-block-code\"><code>const count = 0;\n\nconsole.log(count ?? 10);\n\/\/ 0<\/code><\/pre><p class=\"wp-block-paragraph\">This differs from <code>||<\/code>, which also treats values such as <code>0<\/code>, <code>\"\"<\/code> and <code>false<\/code> as falsy.<\/p><h3 class=\"wp-block-heading\">47. What are template literals?<\/h3><p class=\"wp-block-paragraph\">Template literals use backticks and support expression interpolation and multi-line strings.<\/p><pre class=\"wp-block-code\"><code>const name = \"Aman\";\n\nconst message =\n  `Hello $ `;\n\nconsole.log(message);\n\/\/ Hello Aman<\/code><\/pre><h3 class=\"wp-block-heading\">48. What are tagged template literals?<\/h3><p class=\"wp-block-paragraph\">A tagged template sends the parts of a template literal to a function before producing the final result.<\/p><pre class=\"wp-block-code\"><code>function tag(strings, value)  $ `;\n}\n\nconst name = \"aman\";\n\ntag`Hello $ `;\n\/\/ \"Hello AMAN\"<\/code><\/pre><p class=\"wp-block-paragraph\">Tagged templates can be used for custom formatting, escaping or domain-specific template processing.<\/p><h3 class=\"wp-block-heading\">49. What is a Symbol in JavaScript?<\/h3><p class=\"wp-block-paragraph\">A <code>Symbol<\/code> is a primitive value that is guaranteed to be unique when created with <code>Symbol()<\/code>.<\/p><pre class=\"wp-block-code\"><code>const id1 = Symbol(\"id\");\nconst id2 = Symbol(\"id\");\n\nconsole.log(id1 === id2);\n\/\/ false<\/code><\/pre><p class=\"wp-block-paragraph\">Symbols can be used as object property keys when a unique key is required.<\/p><h3 class=\"wp-block-heading\">50. What are private fields in JavaScript classes?<\/h3><p class=\"wp-block-paragraph\">Private class elements use the <code>#<\/code> prefix and can only be accessed from within the class body where they are declared.<\/p><pre class=\"wp-block-code\"><code>class Account  \n\n  getBalance()  \n}<\/code><\/pre><p class=\"wp-block-paragraph\">Attempting to access <code>#balance<\/code> directly from outside the class results in a syntax error.<\/p><div style=\"text-align: center;\">\n<a font-size: 18px;border-radius: 4px;font-weight: bold;\" href=\"https:\/\/www.foundit.com.ph\/search\/fresher-java-developer-jobs\" target=\"_blank\">Apply for Fresher Java Developer Jobs<\/a>\n<\/div><h2 class=\"wp-block-heading\">Asynchronous JavaScript Interview Questions<\/h2><h3 class=\"wp-block-heading\">51. What is asynchronous programming in JavaScript?<\/h3><p class=\"wp-block-paragraph\">Asynchronous programming allows JavaScript to start an operation and continue executing other code while waiting for that operation to complete.<\/p><p class=\"wp-block-paragraph\">This is important for operations such as:<\/p><ul class=\"wp-block-list\">\n<li>network requests;<\/li>\n\n\n\n<li>timers;<\/li>\n\n\n\n<li>file or database operations in server-side environments; and<\/li>\n\n\n\n<li>user-interface events.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">JavaScript handles asynchronous behaviour using mechanisms such as callbacks, Promises and <code>async\/await<\/code>.<\/p><h3 class=\"wp-block-heading\">52. What is the call stack in JavaScript?<\/h3><p class=\"wp-block-paragraph\">The <strong>call stack<\/strong> tracks which functions are currently executing.<\/p><p class=\"wp-block-paragraph\">When a function is called, a frame is pushed onto the stack. When the function finishes, its frame is removed.<\/p><pre class=\"wp-block-code\"><code>function first()  \n\nfunction second()  \n\nfirst();<\/code><\/pre><p class=\"wp-block-paragraph\">The stack grows as <code>first()<\/code> calls <code>second()<\/code> and then unwinds as each function returns.<\/p><h3 class=\"wp-block-heading\">53. What is the event loop in JavaScript?<\/h3><p class=\"wp-block-paragraph\">The <strong>event loop<\/strong> coordinates the execution of asynchronous work by checking whether the call stack is empty and then allowing queued tasks to run according to the runtime&rsquo;s scheduling rules.<\/p><p class=\"wp-block-paragraph\">In a browser environment, asynchronous operations such as timers and network requests are handled outside the JavaScript call stack. Their callbacks or promise reactions are queued and later executed when JavaScript is ready to process them.<\/p><h3 class=\"wp-block-heading\">54. What are Web APIs in the browser?<\/h3><p class=\"wp-block-paragraph\">Browser Web APIs are capabilities provided by the browser environment rather than by the JavaScript language itself.<\/p><p class=\"wp-block-paragraph\">Examples include:<\/p><ul class=\"wp-block-list\">\n<li><code>setTimeout()<\/code>;<\/li>\n\n\n\n<li><code>fetch()<\/code>;<\/li>\n\n\n\n<li>DOM APIs;<\/li>\n\n\n\n<li>Geolocation;<\/li>\n\n\n\n<li>Web Storage; and<\/li>\n\n\n\n<li>Web Workers.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">JavaScript can call these APIs, and the browser coordinates their asynchronous completion.<\/p><h3 class=\"wp-block-heading\">55. What is the difference between a task queue and a microtask queue?<\/h3><p class=\"wp-block-paragraph\">In browser terminology, <strong>tasks<\/strong> and <strong>microtasks<\/strong> are scheduled differently.<\/p><ul class=\"wp-block-list\">\n<li><strong>Tasks:<\/strong> include work such as timer callbacks and many event callbacks.<\/li>\n\n\n\n<li><strong>Microtasks:<\/strong> include Promise reactions and <code>queueMicrotask()<\/code> callbacks.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">After the current JavaScript execution finishes, the runtime processes pending microtasks before moving on to the next task.<\/p><h3 class=\"wp-block-heading\">56. What will this JavaScript code output?<\/h3><pre class=\"wp-block-code\"><code>console.log(\"A\");\n\nsetTimeout(() =&gt;  , 0);\n\nPromise.resolve().then(() =&gt;  );\n\nconsole.log(\"D\");<\/code><\/pre><p class=\"wp-block-paragraph\">The output is:<\/p><pre class=\"wp-block-code\"><code>A\nD\nC\nB<\/code><\/pre><p class=\"wp-block-paragraph\">The synchronous statements run first. The Promise callback runs as a microtask before the timer callback, which runs as a later task.<\/p><h3 class=\"wp-block-heading\">57. What is a Promise in JavaScript?<\/h3><p class=\"wp-block-paragraph\">A <strong>Promise<\/strong> represents the eventual completion or failure of an asynchronous operation and its resulting value.<\/p><p class=\"wp-block-paragraph\">A Promise can be in one of three states:<\/p><ul class=\"wp-block-list\">\n<li><strong>pending<\/strong><\/li>\n\n\n\n<li><strong>fulfilled<\/strong><\/li>\n\n\n\n<li><strong>rejected<\/strong><\/li>\n<\/ul><pre class=\"wp-block-code\"><code>const promise = new Promise((resolve, reject) =&gt;   else  \n});<\/code><\/pre><h3 class=\"wp-block-heading\">58. What is Promise chaining?<\/h3><p class=\"wp-block-paragraph\">Promise chaining means linking asynchronous operations using consecutive <code>.then()<\/code> calls.<\/p><pre class=\"wp-block-code\"><code>fetch(\"\/api\/user\")\n  .then(response =&gt; response.json())\n  .then(user =&gt;  `);\n  })\n  .then(response =&gt; response.json())\n  .then(orders =&gt;  )\n  .catch(error =&gt;  );<\/code><\/pre><p class=\"wp-block-paragraph\">Each <code>.then()<\/code> returns a new Promise, allowing later steps to use the previous result.<\/p><h3 class=\"wp-block-heading\">59. What is the difference between then(), catch() and finally()?<\/h3><ul class=\"wp-block-list\">\n<li><code>then()<\/code> handles fulfilled Promise results and can also provide a rejection handler.<\/li>\n\n\n\n<li><code>catch()<\/code> handles rejection in a Promise chain.<\/li>\n\n\n\n<li><code>finally()<\/code> runs after the Promise is settled, whether it was fulfilled or rejected.<\/li>\n<\/ul><pre class=\"wp-block-code\"><code>loadData()\n  .then(data =&gt;  )\n  .catch(error =&gt;  )\n  .finally(() =&gt;  );<\/code><\/pre><h3 class=\"wp-block-heading\">60. What is async\/await in JavaScript?<\/h3><p class=\"wp-block-paragraph\"><code>async\/await<\/code> provides syntax for working with Promises in a way that can be easier to read than long Promise chains.<\/p><pre class=\"wp-block-code\"><code>async function loadUser()  <\/code><\/pre><p class=\"wp-block-paragraph\">An <code>async<\/code> function always returns a Promise. <code>await<\/code> pauses execution of that async function until the awaited value settles, without blocking the entire JavaScript runtime.<\/p><h3 class=\"wp-block-heading\">61. What is the difference between Promises and async\/await?<\/h3><p class=\"wp-block-paragraph\"><code>async\/await<\/code> does not replace Promises; it is built on top of them.<\/p><figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Promises<\/th><th>async\/await<\/th><\/tr><\/thead><tbody><tr><td>Commonly use <code>.then()<\/code> and <code>.catch()<\/code><\/td><td>Uses <code>await<\/code> inside an <code>async<\/code> function<\/td><\/tr><tr><td>Useful for composing multiple Promise operations directly<\/td><td>Often easier to read for sequential asynchronous steps<\/td><\/tr><tr><td>Error handling often uses <code>.catch()<\/code><\/td><td>Error handling commonly uses <code>try...catch<\/code><\/td><\/tr><\/tbody><\/table><\/figure><p class=\"wp-block-paragraph\">The choice is mainly about clarity and the control flow required.<\/p><h3 class=\"wp-block-heading\">62. How do you handle errors with async\/await?<\/h3><p class=\"wp-block-paragraph\">Errors can be handled with <code>try...catch<\/code>.<\/p><pre class=\"wp-block-code\"><code>async function loadData()  `\n      );\n    }\n\n    return await response.json();\n  } catch (error)  \n}<\/code><\/pre><p class=\"wp-block-paragraph\">A useful interview detail is that <code>fetch()<\/code> does not reject merely because the server returned an HTTP status such as 404 or 500, so response status should be checked explicitly when required.<\/p><h3 class=\"wp-block-heading\">63. What is Promise.all()?<\/h3><p class=\"wp-block-paragraph\"><code>Promise.all()<\/code> waits for all supplied Promises to fulfil and returns their results in the same input order.<\/p><pre class=\"wp-block-code\"><code>const [user, orders] = await Promise.all([\n  fetch(\"\/api\/user\").then(r =&gt; r.json()),\n  fetch(\"\/api\/orders\").then(r =&gt; r.json())\n]);<\/code><\/pre><p class=\"wp-block-paragraph\">If any input Promise rejects, the Promise returned by <code>Promise.all()<\/code> rejects with that reason.<\/p><h3 class=\"wp-block-heading\">64. What is Promise.allSettled()?<\/h3><p class=\"wp-block-paragraph\"><code>Promise.allSettled()<\/code> waits until every supplied Promise settles and returns the outcome of each Promise, regardless of whether it fulfilled or rejected.<\/p><pre class=\"wp-block-code\"><code>const results = await Promise.allSettled([\n  Promise.resolve(\"A\"),\n  Promise.reject(\"B\")\n]);\n\nconsole.log(results);<\/code><\/pre><p class=\"wp-block-paragraph\">It is useful when every result matters and one failure should not prevent you from inspecting the others.<\/p><h3 class=\"wp-block-heading\">65. What is Promise.race()?<\/h3><p class=\"wp-block-paragraph\"><code>Promise.race()<\/code> settles as soon as the first input Promise settles, whether that first result is a fulfilment or a rejection.<\/p><p class=\"wp-block-paragraph\">It can be used in patterns such as implementing a timeout race, although cancellation of the underlying work must be handled separately.<\/p><h3 class=\"wp-block-heading\">66. What is Promise.any()?<\/h3><p class=\"wp-block-paragraph\"><code>Promise.any()<\/code> fulfils when the first input Promise fulfils. Rejections are ignored unless every input Promise rejects.<\/p><p class=\"wp-block-paragraph\">If all inputs reject, it rejects with an <code>AggregateError<\/code>.<\/p><h3 class=\"wp-block-heading\">67. What is callback hell?<\/h3><p class=\"wp-block-paragraph\"><strong>Callback hell<\/strong> refers to deeply nested callback-based code that becomes difficult to read, reason about and maintain.<\/p><pre class=\"wp-block-code\"><code>getUser(id, user =&gt;  );\n  });\n});<\/code><\/pre><p class=\"wp-block-paragraph\">Promises and <code>async\/await<\/code> can often make this control flow clearer, although good function decomposition is still important.<\/p><h3 class=\"wp-block-heading\">68. What is queueMicrotask()?<\/h3><p class=\"wp-block-paragraph\"><code>queueMicrotask()<\/code> schedules a function to run in the microtask queue after the current synchronous code completes.<\/p><pre class=\"wp-block-code\"><code>console.log(\"start\");\n\nqueueMicrotask(() =&gt;  );\n\nconsole.log(\"end\");<\/code><\/pre><p class=\"wp-block-paragraph\">The output is:<\/p><pre class=\"wp-block-code\"><code>start\nend\nmicrotask<\/code><\/pre><h3 class=\"wp-block-heading\">69. What is a generator function?<\/h3><p class=\"wp-block-paragraph\">A <strong>generator function<\/strong> can pause its execution and later resume from the same point.<\/p><p class=\"wp-block-paragraph\">Generator functions are declared with <code>function*<\/code> and use <code>yield<\/code> to produce values.<\/p><pre class=\"wp-block-code\"><code>function* numbers()  \n\nconst iterator = numbers();\n\niterator.next(); \/\/  \niterator.next(); \/\/  <\/code><\/pre><p class=\"wp-block-paragraph\">Generators implement the iterator protocol and are useful for lazy sequences and custom iteration behaviour.<\/p><h3 class=\"wp-block-heading\">70. What are async iterators and for await&hellip;of?<\/h3><p class=\"wp-block-paragraph\">Async iterators allow values to become available asynchronously. They can be consumed using <code>for await...of<\/code>.<\/p><pre class=\"wp-block-code\"><code>async function* generateValues()  \n\nfor await (const value of generateValues())  <\/code><\/pre><p class=\"wp-block-paragraph\">This pattern is useful when processing asynchronous sequences or streaming data.<\/p><div style=\"text-align: center;\">\n<a font-size: 18px;border-radius: 4px;font-weight: bold;\" href=\"https:\/\/www.foundit.com.ph\/search\/java-developer-work-from-home-jobs\" target=\"_blank\">Java Developer Work From Home Jobs<\/a>\n<\/div><h2 class=\"wp-block-heading\">DOM and Browser JavaScript Interview Questions<\/h2><h3 class=\"wp-block-heading\">71. What is the DOM in JavaScript?<\/h3><p class=\"wp-block-paragraph\">The <strong>Document Object Model (DOM)<\/strong> is the browser&rsquo;s object representation of an HTML or XML document. JavaScript can use DOM APIs to read, modify, add or remove elements and respond to user interactions.<\/p><pre class=\"wp-block-code\"><code>const heading =\n  document.querySelector(\"h1\");\n\nheading.textContent =\n  \"Updated heading\";<\/code><\/pre><p class=\"wp-block-paragraph\">The DOM is provided by the browser environment. It is not part of the JavaScript language specification itself.<\/p><h3 class=\"wp-block-heading\">72. What is the difference between getElementById() and querySelector()?<\/h3><p class=\"wp-block-paragraph\"><code>getElementById()<\/code> selects an element using its ID. <code>querySelector()<\/code> accepts a CSS selector and returns the first matching element.<\/p><pre class=\"wp-block-code\"><code>document.getElementById(\"profile\");\n\ndocument.querySelector(\n  \".profile-card\"\n);<\/code><\/pre><p class=\"wp-block-paragraph\"><code>querySelectorAll()<\/code> can be used when all matching elements are required.<\/p><h3 class=\"wp-block-heading\">73. What is the difference between innerHTML, innerText and textContent?<\/h3><figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Property<\/th><th>What It Works With<\/th><\/tr><\/thead><tbody><tr><td><code>innerHTML<\/code><\/td><td>Reads or writes HTML markup inside an element<\/td><\/tr><tr><td><code>innerText<\/code><\/td><td>Represents rendered text and is affected by styling\/layout<\/td><\/tr><tr><td><code>textContent<\/code><\/td><td>Reads or writes the text content of the node and its descendants<\/td><\/tr><\/tbody><\/table><\/figure><p class=\"wp-block-paragraph\">When inserting untrusted user-controlled content, directly assigning it to <code>innerHTML<\/code> can create security risks such as cross-site scripting if the content is not handled safely.<\/p><h3 class=\"wp-block-heading\">74. What is event bubbling?<\/h3><p class=\"wp-block-paragraph\"><strong>Event bubbling<\/strong> is the phase in which an event moves from its target element upward through its ancestors.<\/p><pre class=\"wp-block-code\"><code>&lt;div id=\"parent\"&gt;\n  &lt;button id=\"button\"&gt;\n    Click\n  &lt;\/button&gt;\n&lt;\/div&gt;<\/code><\/pre><p class=\"wp-block-paragraph\">If click handlers are attached to both elements, a click on the button can also reach the parent during the bubbling phase unless propagation is stopped.<\/p><h3 class=\"wp-block-heading\">75. What is event capturing?<\/h3><p class=\"wp-block-paragraph\"><strong>Event capturing<\/strong> is the phase in which an event travels from outer ancestors toward the target before the target and bubbling phases.<\/p><pre class=\"wp-block-code\"><code>element.addEventListener(\n  \"click\",\n  handler,\n   \n);<\/code><\/pre><p class=\"wp-block-paragraph\">Most event listeners use the bubbling phase by default unless capture is explicitly enabled.<\/p><h3 class=\"wp-block-heading\">76. What is event delegation?<\/h3><p class=\"wp-block-paragraph\"><strong>Event delegation<\/strong> attaches a listener to a common ancestor instead of attaching separate listeners to many child elements.<\/p><pre class=\"wp-block-code\"><code>document\n  .querySelector(\"#list\")\n  .addEventListener(\"click\", event =&gt;  \n  });<\/code><\/pre><p class=\"wp-block-paragraph\">It works because many events bubble through ancestor elements. Event delegation is useful for dynamic lists because newly added matching child elements can be handled by the existing parent listener.<\/p><h3 class=\"wp-block-heading\">77. What is the difference between event.target and event.currentTarget?<\/h3><ul class=\"wp-block-list\">\n<li><code>event.target<\/code> is the object on which the event was originally dispatched.<\/li>\n\n\n\n<li><code>event.currentTarget<\/code> is the object whose event listener is currently running.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">This distinction is particularly important when implementing event delegation.<\/p><h3 class=\"wp-block-heading\">78. What do preventDefault() and stopPropagation() do?<\/h3><p class=\"wp-block-paragraph\"><code>event.preventDefault()<\/code> prevents the browser&rsquo;s default action for an event when that action is cancelable.<\/p><p class=\"wp-block-paragraph\"><code>event.stopPropagation()<\/code> stops the event from continuing through the normal propagation path.<\/p><pre class=\"wp-block-code\"><code>form.addEventListener(\n  \"submit\",\n  event =&gt;  \n);<\/code><\/pre><p class=\"wp-block-paragraph\">Preventing a default action and stopping propagation are different operations.<\/p><h3 class=\"wp-block-heading\">79. What is debouncing?<\/h3><p class=\"wp-block-paragraph\"><strong>Debouncing<\/strong> delays execution until a specified period has passed without another triggering event.<\/p><p class=\"wp-block-paragraph\">It is commonly used for:<\/p><ul class=\"wp-block-list\">\n<li>search suggestions;<\/li>\n\n\n\n<li>form validation;<\/li>\n\n\n\n<li>resize handling; and<\/li>\n\n\n\n<li>reducing repeated API calls while a user is typing.<\/li>\n<\/ul><pre class=\"wp-block-code\"><code>function debounce(fn, delay)  , delay);\n  };\n}<\/code><\/pre><h3 class=\"wp-block-heading\">80. What is throttling?<\/h3><p class=\"wp-block-paragraph\"><strong>Throttling<\/strong> limits a function so it runs at most once within a specified interval, even if the triggering event occurs many times.<\/p><p class=\"wp-block-paragraph\">It is commonly used for frequent events such as scrolling, resizing or pointer movement when continuous updates are required but executing on every event would be expensive.<\/p><h3 class=\"wp-block-heading\">81. What is the difference between debouncing and throttling?<\/h3><figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Debouncing<\/th><th>Throttling<\/th><\/tr><\/thead><tbody><tr><td>Waits until repeated activity stops<\/td><td>Limits execution frequency while activity continues<\/td><\/tr><tr><td>Useful for search inputs<\/td><td>Useful for scrolling or resizing<\/td><\/tr><tr><td>May execute once after a burst of events<\/td><td>May execute repeatedly at controlled intervals<\/td><\/tr><\/tbody><\/table><\/figure><h3 class=\"wp-block-heading\">82. What is localStorage?<\/h3><p class=\"wp-block-paragraph\"><code>localStorage<\/code> is a browser storage API that stores string key-value pairs for an origin. Its data normally remains available across browser sessions until it is removed.<\/p><pre class=\"wp-block-code\"><code>localStorage.setItem(\n  \"theme\",\n  \"dark\"\n);\n\nconst theme =\n  localStorage.getItem(\"theme\");<\/code><\/pre><p class=\"wp-block-paragraph\">Values are stored as strings, so structured data is commonly serialised with <code>JSON.stringify()<\/code> and parsed with <code>JSON.parse()<\/code>.<\/p><h3 class=\"wp-block-heading\">83. What is sessionStorage?<\/h3><p class=\"wp-block-paragraph\"><code>sessionStorage<\/code> is similar to <code>localStorage<\/code>, but its data is associated with a particular browser tab or page session and is removed when that session ends.<\/p><h3 class=\"wp-block-heading\">84. What is the difference between cookies, localStorage and sessionStorage?<\/h3><figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Storage<\/th><th>Typical Behaviour<\/th><\/tr><\/thead><tbody><tr><td><strong>Cookies<\/strong><\/td><td>Small pieces of data that can be sent with HTTP requests depending on their attributes<\/td><\/tr><tr><td><strong>localStorage<\/strong><\/td><td>Origin-scoped browser storage that normally persists across sessions<\/td><\/tr><tr><td><strong>sessionStorage<\/strong><\/td><td>Origin- and tab\/session-scoped storage that lasts for the page session<\/td><\/tr><\/tbody><\/table><\/figure><p class=\"wp-block-paragraph\">Sensitive authentication data should not be stored casually in browser storage. The correct mechanism depends on the application&rsquo;s security model.<\/p><h3 class=\"wp-block-heading\">85. What is JSON?<\/h3><p class=\"wp-block-paragraph\"><strong>JSON<\/strong>, or JavaScript Object Notation, is a text-based data-interchange format used to represent structured data.<\/p><pre class=\"wp-block-code\"><code> <\/code><\/pre><p class=\"wp-block-paragraph\">Although JSON syntax resembles JavaScript object literals, JSON is a separate data format with stricter syntax rules.<\/p><h3 class=\"wp-block-heading\">86. What is the difference between JSON.parse() and JSON.stringify()?<\/h3><ul class=\"wp-block-list\">\n<li><code>JSON.parse()<\/code> converts valid JSON text into a JavaScript value.<\/li>\n\n\n\n<li><code>JSON.stringify()<\/code> converts supported JavaScript values into JSON text.<\/li>\n<\/ul><pre class=\"wp-block-code\"><code>const text =\n  ' ';\n\nconst user =\n  JSON.parse(text);\n\nconst json =\n  JSON.stringify(user);<\/code><\/pre><p class=\"wp-block-paragraph\">Not every JavaScript value has a direct JSON representation. For example, functions and Symbols are not represented as ordinary JSON values.<\/p><h3 class=\"wp-block-heading\">87. What is a Web Worker?<\/h3><p class=\"wp-block-paragraph\">A <strong>Web Worker<\/strong> allows JavaScript to run work in a separate worker context from the page&rsquo;s main execution thread.<\/p><p class=\"wp-block-paragraph\">This is useful for computationally expensive tasks that could otherwise make the interface unresponsive.<\/p><p class=\"wp-block-paragraph\">Workers communicate with the main context through message passing and do not directly manipulate the page DOM.<\/p><h3 class=\"wp-block-heading\">88. What is a Service Worker?<\/h3><p class=\"wp-block-paragraph\">A <strong>Service Worker<\/strong> is an event-driven worker that runs separately from a web page and can act as an intermediary between an application, the browser and the network.<\/p><p class=\"wp-block-paragraph\">Common uses include:<\/p><ul class=\"wp-block-list\">\n<li>offline caching;<\/li>\n\n\n\n<li>request interception;<\/li>\n\n\n\n<li>background-related web capabilities where supported; and<\/li>\n\n\n\n<li>push notifications.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Service Workers operate under specific security and lifecycle rules and are different from ordinary Web Workers.<\/p><h3 class=\"wp-block-heading\">89. What is the difference between a Web Worker and a Service Worker?<\/h3><figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Web Worker<\/th><th>Service Worker<\/th><\/tr><\/thead><tbody><tr><td>Used mainly for off-main-thread computation<\/td><td>Designed around network interception and background web capabilities<\/td><\/tr><tr><td>Generally associated with the page that creates it<\/td><td>Has its own registration and lifecycle<\/td><\/tr><tr><td>Communicates through messages<\/td><td>Responds to events such as fetch-related events<\/td><\/tr><\/tbody><\/table><\/figure><h3 class=\"wp-block-heading\">90. What are JavaScript modules?<\/h3><p class=\"wp-block-paragraph\">JavaScript modules allow code to be split into separate files with explicit imports and exports.<\/p><pre class=\"wp-block-code\"><code>\/\/ math.js\nexport function add(a, b)  \n\n\/\/ app.js\nimport   from \".\/math.js\";<\/code><\/pre><p class=\"wp-block-paragraph\">ES modules have their own module scope and support both named and default exports.<\/p><h3 class=\"wp-block-heading\">91. What is the difference between named exports and default exports?<\/h3><p class=\"wp-block-paragraph\">A module can have multiple <strong>named exports<\/strong>, while it can have at most one <strong>default export<\/strong>.<\/p><pre class=\"wp-block-code\"><code>\/\/ named\nexport const version = \"1.0\";\nexport function start()  \n\n\/\/ default\nexport default function App()  <\/code><\/pre><p class=\"wp-block-paragraph\">Named imports use the exported names, while a default import can use a local name chosen by the importing module.<\/p><h3 class=\"wp-block-heading\">92. What is dynamic import in JavaScript?<\/h3><p class=\"wp-block-paragraph\">Dynamic import uses <code>import()<\/code> to load a module asynchronously when it is needed.<\/p><pre class=\"wp-block-code\"><code>const module =\n  await import(\".\/analytics.js\");\n\nmodule.trackEvent();<\/code><\/pre><p class=\"wp-block-paragraph\">It is useful for conditional loading and code splitting because code does not always need to be loaded during the application&rsquo;s initial execution.<\/p><h3 class=\"wp-block-heading\">93. What is the global object in JavaScript?<\/h3><p class=\"wp-block-paragraph\">The global object provides access to global properties and functions for the current JavaScript environment.<\/p><p class=\"wp-block-paragraph\">Depending on the environment, older names include <code>window<\/code> in a browser window and <code>global<\/code> in Node.js. Modern JavaScript provides <code>globalThis<\/code> as a standard way to refer to the global object across environments.<\/p><pre class=\"wp-block-code\"><code>console.log(globalThis);<\/code><\/pre><h3 class=\"wp-block-heading\">94. What is strict mode in JavaScript?<\/h3><p class=\"wp-block-paragraph\">Strict mode enables a stricter set of JavaScript semantics that can turn some silent errors into exceptions and restrict certain error-prone behaviour.<\/p><pre class=\"wp-block-code\"><code>\"use strict\";\n\nfunction example()  <\/code><\/pre><p class=\"wp-block-paragraph\">ES modules and class bodies already operate under strict-mode semantics, so an explicit <code>\"use strict\"<\/code> directive is not required there.<\/p><p class=\"has-background wp-block-paragraph\" ><strong>Read Also: <a href=\"https:\/\/www.foundit.com.ph\/career-advice\/programming-interview-questions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Top 50 Programming Interview Questions and Answers<\/a><\/strong><\/p><h2 class=\"wp-block-heading\">Advanced JavaScript Interview Questions and Answers<\/h2><h3 class=\"wp-block-heading\">95. What is currying in JavaScript?<\/h3><p class=\"wp-block-paragraph\"><strong>Currying<\/strong> transforms a function that accepts multiple arguments into a sequence of functions, each receiving one argument.<\/p><pre class=\"wp-block-code\"><code>function add(a)  ;\n}\n\nconst addFive = add(5);\n\nconsole.log(addFive(3));\n\/\/ 8<\/code><\/pre><p class=\"wp-block-paragraph\">Currying can be useful when creating reusable partially configured functions.<\/p><h3 class=\"wp-block-heading\">96. What is function composition?<\/h3><p class=\"wp-block-paragraph\"><strong>Function composition<\/strong> combines functions so that the output of one becomes the input of another.<\/p><pre class=\"wp-block-code\"><code>const double = x =&gt; x * 2;\nconst addOne = x =&gt; x + 1;\n\nconst composed = x =&gt;\n  addOne(double(x));\n\nconsole.log(composed(5));\n\/\/ 11<\/code><\/pre><p class=\"wp-block-paragraph\">Composition is common in functional programming because it allows larger transformations to be built from smaller functions.<\/p><h3 class=\"wp-block-heading\">97. What is a pure function?<\/h3><p class=\"wp-block-paragraph\">A <strong>pure function<\/strong> returns the same output for the same inputs and does not cause observable side effects such as changing external state.<\/p><pre class=\"wp-block-code\"><code>function add(a, b)  <\/code><\/pre><p class=\"wp-block-paragraph\">Pure functions are easier to test and reason about because their result depends only on their inputs.<\/p><h3 class=\"wp-block-heading\">98. What is memoization?<\/h3><p class=\"wp-block-paragraph\"><strong>Memoization<\/strong> caches the result of a function call so that the result can be reused when the same input appears again.<\/p><pre class=\"wp-block-code\"><code>function memoize(fn)  \n\n    const result = fn(value);\n    cache.set(value, result);\n\n    return result;\n  };\n}<\/code><\/pre><p class=\"wp-block-paragraph\">Memoization can improve performance for expensive deterministic calculations, but the cache itself consumes memory and needs an appropriate keying strategy.<\/p><h3 class=\"wp-block-heading\">99. What is the difference between deep equality and reference equality?<\/h3><p class=\"wp-block-paragraph\">Objects are compared by reference with <code>===<\/code>, not by recursively comparing their properties.<\/p><pre class=\"wp-block-code\"><code>const a =  ;\nconst b =  ;\nconst c = a;\n\nconsole.log(a === b); \/\/ false\nconsole.log(a === c); \/\/ true<\/code><\/pre><p class=\"wp-block-paragraph\">A deep-equality comparison requires explicitly comparing nested values or using a suitable utility.<\/p><h3 class=\"wp-block-heading\">100. What are property descriptors in JavaScript?<\/h3><p class=\"wp-block-paragraph\">JavaScript object properties have descriptors that control characteristics such as whether the property can be changed, enumerated or reconfigured.<\/p><p class=\"wp-block-paragraph\">Common descriptor fields include:<\/p><ul class=\"wp-block-list\">\n<li><code>value<\/code><\/li>\n\n\n\n<li><code>writable<\/code><\/li>\n\n\n\n<li><code>enumerable<\/code><\/li>\n\n\n\n<li><code>configurable<\/code><\/li>\n\n\n\n<li><code>get<\/code><\/li>\n\n\n\n<li><code>set<\/code><\/li>\n<\/ul><pre class=\"wp-block-code\"><code>const user =  ;\n\nObject.defineProperty(\n  user,\n  \"id\",\n   \n);<\/code><\/pre><h3 class=\"wp-block-heading\">101. What are getters and setters in JavaScript?<\/h3><p class=\"wp-block-paragraph\">Getters and setters provide property-style access while running functions when a property is read or assigned.<\/p><pre class=\"wp-block-code\"><code>const user =   $ `;\n  },\n\n  set fullName(value)  \n};<\/code><\/pre><h3 class=\"wp-block-heading\">102. What is a Proxy in JavaScript?<\/h3><p class=\"wp-block-paragraph\">A <code>Proxy<\/code> wraps another object or function and allows selected fundamental operations to be intercepted through handler functions called traps.<\/p><pre class=\"wp-block-code\"><code>const user =  ;\n\nconst proxy = new Proxy(user,  `\n    );\n\n    return Reflect.get(\n      target,\n      property\n    );\n  }\n});\n\nconsole.log(proxy.name);<\/code><\/pre><p class=\"wp-block-paragraph\">Proxies can be used for validation, logging, access control and reactive programming patterns.<\/p><h3 class=\"wp-block-heading\">103. What is the Reflect API?<\/h3><p class=\"wp-block-paragraph\"><code>Reflect<\/code> provides static methods for common object operations such as reading, writing, deleting and defining properties.<\/p><pre class=\"wp-block-code\"><code>const user =  ;\n\nReflect.get(user, \"name\");\n\nReflect.set(\n  user,\n  \"age\",\n  25\n);<\/code><\/pre><p class=\"wp-block-paragraph\">Reflect methods are especially useful alongside Proxy traps because many map closely to intercepted object operations.<\/p><h2 class=\"wp-block-heading\">JavaScript Performance and Memory Interview Questions<\/h2><h3 class=\"wp-block-heading\">104. How does memory management work in JavaScript?<\/h3><p class=\"wp-block-paragraph\">JavaScript automatically manages memory. Memory is allocated when values and objects are created, and garbage collection can reclaim memory for objects that are no longer reachable.<\/p><p class=\"wp-block-paragraph\">Developers do not manually free ordinary JavaScript memory, but they can still create memory problems by retaining unnecessary references.<\/p><h3 class=\"wp-block-heading\">105. What is garbage collection in JavaScript?<\/h3><p class=\"wp-block-paragraph\"><strong>Garbage collection<\/strong> automatically identifies objects that are no longer reachable by the running program and makes their memory available for reuse.<\/p><p class=\"wp-block-paragraph\">Modern JavaScript engines use sophisticated garbage-collection strategies. At interview level, the important concept is <strong>reachability<\/strong>: an object can generally remain in memory while it is still reachable through active references.<\/p><h3 class=\"wp-block-heading\">106. What is a memory leak in JavaScript?<\/h3><p class=\"wp-block-paragraph\">A memory leak occurs when memory remains reachable even though the application no longer needs the associated data.<\/p><p class=\"wp-block-paragraph\">Common causes can include:<\/p><ul class=\"wp-block-list\">\n<li>event listeners that are never removed when necessary;<\/li>\n\n\n\n<li>timers that continue running unnecessarily;<\/li>\n\n\n\n<li>large objects retained by closures;<\/li>\n\n\n\n<li>unbounded caches;<\/li>\n\n\n\n<li>references to detached DOM nodes; and<\/li>\n\n\n\n<li>accidental long-lived global references.<\/li>\n<\/ul><h3 class=\"wp-block-heading\">107. How can closures contribute to memory leaks?<\/h3><p class=\"wp-block-paragraph\">A closure can keep variables from an outer scope reachable as long as the closure itself remains reachable.<\/p><p class=\"wp-block-paragraph\">This behaviour is normal and useful, but it can become a problem if a long-lived closure unnecessarily retains large objects that are no longer required.<\/p><pre class=\"wp-block-code\"><code>function createHandler()  ;\n}<\/code><\/pre><p class=\"wp-block-paragraph\">As long as the returned function remains reachable, the data it closes over may also remain reachable.<\/p><h3 class=\"wp-block-heading\">108. How can you improve JavaScript performance in a web application?<\/h3><p class=\"wp-block-paragraph\">The correct optimisation depends on the actual bottleneck. Common approaches include:<\/p><ul class=\"wp-block-list\">\n<li>measure performance before optimising;<\/li>\n\n\n\n<li>reduce unnecessary DOM operations;<\/li>\n\n\n\n<li>debounce or throttle high-frequency event handlers where appropriate;<\/li>\n\n\n\n<li>avoid unnecessary repeated calculations;<\/li>\n\n\n\n<li>split code so non-essential modules can load later;<\/li>\n\n\n\n<li>move suitable CPU-heavy work off the main thread with Web Workers;<\/li>\n\n\n\n<li>limit unnecessary network requests;<\/li>\n\n\n\n<li>release event listeners, timers and references when no longer needed; and<\/li>\n\n\n\n<li>use efficient data structures for the workload.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Performance optimisation should be based on profiling rather than assumptions.<\/p><h3 class=\"wp-block-heading\">109. What is lazy loading in JavaScript applications?<\/h3><p class=\"wp-block-paragraph\"><strong>Lazy loading<\/strong> delays loading a resource or module until it is actually required.<\/p><p class=\"wp-block-paragraph\">For JavaScript modules, dynamic <code>import()<\/code> can be used to load code on demand.<\/p><pre class=\"wp-block-code\"><code>button.addEventListener(\n  \"click\",\n  async () =&gt;  \n);<\/code><\/pre><p class=\"wp-block-paragraph\">This can reduce the amount of JavaScript needed during the initial page load when the deferred functionality is not immediately required.<\/p><h3 class=\"wp-block-heading\">110. What is code splitting?<\/h3><p class=\"wp-block-paragraph\"><strong>Code splitting<\/strong> breaks an application bundle into smaller chunks that can be loaded separately rather than sending all application code at once.<\/p><p class=\"wp-block-paragraph\">It is commonly combined with route-based or feature-based lazy loading in larger applications.<\/p><p class=\"has-background wp-block-paragraph\" ><strong>Read Also: <a href=\"https:\/\/www.foundit.com.ph\/career-advice\/programming-languages-to-learn-today\/\" target=\"_blank\" rel=\"noreferrer noopener\">Top Programming Languages to Learn in 2026<\/a><\/strong><\/p><h2 class=\"wp-block-heading\">JavaScript Coding and Output-Based Interview Questions<\/h2><h3 class=\"wp-block-heading\">111. How would you remove duplicate values from an array?<\/h3><p class=\"wp-block-paragraph\">For primitive values, one concise approach is to use <code>Set<\/code>.<\/p><pre class=\"wp-block-code\"><code>const numbers = [\n  1,\n  2,\n  2,\n  3,\n  3\n];\n\nconst unique = [\n  ...new Set(numbers)\n];\n\nconsole.log(unique);\n\/\/ [1, 2, 3]<\/code><\/pre><p class=\"wp-block-paragraph\">For arrays of objects, a unique key such as <code>id<\/code> usually needs to be considered explicitly.<\/p><h3 class=\"wp-block-heading\">112. How would you reverse a string in JavaScript?<\/h3><pre class=\"wp-block-code\"><code>function reverseString(value)  \n\nconsole.log(\n  reverseString(\"hello\")\n);\n\/\/ \"olleh\"<\/code><\/pre><p class=\"wp-block-paragraph\">For full Unicode correctness, string reversal can require additional care because user-perceived characters may contain multiple code points.<\/p><h3 class=\"wp-block-heading\">113. How would you check whether a string is a palindrome?<\/h3><pre class=\"wp-block-code\"><code>function isPalindrome(value)  \n\nconsole.log(\n  isPalindrome(\"level\")\n);\n\/\/ true<\/code><\/pre><p class=\"wp-block-paragraph\">In an interview, clarify whether spaces, punctuation and letter case should be ignored before writing the solution.<\/p><h3 class=\"wp-block-heading\">114. How would you flatten a nested array?<\/h3><p class=\"wp-block-paragraph\">For environments supporting <code>Array.prototype.flat()<\/code>:<\/p><pre class=\"wp-block-code\"><code>const nested = [\n  1,\n  [2, [3, 4]]\n];\n\nconst flat =\n  nested.flat(Infinity);\n\nconsole.log(flat);\n\/\/ [1, 2, 3, 4]<\/code><\/pre><p class=\"wp-block-paragraph\">An interviewer may also ask you to implement flattening manually to test recursion.<\/p><h3 class=\"wp-block-heading\">115. How would you count the frequency of values in an array?<\/h3><pre class=\"wp-block-code\"><code>function countValues(values)  ,\n     \n  );\n}\n\nconsole.log(\n  countValues([\n    \"a\",\n    \"b\",\n    \"a\"\n  ])\n);\n\/\/  <\/code><\/pre><h3 class=\"wp-block-heading\">116. What will this code output?<\/h3><pre class=\"wp-block-code\"><code>console.log(typeof null);\nconsole.log(typeof []);\nconsole.log(typeof function ()  );<\/code><\/pre><p class=\"wp-block-paragraph\">The output is:<\/p><pre class=\"wp-block-code\"><code>object\nobject\nfunction<\/code><\/pre><p class=\"wp-block-paragraph\"><code>typeof null === \"object\"<\/code> is a historical JavaScript behaviour. Arrays are objects, while functions receive the special <code>\"function\"<\/code> result from <code>typeof<\/code>.<\/p><h3 class=\"wp-block-heading\">117. What will this code output?<\/h3><pre class=\"wp-block-code\"><code>console.log(1 + \"2\");\nconsole.log(\"5\" - 2);\nconsole.log(true + 1);<\/code><\/pre><p class=\"wp-block-paragraph\">The output is:<\/p><pre class=\"wp-block-code\"><code>12\n3\n2<\/code><\/pre><p class=\"wp-block-paragraph\">The results occur because JavaScript applies different coercion rules depending on the operator.<\/p><h3 class=\"wp-block-heading\">118. What will this closure code output?<\/h3><pre class=\"wp-block-code\"><code>function counter()  \n\nconst first = counter();\nconst second = counter();\n\nconsole.log(first());\nconsole.log(first());\nconsole.log(second());<\/code><\/pre><p class=\"wp-block-paragraph\">The output is:<\/p><pre class=\"wp-block-code\"><code>1\n2\n1<\/code><\/pre><p class=\"wp-block-paragraph\">Each call to <code>counter()<\/code> creates a separate lexical environment, so <code>first<\/code> and <code>second<\/code> maintain independent values.<\/p><h3 class=\"wp-block-heading\">119. What is wrong with using var inside this loop?<\/h3><pre class=\"wp-block-code\"><code>for (var i = 0; i &lt; 3; i++)  , 0);\n}<\/code><\/pre><p class=\"wp-block-paragraph\">The callbacks output:<\/p><pre class=\"wp-block-code\"><code>3\n3\n3<\/code><\/pre><p class=\"wp-block-paragraph\"><code>var<\/code> is function-scoped, so all callbacks close over the same <code>i<\/code> binding. By the time the callbacks execute, the loop has completed and <code>i<\/code> is 3.<\/p><p class=\"wp-block-paragraph\">Using <code>let<\/code> creates a new binding for each loop iteration:<\/p><pre class=\"wp-block-code\"><code>for (let i = 0; i &lt; 3; i++)  , 0);\n}\n\n\/\/ 0\n\/\/ 1\n\/\/ 2<\/code><\/pre><h3 class=\"wp-block-heading\">120. What will this Promise code output?<\/h3><pre class=\"wp-block-code\"><code>console.log(\"start\");\n\nPromise.resolve()\n  .then(() =&gt;  );\n\nsetTimeout(() =&gt;  , 0);\n\nconsole.log(\"end\");<\/code><\/pre><p class=\"wp-block-paragraph\">The output is:<\/p><pre class=\"wp-block-code\"><code>start\nend\npromise\ntimer<\/code><\/pre><p class=\"wp-block-paragraph\">Synchronous code runs first, the Promise reaction runs as a microtask, and the timer callback runs in a later task.<\/p><div style=\"text-align: center;\">\n<a font-size: 18px;border-radius: 4px;font-weight: bold;\" href=\"https:\/\/www.foundit.com.ph\/search\/java-jobs\" target=\"_blank\">Apply for Java Jobs<\/a>\n<\/div><h2 class=\"wp-block-heading\">How to Prepare for a JavaScript Interview<\/h2><p class=\"wp-block-paragraph\">JavaScript interviews usually combine concept questions with code reading and short implementation problems. Preparation should therefore include both theory and hands-on practice.<\/p><h3 class=\"wp-block-heading\">1. Revise JavaScript Fundamentals<\/h3><p class=\"wp-block-paragraph\">Be clear on the following concepts:<\/p><ul class=\"wp-block-list\">\n<li>Primitive and reference values<\/li>\n\n\n\n<li><code>var<\/code>, <code>let<\/code> and <code>const<\/code><\/li>\n\n\n\n<li>Scope and lexical scope<\/li>\n\n\n\n<li>Hoisting and the Temporal Dead Zone<\/li>\n\n\n\n<li><code>==<\/code> vs <code>===<\/code><\/li>\n\n\n\n<li>Type coercion<\/li>\n\n\n\n<li><code>null<\/code>, <code>undefined<\/code> and <code>NaN<\/code><\/li>\n\n\n\n<li>Functions and callbacks<\/li>\n<\/ul><h3 class=\"wp-block-heading\">2. Practise Closures, this and Prototypes<\/h3><p class=\"wp-block-paragraph\">These concepts are frequently used to test whether you understand how JavaScript behaves beyond basic syntax.<\/p><ul class=\"wp-block-list\">\n<li>How closures retain access to their lexical scope<\/li>\n\n\n\n<li>How the value of <code>this<\/code> depends on how a function is called<\/li>\n\n\n\n<li>How arrow functions handle <code>this<\/code><\/li>\n\n\n\n<li>How <code>call()<\/code>, <code>apply()<\/code> and <code>bind()<\/code> work<\/li>\n\n\n\n<li>How prototype chaining and JavaScript classes are related<\/li>\n<\/ul><h3 class=\"wp-block-heading\">3. Understand the JavaScript Event Loop<\/h3><p class=\"wp-block-paragraph\">Understand how the <strong>call stack, browser APIs, tasks, microtasks and event loop<\/strong> work together when JavaScript handles asynchronous operations.<\/p><p class=\"wp-block-paragraph\">Practise output-based questions involving:<\/p><ul class=\"wp-block-list\">\n<li><code>setTimeout()<\/code><\/li>\n\n\n\n<li>Promises<\/li>\n\n\n\n<li><code>queueMicrotask()<\/code><\/li>\n\n\n\n<li><code>async\/await<\/code><\/li>\n\n\n\n<li>Synchronous statements mixed with asynchronous callbacks<\/li>\n<\/ul><h3 class=\"wp-block-heading\">4. Practise Array and Object Methods<\/h3><p class=\"wp-block-paragraph\">You should be comfortable working with commonly used array and object operations, including:<\/p><ul class=\"wp-block-list\">\n<li><code>map()<\/code><\/li>\n\n\n\n<li><code>filter()<\/code><\/li>\n\n\n\n<li><code>reduce()<\/code><\/li>\n\n\n\n<li><code>find()<\/code> and <code>findIndex()<\/code><\/li>\n\n\n\n<li><code>some()<\/code> and <code>every()<\/code><\/li>\n\n\n\n<li>Destructuring<\/li>\n\n\n\n<li>Spread and rest syntax<\/li>\n\n\n\n<li>Set and Map<\/li>\n\n\n\n<li>Shallow and deep copying<\/li>\n<\/ul><h3 class=\"wp-block-heading\">5. Prepare DOM and Browser Questions<\/h3><p class=\"wp-block-paragraph\">For frontend JavaScript roles, revise DOM selection and manipulation, event propagation, event delegation, browser storage, Fetch API, Service Workers, Web Workers and JavaScript modules.<\/p><p class=\"wp-block-paragraph\">Also understand the distinction between the JavaScript language itself and APIs provided by the browser environment.<\/p><h3 class=\"wp-block-heading\">6. Practise JavaScript Coding Questions<\/h3><p class=\"wp-block-paragraph\">Common JavaScript coding interview problems include:<\/p><ul class=\"wp-block-list\">\n<li>Reversing a string<\/li>\n\n\n\n<li>Checking whether a string is a palindrome<\/li>\n\n\n\n<li>Removing duplicate values from an array<\/li>\n\n\n\n<li>Flattening nested arrays<\/li>\n\n\n\n<li>Counting the frequency of values<\/li>\n\n\n\n<li>Implementing debounce or throttle<\/li>\n\n\n\n<li>Grouping array values<\/li>\n\n\n\n<li>Writing a simple memoization function<\/li>\n\n\n\n<li>Handling Promise-based asynchronous operations<\/li>\n<\/ul><p class=\"wp-block-paragraph\">While solving a coding question, explain the expected input, output, edge cases and the reasoning behind your solution.<\/p><h3 class=\"wp-block-heading\">7. Practise Output-Based JavaScript Questions<\/h3><p class=\"wp-block-paragraph\">Output-based questions test whether you understand JavaScript execution behaviour instead of only remembering definitions.<\/p><p class=\"wp-block-paragraph\">Pay particular attention to:<\/p><ul class=\"wp-block-list\">\n<li>Scope and closures<\/li>\n\n\n\n<li>Type coercion<\/li>\n\n\n\n<li>The <code>this<\/code> keyword<\/li>\n\n\n\n<li><code>var<\/code> vs <code>let<\/code> inside loops<\/li>\n\n\n\n<li>Promise and timer execution order<\/li>\n\n\n\n<li>Object references<\/li>\n<\/ul><h3 class=\"wp-block-heading\">8. Review the Job Description<\/h3><p class=\"wp-block-paragraph\">The depth of JavaScript knowledge expected depends on the role. A frontend developer interview may focus more on DOM behaviour, browser APIs, events and performance, while a Node.js role may place greater emphasis on asynchronous execution, modules, APIs and server-side JavaScript.<\/p><p class=\"wp-block-paragraph\">If the job description mentions React, Angular, Vue or Node.js, prepare questions related to that framework or runtime separately in addition to JavaScript fundamentals.<\/p><h2 class=\"wp-block-heading\">Conclusion<\/h2><p class=\"wp-block-paragraph\">JavaScript interview preparation should focus on understanding how the language behaves rather than memorising syntax. Start with <strong>scope, closures, functions, objects, prototypes and type coercion<\/strong>, then move to <strong>Promises, async\/await, the event loop, DOM events and modern JavaScript features<\/strong>.<\/p><p class=\"wp-block-paragraph\">For experienced roles, also prepare performance, memory management, browser APIs and coding-based questions. When answering an output question, explain why JavaScript produces the result rather than stating only the final output.<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript remains one of the most versatile and in-demand programming languages in . Whether you are a fresher or a professional developer, mastering JavaScript is crucial for career advancement.Interviews for JavaScript roles often cover a wide range of questions, from basic concepts to advanced problem-solving.This guide covers 100+ JavaScript interview questions and answers for , &hellip; <a href=\"https:\/\/www.foundit.com.ph\/career-advice\/javascript-interview-questions-and-answers\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">120+ JavaScript Interview Questions and Answers for 2026<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":11262,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[147],"tags":[],"class_list":["post-11169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-interview-questions"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.foundit.com.ph\/career-advice\/wp-json\/wp\/v2\/posts\/11169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.foundit.com.ph\/career-advice\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.foundit.com.ph\/career-advice\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.foundit.com.ph\/career-advice\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.foundit.com.ph\/career-advice\/wp-json\/wp\/v2\/comments?post=11169"}],"version-history":[{"count":6,"href":"https:\/\/www.foundit.com.ph\/career-advice\/wp-json\/wp\/v2\/posts\/11169\/revisions"}],"predecessor-version":[{"id":54510,"href":"https:\/\/www.foundit.com.ph\/career-advice\/wp-json\/wp\/v2\/posts\/11169\/revisions\/54510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.foundit.com.ph\/career-advice\/wp-json\/wp\/v2\/media\/11262"}],"wp:attachment":[{"href":"https:\/\/www.foundit.com.ph\/career-advice\/wp-json\/wp\/v2\/media?parent=11169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.foundit.com.ph\/career-advice\/wp-json\/wp\/v2\/categories?post=11169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.foundit.com.ph\/career-advice\/wp-json\/wp\/v2\/tags?post=11169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}