[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74043":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":23,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":15,"starSnapshotCount":15,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},74043,"top-javascript-interview-questions","greatfrontend\u002Ftop-javascript-interview-questions","greatfrontend","Top JavaScript interview questions and answers for Frontend Engineers (updated for 2026)","https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fjavascript-interview-questions\u002Fquiz?gnrs=github",null,"MDX",9605,505,20,0,10,43,137,30,111.11,false,"main",true,[25,26,27,28,29,30,31],"front-end-development","interviews","javascript","javascript-interview-questions","react","reactjs","web-development","2026-06-12 04:01:12","# Top JavaScript Interview Questions (Updated for 2025)\n\n**Updated for 2025!** This repository contains a few hundred curated JavaScript interview questions with high quality answers for acing your Front End Engineer interviews, brought to you by [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com\u002F?utm_source=github&utm_medium=referral&utm_campaign=top-reactjs-qns&gnrs=yangshun).\n\nThe questions are divided into two sections:\n\n1. [**Top questions**](#table-of-contents-top-questions): List of the most important JavaScript interview questions that are commonly-asked during Front End Developer interviews. This README displays the concise version of the answers and links are provided to the full version of answers for further learning. If you are are short on time, start with this section.\n2. [**All questions**](#table-of-contents-all-questions): Comprehensive and elaborate list of JavaScript interview questions that ranges from basic to advanced topics. The answers in this section are more concise. This section is useful if you rusty with JavaScript concepts and need a refresher.\n3. [**Questions by difficulty**](#questions-by-difficulty): Questions categorized by difficulty – basic, intermediate, advanced.\n\n---\n\n\u003Cdiv>\n  \u003Cp align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fjavascript-interview-questions?utm_source=github&utm_medium=referral&utm_campaign=top-js-qns&gnrs=yangshun\">\n      \u003Cimg src=\".\u002Fimages\u002Fgreatfrontend-js-banner4x.png\" alt=\"GreatFrontEnd JavaScript Interview Questions\" width=\"100%\">\n    \u003C\u002Fa>\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n\n> Black Friday 2025 sale going on now, enjoy the largest discount of the year! [Get 30% off GreatFrontEnd Premium →](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fjavascript-interview-questions?utm_source=github&utm_medium=referral&utm_campaign=top-js-qns&gnrs=yangshun) 💡\n\n---\n\n## Table of Contents (Top Questions)\n\nThis list contains the top essential questions that are frequently-asked during Front End Engineer interviews. Concise versions of the answers are presented here with links to elaborate versions for further reading. This section is great if you need a quick refresher of the most important concepts.\n\n\u003C!-- TABLE_OF_CONTENTS:TOP:START -->\n\n| No. | Questions | Level |\n| --- | :-- | :-- |\n| 1 | [Explain the concept of \"hoisting\" in JavaScript](#explain-the-concept-of-hoisting-in-javascript) | Basic |\n| 2 | [What are the differences between JavaScript variables created using `let`, `var` or `const`?](#what-are-the-differences-between-javascript-variables-created-using-let-var-or-const) | Basic |\n| 3 | [What is the difference between `==` and `===` in JavaScript?](#what-is-the-difference-between--and--in-javascript) | Basic |\n| 4 | [What is the event loop in JavaScript runtimes?](#what-is-the-event-loop-in-javascript-runtimes) | Basic |\n| 5 | [Explain event delegation in JavaScript](#explain-event-delegation-in-javascript) | Basic |\n| 6 | [Explain how `this` works in JavaScript](#explain-how-this-works-in-javascript) | Basic |\n| 7 | [Describe the difference between a cookie, `sessionStorage` and `localStorage` in browsers](#describe-the-difference-between-a-cookie-sessionstorage-and-localstorage-in-browsers) | Basic |\n| 8 | [Describe the difference between `\u003Cscript>`, `\u003Cscript async>` and `\u003Cscript defer>`](#describe-the-difference-between-script-script-async-and-script-defer) | Basic |\n| 9 | [What's the difference between a JavaScript variable that is: `null`, `undefined` or undeclared?](#whats-the-difference-between-a-javascript-variable-that-is-null-undefined-or-undeclared) | Basic |\n| 10 | [What's the difference between `.call` and `.apply` in JavaScript?](#whats-the-difference-between-call-and-apply-in-javascript) | Basic |\n| 11 | [Explain `Function.prototype.bind` in JavaScript](#explain-functionprototypebind-in-javascript) | Basic |\n| 12 | [What advantage is there for using the JavaScript arrow syntax for a method in a constructor?](#what-advantage-is-there-for-using-the-javascript-arrow-syntax-for-a-method-in-a-constructor) | Basic |\n| 13 | [Explain how prototypal inheritance works in JavaScript](#explain-how-prototypal-inheritance-works-in-javascript) | Basic |\n| 14 | [Difference between: `function Person(){}`, `const person = Person()`, and `const person = new Person()` in JavaScript?](#difference-between-function-person-const-person--person-and-const-person--new-person-in-javascript) | Basic |\n| 15 | [Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}` in JavaScript](#explain-the-differences-on-the-usage-of-foo-between-function-foo--and-var-foo--function--in-javascript) | Basic |\n| 16 | [What's a typical use case for anonymous functions in JavaScript?](#whats-a-typical-use-case-for-anonymous-functions-in-javascript) | Intermediate |\n| 17 | [What are the various ways to create objects in JavaScript?](#what-are-the-various-ways-to-create-objects-in-javascript) | Basic |\n| 18 | [What is a closure in JavaScript, and how\u002Fwhy would you use one?](#what-is-a-closure-in-javascript-and-howwhy-would-you-use-one) | Intermediate |\n| 19 | [What is the definition of a higher-order function in JavaScript?](#what-is-the-definition-of-a-higher-order-function-in-javascript) | Basic |\n| 20 | [What are the differences between JavaScript ES2015 classes and ES5 function constructors?](#what-are-the-differences-between-javascript-es2015-classes-and-es5-function-constructors) | Basic |\n| 21 | [Describe event bubbling in JavaScript and browsers](#describe-event-bubbling-in-javascript-and-browsers) | Basic |\n| 22 | [Describe event capturing in JavaScript and browsers](#describe-event-capturing-in-javascript-and-browsers) | Basic |\n| 23 | [What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?](#what-is-the-difference-between-mouseenter-and-mouseover-event-in-javascript-and-browsers) | Basic |\n| 24 | [What is `'use strict';` (strict mode) in JavaScript for?](#what-is-use-strict-strict-mode-in-javascript-for) | Advanced |\n| 25 | [Explain the difference between synchronous and asynchronous functions in JavaScript](#explain-the-difference-between-synchronous-and-asynchronous-functions-in-javascript) | Basic |\n| 26 | [What are the pros and cons of using Promises instead of callbacks in JavaScript?](#what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks-in-javascript) | Intermediate |\n| 27 | [Explain AJAX in as much detail as possible](#explain-ajax-in-as-much-detail-as-possible) | Basic |\n| 28 | [What are the advantages and disadvantages of using AJAX?](#what-are-the-advantages-and-disadvantages-of-using-ajax) | Basic |\n| 29 | [What are the differences between `XMLHttpRequest` and `fetch()` in JavaScript and browsers?](#what-are-the-differences-between-xmlhttprequest-and-fetch-in-javascript-and-browsers) | Basic |\n| 30 | [How do you abort a web request using `AbortController` in JavaScript?](#how-do-you-abort-a-web-request-using-abortcontroller-in-javascript) | Intermediate |\n| 31 | [What are JavaScript polyfills for?](#what-are-javascript-polyfills-for) | Advanced |\n| 32 | [Why is extending built-in JavaScript objects not a good idea?](#why-is-extending-built-in-javascript-objects-not-a-good-idea) | Intermediate |\n| 33 | [Why is it, in general, a good idea to leave the global JavaScript scope of a website as-is and never touch it?](#why-is-it-in-general-a-good-idea-to-leave-the-global-javascript-scope-of-a-website-as-is-and-never-touch-it) | Intermediate |\n| 34 | [Explain the differences between CommonJS modules and ES modules in JavaScript](#explain-the-differences-between-commonjs-modules-and-es-modules-in-javascript) | Intermediate |\n| 35 | [What are the various data types in JavaScript?](#what-are-the-various-data-types-in-javascript) | Basic |\n| 36 | [What language constructs do you use for iterating over object properties and array items in JavaScript?](#what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items-in-javascript) | Basic |\n| 37 | [What are the benefits of using spread syntax in JavaScript and how is it different from rest syntax?](#what-are-the-benefits-of-using-spread-syntax-in-javascript-and-how-is-it-different-from-rest-syntax) | Basic |\n| 38 | [What are iterators and generators in JavaScript and what are they used for?](#what-are-iterators-and-generators-in-javascript-and-what-are-they-used-for) | Advanced |\n| 39 | [Explain the difference between mutable and immutable objects in JavaScript](#explain-the-difference-between-mutable-and-immutable-objects-in-javascript) | Intermediate |\n| 40 | [What is the difference between a `Map` object and a plain object in JavaScript?](#what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript) | Basic |\n| 41 | [What are the differences between `Map`\u002F`Set` and `WeakMap`\u002F`WeakSet` in JavaScript?](#what-are-the-differences-between-mapset-and-weakmapweakset-in-javascript) | Basic |\n| 42 | [Why might you want to create static class members in JavaScript?](#why-might-you-want-to-create-static-class-members-in-javascript) | Intermediate |\n| 43 | [What are `Symbol`s used for in JavaScript?](#what-are-symbols-used-for-in-javascript) | Intermediate |\n| 44 | [What are server-sent events?](#what-are-server-sent-events) | Advanced |\n| 45 | [What are JavaScript object property flags and descriptors?](#what-are-javascript-object-property-flags-and-descriptors) | Advanced |\n| 46 | [What are JavaScript object getters and setters for?](#what-are-javascript-object-getters-and-setters-for) | Intermediate |\n| 47 | [What are proxies in JavaScript used for?](#what-are-proxies-in-javascript-used-for) | Advanced |\n| 48 | [What tools and techniques do you use for debugging JavaScript code?](#what-tools-and-techniques-do-you-use-for-debugging-javascript-code) | Intermediate |\n| 49 | [What are workers in JavaScript used for?](#what-are-workers-in-javascript-used-for) | Advanced |\n| 50 | [How does JavaScript garbage collection work?](#how-does-javascript-garbage-collection-work) | Advanced |\n\n\u003C!-- TABLE_OF_CONTENTS:TOP:END -->\n\n## Table of Contents (All Questions)\n\nThis list contains a longer list of important JavaScript questions. Not all of them will be asked during Front End Engineer interviews but they provide a well-rounded review of JavaScript concepts ranging from beginner to advanced topics.\n\n\u003C!-- TABLE_OF_CONTENTS:ALL:START -->\n\n| No. | Questions | Level |\n| --- | :-- | :-- |\n| 1 | [What are the various data types in JavaScript?](#what-are-the-various-data-types-in-javascript) | Basic |\n| 2 | [How do you check the data type of a variable?](#how-do-you-check-the-data-type-of-a-variable) | Basic |\n| 3 | [What's the difference between a JavaScript variable that is: `null`, `undefined` or undeclared?](#whats-the-difference-between-a-javascript-variable-that-is-null-undefined-or-undeclared) | Basic |\n| 4 | [What are the differences between JavaScript variables created using `let`, `var` or `const`?](#what-are-the-differences-between-javascript-variables-created-using-let-var-or-const) | Basic |\n| 5 | [Why is it, in general, a good idea to leave the global JavaScript scope of a website as-is and never touch it?](#why-is-it-in-general-a-good-idea-to-leave-the-global-javascript-scope-of-a-website-as-is-and-never-touch-it) | Intermediate |\n| 6 | [How do you convert a string to a number in JavaScript?](#how-do-you-convert-a-string-to-a-number-in-javascript) | Basic |\n| 7 | [What are template literals and how are they used?](#what-are-template-literals-and-how-are-they-used) | Basic |\n| 8 | [Explain the concept of tagged templates](#explain-the-concept-of-tagged-templates) | Intermediate |\n| 9 | [What is the spread operator and how is it used?](#what-is-the-spread-operator-and-how-is-it-used) | Basic |\n| 10 | [What are `Symbol`s used for in JavaScript?](#what-are-symbols-used-for-in-javascript) | Intermediate |\n| 11 | [What are proxies in JavaScript used for?](#what-are-proxies-in-javascript-used-for) | Advanced |\n| 12 | [Explain the concept of \"hoisting\" in JavaScript](#explain-the-concept-of-hoisting-in-javascript) | Basic |\n| 13 | [Explain the difference in hoisting between `var`, `let`, and `const`](#explain-the-difference-in-hoisting-between-var-let-and-const) | Basic |\n| 14 | [How does hoisting affect function declarations and expressions?](#how-does-hoisting-affect-function-declarations-and-expressions) | Advanced |\n| 15 | [What are the potential issues caused by hoisting?](#what-are-the-potential-issues-caused-by-hoisting) | Intermediate |\n| 16 | [How can you avoid problems related to hoisting?](#how-can-you-avoid-problems-related-to-hoisting) | Basic |\n| 17 | [What is the difference between `==` and `===` in JavaScript?](#what-is-the-difference-between--and--in-javascript) | Basic |\n| 18 | [What language constructs do you use for iterating over object properties and array items in JavaScript?](#what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items-in-javascript) | Basic |\n| 19 | [What is the purpose of the `break` and `continue` statements?](#what-is-the-purpose-of-the-break-and-continue-statements) | Basic |\n| 20 | [What is the ternary operator and how is it used?](#what-is-the-ternary-operator-and-how-is-it-used) | Basic |\n| 21 | [How do you access the index of an element in an array during iteration?](#how-do-you-access-the-index-of-an-element-in-an-array-during-iteration) | Basic |\n| 22 | [What is the purpose of the `switch` statement?](#what-is-the-purpose-of-the-switch-statement) | Basic |\n| 23 | [What are rest parameters and how are they used?](#what-are-rest-parameters-and-how-are-they-used) | Basic |\n| 24 | [Explain the concept of the spread operator and its uses](#explain-the-concept-of-the-spread-operator-and-its-uses) | Basic |\n| 25 | [What are the benefits of using spread syntax in JavaScript and how is it different from rest syntax?](#what-are-the-benefits-of-using-spread-syntax-in-javascript-and-how-is-it-different-from-rest-syntax) | Basic |\n| 26 | [What are iterators and generators in JavaScript and what are they used for?](#what-are-iterators-and-generators-in-javascript-and-what-are-they-used-for) | Advanced |\n| 27 | [Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}` in JavaScript](#explain-the-differences-on-the-usage-of-foo-between-function-foo--and-var-foo--function--in-javascript) | Basic |\n| 28 | [What is the difference between a parameter and an argument?](#what-is-the-difference-between-a-parameter-and-an-argument) | Basic |\n| 29 | [Explain the concept of hoisting with regards to functions](#explain-the-concept-of-hoisting-with-regards-to-functions) | Basic |\n| 30 | [What's the difference between `.call` and `.apply` in JavaScript?](#whats-the-difference-between-call-and-apply-in-javascript) | Basic |\n| 31 | [Can you offer a use case for the new arrow => function syntax?](#can-you-offer-a-use-case-for-the-new-arrow--function-syntax) | Basic |\n| 32 | [Difference between: `function Person(){}`, `const person = Person()`, and `const person = new Person()` in JavaScript?](#difference-between-function-person-const-person--person-and-const-person--new-person-in-javascript) | Basic |\n| 33 | [What is the definition of a higher-order function in JavaScript?](#what-is-the-definition-of-a-higher-order-function-in-javascript) | Basic |\n| 34 | [What are callback functions and how are they used?](#what-are-callback-functions-and-how-are-they-used) | Basic |\n| 35 | [What's a typical use case for anonymous functions in JavaScript?](#whats-a-typical-use-case-for-anonymous-functions-in-javascript) | Intermediate |\n| 36 | [What is recursion and how is it used in JavaScript?](#what-is-recursion-and-how-is-it-used-in-javascript) | Basic |\n| 37 | [What are default parameters and how are they used?](#what-are-default-parameters-and-how-are-they-used) | Basic |\n| 38 | [Explain why the following doesn't work as an IIFE: `function foo(){}();`. What needs to be changed to properly make it an IIFE?](#explain-why-the-following-doesnt-work-as-an-iife-function-foo-what-needs-to-be-changed-to-properly-make-it-an-iife) | Advanced |\n| 39 | [What are the various ways to create objects in JavaScript?](#what-are-the-various-ways-to-create-objects-in-javascript) | Basic |\n| 40 | [Explain the difference between dot notation and bracket notation for accessing object properties](#explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties) | Basic |\n| 41 | [What are the different methods for iterating over an array?](#what-are-the-different-methods-for-iterating-over-an-array) | Basic |\n| 42 | [How do you add, remove, and update elements in an array?](#how-do-you-add-remove-and-update-elements-in-an-array) | Basic |\n| 43 | [What are the different ways to copy an object or an array?](#what-are-the-different-ways-to-copy-an-object-or-an-array) | Basic |\n| 44 | [Explain the difference between shallow copy and deep copy](#explain-the-difference-between-shallow-copy-and-deep-copy) | Basic |\n| 45 | [What are the advantages of using the spread operator with arrays and objects?](#what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects) | Basic |\n| 46 | [How do you check if an object has a specific property?](#how-do-you-check-if-an-object-has-a-specific-property) | Basic |\n| 47 | [Explain the difference between mutable and immutable objects in JavaScript](#explain-the-difference-between-mutable-and-immutable-objects-in-javascript) | Intermediate |\n| 48 | [Explain the concept of destructuring assignment for objects and arrays](#explain-the-concept-of-destructuring-assignment-for-objects-and-arrays) | Basic |\n| 49 | [What is `Object.freeze()` for?](#what-is-objectfreeze-for) | Intermediate |\n| 50 | [What is `Object.seal()` for?](#what-is-objectseal-for) | Intermediate |\n| 51 | [What is `Object.preventExtensions()` for?](#what-is-objectpreventextensions-for) | Intermediate |\n| 52 | [What are JavaScript object getters and setters for?](#what-are-javascript-object-getters-and-setters-for) | Intermediate |\n| 53 | [What are JavaScript object property flags and descriptors?](#what-are-javascript-object-property-flags-and-descriptors) | Advanced |\n| 54 | [How do you reliably determine whether an object is empty?](#how-do-you-reliably-determine-whether-an-object-is-empty) | Basic |\n| 55 | [What is the event loop in JavaScript runtimes?](#what-is-the-event-loop-in-javascript-runtimes) | Basic |\n| 56 | [Explain the difference between synchronous and asynchronous functions in JavaScript](#explain-the-difference-between-synchronous-and-asynchronous-functions-in-javascript) | Basic |\n| 57 | [Explain the concept of a callback function in asynchronous operations](#explain-the-concept-of-a-callback-function-in-asynchronous-operations) | Basic |\n| 58 | [What are Promises and how do they work?](#what-are-promises-and-how-do-they-work) | Basic |\n| 59 | [Explain the different states of a Promise](#explain-the-different-states-of-a-promise) | Intermediate |\n| 60 | [What are the pros and cons of using Promises instead of callbacks in JavaScript?](#what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks-in-javascript) | Intermediate |\n| 61 | [What is the use of `Promise.all()`](#what-is-the-use-of-promiseall) | Basic |\n| 62 | [How is `Promise.all()` different from `Promise.allSettled()`?](#how-is-promiseall-different-from-promiseallsettled) | Intermediate |\n| 63 | [What is async\u002Fawait and how does it simplify asynchronous code?](#what-is-asyncawait-and-how-does-it-simplify-asynchronous-code) | Intermediate |\n| 64 | [How do you handle errors in asynchronous operations?](#how-do-you-handle-errors-in-asynchronous-operations) | Basic |\n| 65 | [Explain the concept of a microtask queue](#explain-the-concept-of-a-microtask-queue) | Intermediate |\n| 66 | [What is the difference between `setTimeout()`, `setImmediate()`, and `process.nextTick()`?](#what-is-the-difference-between-settimeout-setimmediate-and-processnexttick) | Intermediate |\n| 67 | [Explain how prototypal inheritance works in JavaScript](#explain-how-prototypal-inheritance-works-in-javascript) | Basic |\n| 68 | [What is the prototype chain and how does it work?](#what-is-the-prototype-chain-and-how-does-it-work) | Intermediate |\n| 69 | [Explain the difference between classical inheritance and prototypal inheritance](#explain-the-difference-between-classical-inheritance-and-prototypal-inheritance) | Basic |\n| 70 | [Explain the concept of inheritance in ES2015 classes](#explain-the-concept-of-inheritance-in-es2015-classes) | Basic |\n| 71 | [What is the purpose of the `new` keyword?](#what-is-the-purpose-of-the-new-keyword) | Basic |\n| 72 | [How do you create a constructor function?](#how-do-you-create-a-constructor-function) | Basic |\n| 73 | [What are the differences between JavaScript ES2015 classes and ES5 function constructors?](#what-are-the-differences-between-javascript-es2015-classes-and-es5-function-constructors) | Basic |\n| 74 | [What advantage is there for using the JavaScript arrow syntax for a method in a constructor?](#what-advantage-is-there-for-using-the-javascript-arrow-syntax-for-a-method-in-a-constructor) | Basic |\n| 75 | [Why might you want to create static class members in JavaScript?](#why-might-you-want-to-create-static-class-members-in-javascript) | Intermediate |\n| 76 | [What is a closure in JavaScript, and how\u002Fwhy would you use one?](#what-is-a-closure-in-javascript-and-howwhy-would-you-use-one) | Intermediate |\n| 77 | [Explain the concept of lexical scoping](#explain-the-concept-of-lexical-scoping) | Basic |\n| 78 | [Explain the concept of scope in JavaScript](#explain-the-concept-of-scope-in-javascript) | Basic |\n| 79 | [How can closures be used to create private variables?](#how-can-closures-be-used-to-create-private-variables) | Basic |\n| 80 | [What are the potential pitfalls of using closures?](#what-are-the-potential-pitfalls-of-using-closures) | Intermediate |\n| 81 | [Explain the difference between global scope, function scope, and block scope](#explain-the-difference-between-global-scope-function-scope-and-block-scope) | Basic |\n| 82 | [Explain how `this` works in JavaScript](#explain-how-this-works-in-javascript) | Basic |\n| 83 | [Explain `Function.prototype.bind` in JavaScript](#explain-functionprototypebind-in-javascript) | Basic |\n| 84 | [Explain the different ways the `this` keyword can be bound](#explain-the-different-ways-the-this-keyword-can-be-bound) | Intermediate |\n| 85 | [What are the common pitfalls of using the `this` keyword?](#what-are-the-common-pitfalls-of-using-the-this-keyword) | Basic |\n| 86 | [Explain the concept of `this` binding in event handlers](#explain-the-concept-of-this-binding-in-event-handlers) | Basic |\n| 87 | [What is the DOM and how is it structured?](#what-is-the-dom-and-how-is-it-structured) | Basic |\n| 88 | [What's the difference between an \"attribute\" and a \"property\" in the DOM?](#whats-the-difference-between-an-attribute-and-a-property-in-the-dom) | Intermediate |\n| 89 | [Explain the difference between `document.querySelector()` and `document.getElementById()`](#explain-the-difference-between-documentqueryselector-and-documentgetelementbyid) | Basic |\n| 90 | [How do you add, remove, and modify HTML elements using JavaScript?](#how-do-you-add-remove-and-modify-html-elements-using-javascript) | Basic |\n| 91 | [What are event listeners and how are they used?](#what-are-event-listeners-and-how-are-they-used) | Basic |\n| 92 | [Explain the event phases in a browser](#explain-the-event-phases-in-a-browser) | Intermediate |\n| 93 | [Describe event bubbling in JavaScript and browsers](#describe-event-bubbling-in-javascript-and-browsers) | Basic |\n| 94 | [Describe event capturing in JavaScript and browsers](#describe-event-capturing-in-javascript-and-browsers) | Basic |\n| 95 | [Explain event delegation in JavaScript](#explain-event-delegation-in-javascript) | Basic |\n| 96 | [How do you prevent the default behavior of an event?](#how-do-you-prevent-the-default-behavior-of-an-event) | Basic |\n| 97 | [What is the difference between `event.preventDefault()` and `event.stopPropagation()`?](#what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation) | Intermediate |\n| 98 | [What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?](#what-is-the-difference-between-mouseenter-and-mouseover-event-in-javascript-and-browsers) | Basic |\n| 99 | [What is the difference between `innerHTML` and `textContent`?](#what-is-the-difference-between-innerhtml-and-textcontent) | Intermediate |\n| 100 | [How do you manipulate CSS styles using JavaScript?](#how-do-you-manipulate-css-styles-using-javascript) | Basic |\n| 101 | [Describe the difference between `\u003Cscript>`, `\u003Cscript async>` and `\u003Cscript defer>`](#describe-the-difference-between-script-script-async-and-script-defer) | Basic |\n| 102 | [What is the difference between the Window object and the Document object?](#what-is-the-difference-between-the-window-object-and-the-document-object) | Intermediate |\n| 103 | [Describe the difference between a cookie, `sessionStorage` and `localStorage` in browsers](#describe-the-difference-between-a-cookie-sessionstorage-and-localstorage-in-browsers) | Basic |\n| 104 | [How do you make an HTTP request using the Fetch API?](#how-do-you-make-an-http-request-using-the-fetch-api) | Basic |\n| 105 | [What are the different ways to make an API call in JavaScript?](#what-are-the-different-ways-to-make-an-api-call-in-javascript) | Basic |\n| 106 | [Explain AJAX in as much detail as possible](#explain-ajax-in-as-much-detail-as-possible) | Basic |\n| 107 | [What are the advantages and disadvantages of using AJAX?](#what-are-the-advantages-and-disadvantages-of-using-ajax) | Basic |\n| 108 | [What are the differences between `XMLHttpRequest` and `fetch()` in JavaScript and browsers?](#what-are-the-differences-between-xmlhttprequest-and-fetch-in-javascript-and-browsers) | Basic |\n| 109 | [How do you abort a web request using `AbortController` in JavaScript?](#how-do-you-abort-a-web-request-using-abortcontroller-in-javascript) | Intermediate |\n| 110 | [Explain how JSONP works (and how it's not really Ajax)](#explain-how-jsonp-works-and-how-its-not-really-ajax) | Intermediate |\n| 111 | [What are workers in JavaScript used for?](#what-are-workers-in-javascript-used-for) | Advanced |\n| 112 | [Explain the concept of the Web Socket API](#explain-the-concept-of-the-web-socket-api) | Intermediate |\n| 113 | [What are JavaScript polyfills for?](#what-are-javascript-polyfills-for) | Advanced |\n| 114 | [How do you detect if JavaScript is disabled on a page?](#how-do-you-detect-if-javascript-is-disabled-on-a-page) | Intermediate |\n| 115 | [What is the `Intl` namespace object for?](#what-is-the-intl-namespace-object-for) | Intermediate |\n| 116 | [How do you validate form elements using the Constraint Validation API?](#how-do-you-validate-form-elements-using-the-constraint-validation-api) | Advanced |\n| 117 | [How do you use `window.history` API?](#how-do-you-use-windowhistory-api) | Basic |\n| 118 | [How do `\u003Ciframe>` on a page communicate?](#how-do-iframe-on-a-page-communicate) | Intermediate |\n| 119 | [Difference between document `load` event and document `DOMContentLoaded` event?](#difference-between-document-load-event-and-document-domcontentloaded-event) | Intermediate |\n| 120 | [How do you redirect to a new page in JavaScript?](#how-do-you-redirect-to-a-new-page-in-javascript) | Basic |\n| 121 | [How do you get the query string values of the current page in JavaScript?](#how-do-you-get-the-query-string-values-of-the-current-page-in-javascript) | Basic |\n| 122 | [What are server-sent events?](#what-are-server-sent-events) | Advanced |\n| 123 | [What are Progressive Web Applications (PWAs)?](#what-are-progressive-web-applications-pwas) | Intermediate |\n| 124 | [What are modules and why are they useful?](#what-are-modules-and-why-are-they-useful) | Basic |\n| 125 | [Explain the differences between CommonJS modules and ES modules in JavaScript](#explain-the-differences-between-commonjs-modules-and-es-modules-in-javascript) | Intermediate |\n| 126 | [How do you import and export modules in JavaScript?](#how-do-you-import-and-export-modules-in-javascript) | Basic |\n| 127 | [What are the benefits of using a module bundler?](#what-are-the-benefits-of-using-a-module-bundler) | Intermediate |\n| 128 | [Explain the concept of tree shaking in module bundling](#explain-the-concept-of-tree-shaking-in-module-bundling) | Intermediate |\n| 129 | [What are the metadata fields of a module?](#what-are-the-metadata-fields-of-a-module) | Intermediate |\n| 130 | [What do you think of CommonJS vs ESM?](#what-do-you-think-of-commonjs-vs-esm) | Basic |\n| 131 | [What are the different types of errors in JavaScript?](#what-are-the-different-types-of-errors-in-javascript) | Intermediate |\n| 132 | [How do you handle errors using `try...catch` blocks?](#how-do-you-handle-errors-using-trycatch-blocks) | Basic |\n| 133 | [What is the purpose of the `finally` block?](#what-is-the-purpose-of-the-finally-block) | Basic |\n| 134 | [How can you create custom error objects?](#how-can-you-create-custom-error-objects) | Intermediate |\n| 135 | [Explain the concept of error propagation in JavaScript](#explain-the-concept-of-error-propagation-in-javascript) | Intermediate |\n| 136 | [What is currying and how does it work?](#what-is-currying-and-how-does-it-work) | Intermediate |\n| 137 | [Explain the concept of partial application](#explain-the-concept-of-partial-application) | Intermediate |\n| 138 | [What are the benefits of using currying and partial application?](#what-are-the-benefits-of-using-currying-and-partial-application) | Intermediate |\n| 139 | [Provide some examples of how currying and partial application can be used](#provide-some-examples-of-how-currying-and-partial-application-can-be-used) | Basic |\n| 140 | [How do currying and partial application differ from each other?](#how-do-currying-and-partial-application-differ-from-each-other) | Intermediate |\n| 141 | [What are `Set`s and `Map`s and how are they used?](#what-are-sets-and-maps-and-how-are-they-used) | Basic |\n| 142 | [What are the differences between `Map`\u002F`Set` and `WeakMap`\u002F`WeakSet` in JavaScript?](#what-are-the-differences-between-mapset-and-weakmapweakset-in-javascript) | Basic |\n| 143 | [How do you convert a `Set` to an array in JavaScript?](#how-do-you-convert-a-set-to-an-array-in-javascript) | Basic |\n| 144 | [What is the difference between a `Map` object and a plain object in JavaScript?](#what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript) | Basic |\n| 145 | [How do `Set`s and `Map`s handle equality checks for objects?](#how-do-sets-and-maps-handle-equality-checks-for-objects) | Basic |\n| 146 | [What are some common performance bottlenecks in JavaScript applications?](#what-are-some-common-performance-bottlenecks-in-javascript-applications) | Intermediate |\n| 147 | [Explain the concept of debouncing and throttling](#explain-the-concept-of-debouncing-and-throttling) | Basic |\n| 148 | [How can you optimize DOM manipulation for better performance?](#how-can-you-optimize-dom-manipulation-for-better-performance) | Advanced |\n| 149 | [What are some techniques for reducing reflows and repaints?](#what-are-some-techniques-for-reducing-reflows-and-repaints) | Advanced |\n| 150 | [Explain the concept of lazy loading and how it can improve performance](#explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance) | Basic |\n| 151 | [What are Web Workers and how can they be used to improve performance?](#what-are-web-workers-and-how-can-they-be-used-to-improve-performance) | Advanced |\n| 152 | [Explain the concept of caching and how it can be used to improve performance](#explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance) | Basic |\n| 153 | [What are some tools that can be used to measure and analyze JavaScript performance?](#what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance) | Advanced |\n| 154 | [How can you optimize network requests for better performance?](#how-can-you-optimize-network-requests-for-better-performance) | Advanced |\n| 155 | [What are the different types of testing in software development?](#what-are-the-different-types-of-testing-in-software-development) | Intermediate |\n| 156 | [Explain the difference between unit testing, integration testing, and end-to-end testing](#explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing) | Intermediate |\n| 157 | [What are some popular JavaScript testing frameworks?](#what-are-some-popular-javascript-testing-frameworks) | Basic |\n| 158 | [How do you write unit tests for JavaScript code?](#how-do-you-write-unit-tests-for-javascript-code) | Intermediate |\n| 159 | [Explain the concept of test-driven development (TDD)](#explain-the-concept-of-test-driven-development-tdd) | Intermediate |\n| 160 | [What are mocks and stubs and how are they used in testing?](#what-are-mocks-and-stubs-and-how-are-they-used-in-testing) | Advanced |\n| 161 | [How can you test asynchronous code in JavaScript?](#how-can-you-test-asynchronous-code-in-javascript) | Intermediate |\n| 162 | [What are some best practices for writing maintainable and effective tests in JavaScript?](#what-are-some-best-practices-for-writing-maintainable-and-effective-tests-in-javascript) | Intermediate |\n| 163 | [Explain the concept of code coverage and how it can be used to assess test quality](#explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality) | Intermediate |\n| 164 | [What are some tools that can be used for JavaScript testing?](#what-are-some-tools-that-can-be-used-for-javascript-testing) | Basic |\n| 165 | [What are design patterns and why are they useful?](#what-are-design-patterns-and-why-are-they-useful) | Basic |\n| 166 | [Explain the concept of the Singleton pattern](#explain-the-concept-of-the-singleton-pattern) | Basic |\n| 167 | [What is the Factory pattern and how is it used?](#what-is-the-factory-pattern-and-how-is-it-used) | Intermediate |\n| 168 | [Explain the Observer pattern and its use cases](#explain-the-observer-pattern-and-its-use-cases) | Intermediate |\n| 169 | [What is the Module pattern and how does it help with encapsulation?](#what-is-the-module-pattern-and-how-does-it-help-with-encapsulation) | Intermediate |\n| 170 | [Explain the concept of the Prototype pattern](#explain-the-concept-of-the-prototype-pattern) | Basic |\n| 171 | [What is the Decorator pattern and how is it used?](#what-is-the-decorator-pattern-and-how-is-it-used) | Intermediate |\n| 172 | [Explain the concept of the Strategy pattern](#explain-the-concept-of-the-strategy-pattern) | Intermediate |\n| 173 | [What is the Command pattern and how is it used?](#what-is-the-command-pattern-and-how-is-it-used) | Intermediate |\n| 174 | [Why is extending built-in JavaScript objects not a good idea?](#why-is-extending-built-in-javascript-objects-not-a-good-idea) | Intermediate |\n| 175 | [What is Cross-Site Scripting (XSS) and how can you prevent it?](#what-is-cross-site-scripting-xss-and-how-can-you-prevent-it) | Intermediate |\n| 176 | [Explain the concept of Cross-Site Request Forgery (CSRF) and its mitigation techniques](#explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques) | Intermediate |\n| 177 | [How can you prevent SQL injection vulnerabilities in JavaScript applications?](#how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications) | Intermediate |\n| 178 | [What are some best practices for handling sensitive data in JavaScript?](#what-are-some-best-practices-for-handling-sensitive-data-in-javascript) | Intermediate |\n| 179 | [Explain the concept of Content Security Policy (CSP) and how it enhances security](#explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security) | Intermediate |\n| 180 | [What are some common security headers and their purpose?](#what-are-some-common-security-headers-and-their-purpose) | Intermediate |\n| 181 | [How can you prevent clickjacking attacks?](#how-can-you-prevent-clickjacking-attacks) | Advanced |\n| 182 | [Explain the concept of input validation and its importance in security](#explain-the-concept-of-input-validation-and-its-importance-in-security) | Intermediate |\n| 183 | [What are some tools and techniques for identifying security vulnerabilities in JavaScript code?](#what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code) | Intermediate |\n| 184 | [How can you implement secure authentication and authorization in JavaScript applications?](#how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications) | Advanced |\n| 185 | [Explain the same-origin policy with regards to JavaScript](#explain-the-same-origin-policy-with-regards-to-javascript) | Intermediate |\n| 186 | [What is `'use strict';` (strict mode) in JavaScript for?](#what-is-use-strict-strict-mode-in-javascript-for) | Advanced |\n| 187 | [What tools and techniques do you use for debugging JavaScript code?](#what-tools-and-techniques-do-you-use-for-debugging-javascript-code) | Intermediate |\n| 188 | [How does JavaScript garbage collection work?](#how-does-javascript-garbage-collection-work) | Advanced |\n| 189 | [Explain what a single page app is and how to make one SEO-friendly](#explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly) | Intermediate |\n| 190 | [How can you share code between JavaScript files?](#how-can-you-share-code-between-javascript-files) | Basic |\n| 191 | [How do you organize your code?](#how-do-you-organize-your-code) | Intermediate |\n| 192 | [What are some of the advantages and disadvantages of using TypeScript and compile-to-JavaScript languages](#what-are-some-of-the-advantages-and-disadvantages-of-using-typescript-and-compile-to-javascript-languages) | Advanced |\n| 193 | [When would you use `document.write()`?](#when-would-you-use-documentwrite) | Advanced |\n\n\u003C!-- TABLE_OF_CONTENTS:ALL:END -->\n\n## Top Questions with Answers\n\n\u003C!-- QUESTIONS:TOP:START -->\n\n### Explain the concept of \"hoisting\" in JavaScript\n\n\u003C!-- Update here: \u002Fquestions\u002Fexplain-hoisting\u002Fen-US.mdx -->\n\nHoisting is a JavaScript mechanism where variable and function declarations are moved (\"hoisted\") to the top of their containing scope during the compile phase.\n\n- **Variable declarations (`var`)**: Declarations are hoisted, but not initializations. The value of the variable is `undefined` if accessed before initialization.\n- **Variable declarations (`let` and `const`)**: Declarations are hoisted, but not initialized. Accessing them results in `ReferenceError` until the actual declaration is encountered.\n- **Function expressions (`var`)**: Declarations are hoisted, but not initializations. The value of the variable is `undefined` if accessed before initialization.\n- **Function declarations (`function`)**: Both declaration and definition are fully hoisted.\n- **Class declarations (`class`)**: Declarations are hoisted, but not initialized. Accessing them results in `ReferenceError` until the actual declaration is encountered.\n- **Import declarations (`import`)**: Declarations are hoisted, and side effects of importing the module are executed before the rest of the code.\n\nThe following behavior summarizes the result of accessing the variables before they are declared.\n\n| Declaration                    | Accessing before declaration |\n| ------------------------------ | ---------------------------- |\n| `var foo`                      | `undefined`                  |\n| `let foo`                      | `ReferenceError`             |\n| `const foo`                    | `ReferenceError`             |\n| `class Foo`                    | `ReferenceError`             |\n| `var foo = function() { ... }` | `undefined`                  |\n| `function foo() { ... }`       | Normal                       |\n| `import`                       | Normal                       |\n\n\u003C!-- Update here: \u002Fquestions\u002Fexplain-hoisting\u002Fen-US.mdx -->\n\n\u003Cbr>\n    \n> Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fexplain-hoisting?language=js&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n[Back to top ↑](#table-of-contents-top-questions)   \u002F   [✏️ Edit answer](https:\u002F\u002Fgithub.com\u002Fyangshun\u002Ftop-javascript-interview-questions\u002Fedit\u002Fmain\u002Fquestions\u002Fexplain-hoisting\u002Fen-US.mdx)\n\n\u003Cbr>\n\n### What are the differences between JavaScript variables created using `let`, `var` or `const`?\n\n\u003C!-- Update here: \u002Fquestions\u002Fwhat-are-the-differences-between-variables-created-using-let-var-or-const\u002Fen-US.mdx -->\n\nIn JavaScript, `let`, `var`, and `const` are all keywords used to declare variables, but they differ significantly in terms of scope, initialization rules, whether they can be redeclared or reassigned, and the behavior when they are accessed before declaration:\n\n| Behavior | `var` | `let` | `const` |\n| --- | --- | --- | --- |\n| Scope | Function or Global | Block | Block |\n| Initialization | Optional | Optional | Required |\n| Redeclaration | Yes | No | No |\n| Reassignment | Yes | Yes | No |\n| Accessing before declaration | `undefined` | `ReferenceError` | `ReferenceError` |\n\n\u003C!-- Update here: \u002Fquestions\u002Fwhat-are-the-differences-between-variables-created-using-let-var-or-const\u002Fen-US.mdx -->\n\n\u003Cbr>\n    \n> Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-are-the-differences-between-variables-created-using-let-var-or-const?language=js&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n[Back to top ↑](#table-of-contents-top-questions)   \u002F   [✏️ Edit answer](https:\u002F\u002Fgithub.com\u002Fyangshun\u002Ftop-javascript-interview-questions\u002Fedit\u002Fmain\u002Fquestions\u002Fwhat-are-the-differences-between-variables-created-using-let-var-or-const\u002Fen-US.mdx)\n\n\u003Cbr>\n\n### What is the difference between `==` and `===` in JavaScript?\n\n\u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-difference-between-double-equal-and-triple-equal\u002Fen-US.mdx -->\n\n`==` is the abstract equality operator while `===` is the strict equality operator. `==` performs type coercion before comparing, following the Abstract Equality Comparison algorithm defined in the ECMAScript specification. `===` does not perform coercion and returns `false` whenever the operand types differ. `===` is generally preferred in application code because it eliminates a class of bugs caused by unexpected coercion. The most common exception is `x == null`, which checks for both `null` and `undefined` in a single comparison.\n\n| Operator | `==` | `===` |\n| --- | --- | --- |\n| Name | Loose (abstract) equality operator | Strict equality operator |\n| Type coercion | Yes — per the Abstract Equality Comparison algorithm | No |\n| Comparison behavior | Types may be coerced before the value comparison | Types are compared first |\n\n> **Don't confuse `=` with `==` and `===`.** `=` is the [assignment operator](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FOperators\u002FAssignment) — it sets a variable's value (`x = 5`) and does not compare anything.\n\n\u003C!-- Update here: \u002Fquestions\u002Fwhat-is-the-difference-between-double-equal-and-triple-equal\u002Fen-US.mdx -->\n\n\u003Cbr>\n    \n> Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-the-difference-between-double-equal-and-triple-equal?language=js&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n[Back to top ↑](#table-of-contents-top-questions)   \u002F   [✏️ Edit answer](https:\u002F\u002Fgithub.com\u002Fyangshun\u002Ftop-javascript-interview-questions\u002Fedit\u002Fmain\u002Fquestions\u002Fwhat-is-the-difference-between-double-equal-and-triple-equal\u002Fen-US.mdx)\n\n\u003Cbr>\n\n### What is the event loop in JavaScript runtimes?\n\n\u003C!-- Update here: \u002Fquestions\u002Fwhat-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue\u002Fen-US.mdx -->\n\nThe event loop is a concept within the JavaScript runtime environment regarding how asynchronous operations are executed within JavaScript engines. It works as such:\n\n1. The JavaScript engine starts executing scripts, placing synchronous operations on the call stack.\n2. When an asynchronous operation is encountered (e.g., `setTimeout()`, HTTP request), it is offloaded to the respective Web API or Node.js API to handle the operation in the background.\n3. Once the asynchronous operation completes, its callback function is placed in the respective queues – task queues (also known as macrotask queues \u002F callback queues) or microtask queues. We will refer to \"task queue\" as \"macrotask queue\" from here on to better differentiate from the microtask queue.\n4. The event loop continuously monitors the call stack and executes items on the call stack. If\u002Fwhen the call stack is empty:\n   1. Microtask queue is processed. Microtasks include promise callbacks (`then`, `catch`, `finally`), `await` continuations, `MutationObserver` callbacks, and calls to `queueMicrotask()`. The event loop takes the first callback from the microtask queue and pushes it to the call stack for execution. This repeats until the microtask queue is empty.\n   2. Macrotask queue is processed. Macrotasks include web APIs like `setTimeout()`, HTTP requests, user interface event handlers like clicks, scrolls, etc. The event loop dequeues the first callback from the macrotask queue and pushes it onto the call stack for execution. However, after a macrotask queue callback is processed, the event loop does not proceed with the next macrotask yet! The event loop first checks the microtask queue. Checking the microtask queue is necessary as microtasks have higher priority than macrotask queue callbacks. The macrotask queue callback that was just executed could have added more microtasks!\n      1. If the microtask queue is non-empty, process them as per the previous step.\n      2. If the microtask queue is empty, the next macrotask queue callback is processed. This repeats until the macrotask queue is empty.\n5. This process continues indefinitely, allowing the JavaScript engine to handle both synchronous and asynchronous operations efficiently without blocking the call stack.\n\n\u003C!-- Update here: \u002Fquestions\u002Fwhat-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue\u002Fen-US.mdx -->\n\n\u003Cbr>\n    \n> Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue?language=js&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n[Back to top ↑](#table-of-contents-top-questions)   \u002F   [✏️ Edit answer](https:\u002F\u002Fgithub.com\u002Fyangshun\u002Ftop-javascript-interview-questions\u002Fedit\u002Fmain\u002Fquestions\u002Fwhat-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue\u002Fen-US.mdx)\n\n\u003Cbr>\n\n### Explain event delegation in JavaScript\n\n\u003C!-- Update here: \u002Fquestions\u002Fexplain-event-delegation\u002Fen-US.mdx -->\n\nEvent delegation is a technique in JavaScript where a single event listener is attached to a parent element instead of attaching event listeners to multiple child elements. When an event occurs on a child element, the event bubbles up the DOM tree, and the parent element's event listener handles the event based on the target element.\n\nEvent delegation provides the following benefits:\n\n- **Improved performance**: Attaching a single event listener is more efficient than attaching multiple event listeners to individual elements, especially for large or dynamic lists. This reduces memory usage and improves overall performance.\n- **Simplified event handling**: With event delegation, you only need to write the event handling logic once in the parent element's event listener. This makes the code more maintainable and easier to update.\n- **Dynamic element support**: Event delegation automatically handles events for dynamically added or removed elements within the parent element. There's no need to manually attach or remove event listeners when the DOM structure changes.\n\nHowever, do note that:\n\n- It is important to identify the target element that triggered the event.\n- Not all events can be delegated because they are not bubbled. Non-bubbling events include: `focus`, `blur`, `scroll`, `mouseenter`, `mouseleave`, `resize`, etc.\n\n\u003C!-- Update here: \u002Fquestions\u002Fexplain-event-delegation\u002Fen-US.mdx -->\n\n\u003Cbr>\n    \n> Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fexplain-event-delegation?language=js&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n[Back to top ↑](#table-of-contents-top-questions)   \u002F   [✏️ Edit answer](https:\u002F\u002Fgithub.com\u002Fyangshun\u002Ftop-javascript-interview-questions\u002Fedit\u002Fmain\u002Fquestions\u002Fexplain-event-delegation\u002Fen-US.mdx)\n\n\u003Cbr>\n\n### Explain how `this` works in JavaScript\n\n\u003C!-- Update here: \u002Fquestions\u002Fexplain-how-this-works-in-javascript\u002Fen-US.mdx -->\n\nThere's no simple explanation for `this`; it is one of the most confusing concepts in JavaScript because its behavior differs from many other programming languages. The one-liner explanation of the `this` keyword is that it is a dynamic reference to the context in which a function is executed.\n\nA longer explanation is that `this` follows these rules:\n\n1. If the `new` keyword is used when calling the function, meaning the function was used as a function constructor, the `this` inside the function is the newly-created object instance.\n2. If `this` is used in a `class` `constructor`, the `this` inside the `constructor` is the newly-created object instance.\n3. If `apply()`, `call()`, or `bind()` is used to call\u002Fcreate a function, `this` inside the function is the object that is passed in as the argument.\n4. If a function is called as a method (e.g. `obj.method()`) — `this` is the object that the function is a property of.\n5. If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, `this` is the global object. In the browser, the global object is the `window` object. If in strict mode (`'use strict';`), `this` will be `undefined` instead of the global object.\n6. If multiple of the above rules apply, the rule that is higher wins and will set the `this` value.\n7. If the function is an ES2015 arrow function, it ignores all the rules above and receives the `this` value of its surrounding scope at the time it is created.\n\nFor an in-depth explanation, do check out [Arnav Aggrawal's article on Medium](https:\u002F\u002Fcodeburst.io\u002Fthe-simple-rules-to-this-in-javascript-35d97f31bde3).\n\n\u003C!-- Update here: \u002Fquestions\u002Fexplain-how-this-works-in-javascript\u002Fen-US.mdx -->\n\n\u003Cbr>\n    \n> Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fexplain-how-this-works-in-javascript?language=js&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n[Back to top ↑](#table-of-contents-top-questions)   \u002F   [✏️ Edit answer](https:\u002F\u002Fgithub.com\u002Fyangshun\u002Ftop-javascript-interview-questions\u002Fedit\u002Fmain\u002Fquestions\u002Fexplain-how-this-works-in-javascript\u002Fen-US.mdx)\n\n\u003Cbr>\n\n### Describe the difference between a cookie, `sessionStorage` and `localStorage` in browsers\n\n\u003C!-- Update here: \u002Fquestions\u002Fdescribe-the-difference-between-a-cookie-sessionstorage-and-localstorage\u002Fen-US.mdx -->\n\nAll of the following are mechanisms of storing data on the client, the user's browser in this case. `localStorage` and `sessionStorage` both implement the [Web Storage API interface](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FWeb_Storage_API).\n\n- **Cookies**: Suitable for server-client communication, small storage capacity, can be persistent or session-based, domain-specific. Sent to the server on every request.\n- **`localStorage`**: Suitable for long-term storage, data persists even after the browser is closed, accessible across all tabs and windows of the same origin, highest storage capacity among the three.\n- **`sessionStorage`**: Suitable for temporary data within a single page session, data is cleared when the tab or window is closed, has a higher storage capacity compared to cookies.\n\nHere's a table summarizing the 3 client storage mechanisms.\n\n| Property | Cookie | `localStorage` | `sessionStorage` |\n| --- | --- | --- | --- |\n| Initiator | Client or server. Server can use `Set-Cookie` header | Client | Client |\n| Lifespan | As specified | Until deleted | Until tab is closed |\n| Persistent across browser sessions | If a future expiry date is set | Yes | No |\n| Sent to server with every HTTP request | Yes, sent via `Cookie` header | No | No |\n| Total capacity (per domain) | 4kb | 5MB | 5MB |\n| Access | Across windows\u002Ftabs | Across windows\u002Ftabs | Same tab |\n| Security | JavaScript cannot access `HttpOnly` cookies | None | None |\n\n\u003C!-- Update here: \u002Fquestions\u002Fdescribe-the-difference-between-a-cookie-sessionstorage-and-localstorage\u002Fen-US.mdx -->\n\n\u003Cbr>\n    \n> Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fdescribe-the-difference-between-a-cookie-sessionstorage-and-localstorage?language=js&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n[Back to top ↑](#table-of-contents-top-questions)   \u002F   [✏️ Edit answer](https:\u002F\u002Fgithub.com\u002Fyangshun\u002Ftop-javascript-interview-questions\u002Fedit\u002Fmain\u002Fquestions\u002Fdescribe-the-difference-between-a-cookie-sessionstorage-and-localstorage\u002Fen-US.mdx)\n\n\u003Cbr>\n\n### Describe the difference between `\u003Cscript>`, `\u003Cscript async>` and `\u003Cscript defer>`\n\n\u003C!-- Update here: \u002Fquestions\u002Fdescribe-the-difference-between-script-async-and-script-defer\u002Fen-US.mdx -->\n\nAll of these ways (`\u003Cscript>`, `\u003Cscript async>`, and `\u003Cscript defer>`) are used to load and execute JavaScript files in an HTML document, but they differ in how the browser handles loading and execution of the script:\n\n- `\u003Cscript>` is the default way of including JavaScript. The browser blocks HTML parsing while the script is being downloaded and executed. The browser will not continue rendering the page until the script has finished executing.\n- `\u003Cscript async>` downloads the script asynchronously, in parallel with parsing the HTML. Executes the script as soon as it is available, potentially interrupting the HTML parsing. Multiple `\u003Cscript async>` tags do not wait for each other and execute in no particular order.\n- `\u003Cscript defer>` downloads the script asynchronously, in parallel with parsing the HTML. However, the execution of the script is deferred until HTML parsing is complete, in the order they appear in the HTML.\n\nHere's a table summarizing the 4 ways of loading `\u003Cscript>`s in an HTML document. Modern apps almost always use modules, which deserve their own row.\n\n| Feature | `\u003Cscript>` | `\u003Cscript async>` | `\u003Cscript defer>` | `\u003Cscript type=\"module\">` |\n| --- | --- | --- | --- | --- |\n| Parsing behavior | Blocks HTML parsing | Downloads in parallel; execution still blocks parsing | Downloads in parallel; execution deferred until after parsing | Downloads in parallel; execution deferred until after parsing |\n| Execution order | In order of appearance | Not guaranteed | In order of appearance | In order of appearance, with each script's `import` dependencies resolved first |\n| DOM dependency | No | No | Yes (waits for DOM) | Yes (waits for DOM) |\n\n\u003C!-- Update here: \u002Fquestions\u002Fdescribe-the-difference-between-script-async-and-script-defer\u002Fen-US.mdx -->\n\n\u003Cbr>\n    \n> Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fdescribe-the-difference-between-script-async-and-script-defer?language=js&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n[Back to top ↑](#table-of-contents-top-questions)   \u002F   [✏️ Edit answer](https:\u002F\u002Fgithub.com\u002Fyangshun\u002Ftop-javascript-interview-questions\u002Fedit\u002Fmain\u002Fquestions\u002Fdescribe-the-difference-between-script-async-and-script-defer\u002Fen-US.mdx)\n\n\u003Cbr>\n\n### What's the difference between a JavaScript variable that is: `null`, `undefined` or undeclared?\n\n\u003C!-- Update here: \u002Fquestions\u002Fwhats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states\u002Fen-US.mdx -->\n\n| Trait | `null` | `undefined` | Undeclared |\n| --- | --- | --- | --- |\n| Meaning | Explicitly set by the developer to indicate that a variable has no value | Variable has been declared but not assigned a value | Variable has not been declared at all |\n| Type (via `typeof` operator) | `'object'` | `'undefined'` | `'undefined'` |\n| Equality Comparison | `null == undefined` is `true` | `undefined == null` is `true` | Throws a `ReferenceError` |\n\n\u003C!-- Update here: \u002Fquestions\u002Fwhats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states\u002Fen-US.mdx -->\n\n\u003Cbr>\n    \n> Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states?language=js&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n[Back to top ↑](#table-of-contents-top-questions)   \u002F   [✏️ Edit answer](https:\u002F\u002Fgithub.com\u002Fyangshun\u002Ftop-javascript-interview-questions\u002Fedit\u002Fmain\u002Fquestions\u002Fwhats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states\u002Fen-US.mdx)\n\n\u003Cbr>\n\n### What's the difference between `.call` and `.apply` in JavaScript?\n\n\u003C!-- Update here: \u002Fquestions\u002Fwhats-the-difference-between-call-and-apply\u002Fen-US.mdx -->\n\n`.call` and `.apply` are both used to invoke functions with a specific `this` context and arguments. The primary difference lies in how they accept arguments:\n\n- `.call(thisArg, arg1, arg2, ...)`: Takes arguments individually.\n- `.apply(thisArg, [argsArray])`: Takes arguments as an array.\n\nAssuming we have a function `add`, the function can be invoked using `.call` and `.apply` in the following manner:\n\n```js live\nfunction add(a, b) {\n  return a + b;\n}\n\nconsole.log(add.call(null, 1, 2)); \u002F\u002F 3\nconsole.log(add.apply(null, [1, 2])); \u002F\u002F 3\n```\n\n\u003C!-- Update here: \u002Fquestions\u002Fwhats-the-difference-between-call-and-apply\u002Fen-US.mdx -->\n\n\u003Cbr>\n    \n> Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhats-the-difference-between-call-and-apply?language=js&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n[Back to top ↑](#table-of-contents-top-questions)   \u002F   [✏️ Edit answer](https:\u002F\u002Fgithub.com\u002Fyangshun\u002Ftop-javascript-interview-questions\u002Fedit\u002Fmain\u002Fquestions\u002Fwhats-the-difference-between-call-and-apply\u002Fen-US.mdx)\n\n\u003Cbr>\n\n### Explain `Function.prototype.bind` in JavaScript\n\n\u003C!-- Update here: \u002Fquestions\u002Fexplain-function-prototype-bind\u002Fen-US.mdx -->\n\n`Function.prototype.bind` is a method in JavaScript that allows you to create a new function with a specific `this` value and optional initial arguments. Its primary purpose is to:\n\n- **Binding `this` value to preserve context**: The primary purpose of `bind` is to bind the `this` value of a function to a specific object. When you call `func.bind(thisArg)`, it creates a new function with the same body as `func`, but with `this` permanently bound to `thisArg`.\n- **Partial application of arguments**: `bind` also allows you to pre-specify arguments for the new function. Any arguments passed to `bind` after `thisArg` will be prepended to the arguments list when the new function is called.\n- **Method borrowing**: `bind` allows you to borrow methods from one object and apply them to another object, even if they were not originally designed to work with that object.\n\nThe `bind` method is particularly useful in scenarios where you need to ensure that a function is called with a specific `this` context, such as in event handlers, callbacks, or method borrowing.\n\n\u003C!-- Update here: \u002Fquestions\u002Fexplain-function-prototype-bind\u002Fen-US.mdx -->\n\n\u003Cbr>\n    \n> Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fexplain-function-prototype-bind?language=js&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n[Back to top ↑](#table-of-contents-top-questions)   \u002F   [✏️ Edit answer](https:\u002F\u002Fgithub.com\u002Fyangshun\u002Ftop-javascript-interview-questions\u002Fedit\u002Fmain\u002Fquestions\u002Fexplain-function-prototype-bind\u002Fen-US.mdx)\n\n\u003Cbr>\n\n### What advantage is there for using the JavaScript arrow syntax for a method in a constructor?\n\n\u003C!-- Update here: \u002Fquestions\u002Fwhat-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor\u002Fen-US.mdx -->\n\nThe main advantage of using an arrow function as a method inside a constructor is that the value of `this` gets set at the time of the function creation and can't change after that. When the constructor is used to create a new object, `this` will always refer to that object.\n\nFor example, let's say we have a `Person` constructor that takes a first name as an argument and has two methods to `console.log()` that name, one as a regular function and one as an arrow function:\n\n```js live\nconst Person = function (name) {\n  this.firstName = name;\n  this.sayName1 = function () {\n    console.log(this.firstName);\n  };\n  this.sayName2 = () => {\n    console.log(this.firstName);\n  };\n};\n\nconst john = new Person('John');\nconst dave = new Person('Dave');\n\njohn.sayName1(); \u002F\u002F John\njohn.sayName2(); \u002F\u002F John\n\n\u002F\u002F The regular function can have its `this` value changed, but the arrow function cannot\njohn.sayName1.call(dave); \u002F\u002F Dave (because `this` is now the dave object)\njohn.sayName2.call(dave); \u002F\u002F John\n\njohn.sayName1.apply(dave); \u002F\u002F Dave (because `this` is now the dave object)\njohn.sayName2.apply(dave); \u002F\u002F John\n\njohn.sayName1.bind(dave)(); \u002F\u002F Dave (because `this` is now the dave object)\njohn.sayName2.bind(dave)(); \u002F\u002F John\n\nconst sayNameFromWindow1 = john.sayName1;\nsayNameFromWindow1(); \u002F\u002F undefined (because `this` is now the window object)\n\nconst sayNameFromWindow2 = john.sayName2;\nsayNameFromWindow2(); \u002F\u002F John\n```\n\nThe main takeaway here is that `this` can be changed for a normal function, but `this` always stays the same for an arrow function. So even if you are passing around your arrow function to different parts of your application, you wouldn't have to worry about the value of `this` changing.\n\n\u003C!-- Update here: \u002Fquestions\u002Fwhat-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor\u002Fen-US.mdx -->\n\n\u003Cbr>\n    \n> Read the [detailed answer](https:\u002F\u002Fwww.greatfrontend.com\u002Fquestions\u002Fquiz\u002Fwhat-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor?language=js&tab=quiz) on [GreatFrontEnd](https:\u002F\u002Fwww.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.\n\n[Back to top ↑](#table-of-contents-top-questions)   \u002F   [✏️ Edit answer](https:\u002F\u002Fgithub.com\u002Fyangshun\u002Ftop-javascript-interview-questions\u002Fedit\u002Fmain\u002Fquestions\u002Fwhat-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor\u002Fen-US.mdx)\n\n\u003Cbr>\n\n### Explain how prototypal inheritance works in JavaScript\n\n\u003C!-- Update here: \u002Fquestions\u002Fexplain-how-prototypal-inheritance-works\u002Fen-US.mdx -->\n\nPrototypical inheritance in JavaScript is a way for objects to inherit properties and methods from other objects. Every JavaScript object has a special hidden property called `[[Prototype]]` (commonly accessed via `__proto__` or using `Object.getPrototypeOf()`) that is a reference to another object, which is called the object's \"prototype\".\n\nWhen a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object's `__proto__`, and the `__proto__`'s `__proto__` and so on, until it finds the property defined on one of the `__proto__`s or until it reaches the end of the prototype chain.\n\nThis behavior simulates classical inheritance, but it is really more of [delegation than inheritance](https:\u002F\u002Fdavidwalsh.name\u002Fjavascript-objects).\n\nHere's an example of prototypal inheritance:\n\n```js live\n\u002F\u002F Parent object constructor.\nfunction Animal(name) {\n  this.name = name;\n}\n\n\u002F\u002F Add a method to the parent object's prototype.\nAnimal.prototype.makeSound = function () {\n  console.log('The ' + this.constructor.name + ' makes a sound.');\n};\n\n\u002F\u002F Child object constructor.\nfunction Dog(name) {\n  Animal.call(this, name); \u002F\u002F Call the parent constructor.\n}\n\n\u002F\u002F Set the child object's prototype to be the parent's prototype.\nObject.setPrototypeOf(Dog.prototype, Animal.prototype);","该项目是一个为前端工程师准备的JavaScript面试题集，涵盖了从基础到高级的多个知识点。它包含了数百个精选的面试问题及其高质量答案，旨在帮助开发者在前端工程师面试中脱颖而出。项目使用MDX语言编写，内容分为顶级问题、全部问题和按难度分类的问题三部分，每部分都提供了详细解答链接以供深入学习。适合正在准备前端开发岗位面试的技术人员，尤其是希望快速复习重要概念或全面了解JavaScript相关知识的人士。",2,"2026-06-11 03:48:33","high_star"]