[
{
"path": ".github/workflows/gen-toc.yml",
"content": "name: Generate table of contents\n\non:\n pull_request:\n push:\n branches:\n - main\n\njobs:\n gen-toc:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout code\n uses: actions/checkout@v3\n with:\n ref: ${{ github.head_ref }}\n - name: Install pnpm\n uses: pnpm/action-setup@v2\n - name: Install dependencies\n run: pnpm install\n - name: Generate table of contents\n run: npm run gen\n - name: 'Commit changes if required'\n run: |\n if ! git diff --quiet README.md; then\n git config user.email \"github-actions[bot]@users.noreply.github.com\"\n git config user.name \"GitHub Actions\"\n git add README.md\n git commit -m \"[auto] regenerate table of contents\"\n git push\n echo \"[info] Table of contents updated and committed.\"\n else\n echo \"[info] No changes to table of contents.\"\n fi\n working-directory: ${{ github.workspace }}\n"
},
{
"path": ".gitignore",
"content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\n.pnpm-debug.log*\n\n# Diagnostic reports (https://nodejs.org/api/report.html)\nreport.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n*.lcov\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# Snowpack dependency directory (https://snowpack.dev/)\nweb_modules/\n\n# TypeScript cache\n*.tsbuildinfo\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional stylelint cache\n.stylelintcache\n\n# Microbundle cache\n.rpt2_cache/\n.rts2_cache_cjs/\n.rts2_cache_es/\n.rts2_cache_umd/\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variable files\n.env\n.env.development.local\n.env.test.local\n.env.production.local\n.env.local\n\n# parcel-bundler cache (https://parceljs.org/)\n.cache\n.parcel-cache\n\n# Next.js build output\n.next\nout\n\n# Nuxt.js build / generate output\n.nuxt\ndist\n\n# Gatsby files\n.cache/\n# Comment in the public line in if your project uses Gatsby and not Next.js\n# https://nextjs.org/blog/next-9-1#public-directory-support\n# public\n\n# vuepress build output\n.vuepress/dist\n\n# vuepress v2.x temp and cache directory\n.temp\n.cache\n\n# Docusaurus cache and generated files\n.docusaurus\n\n# Serverless directories\n.serverless/\n\n# FuseBox cache\n.fusebox/\n\n# DynamoDB Local files\n.dynamodb/\n\n# TernJS port file\n.tern-port\n\n# Stores VSCode versions used for testing VSCode extensions\n.vscode-test\n\n# yarn v2\n.yarn/cache\n.yarn/unplugged\n.yarn/build-state.yml\n.yarn/install-state.gz\n.pnp.*\n\n# Translations\n.langnostic\n"
},
{
"path": ".prettierignore",
"content": "README.md\n"
},
{
"path": ".prettierrc",
"content": "{\n \"bracketSameLine\": true,\n \"printWidth\": 80,\n \"proseWrap\": \"never\",\n \"singleQuote\": true,\n \"trailingComma\": \"all\"\n}\n"
},
{
"path": "README.md",
"content": "# 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://www.greatfrontend.com/?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
\n\n> Black Friday 2025 sale going on now, enjoy the largest discount of the year! [Get 30% off GreatFrontEnd Premium →](https://www.greatfrontend.com/questions/javascript-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\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 `\n ```\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-javascript-polyfills-for?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-javascript-polyfills-for/en-US.mdx)\n\n \n\n### Why is extending built-in JavaScript objects not a good idea?\n\n\n\nExtending a built-in/native JavaScript object means adding properties/functions to its `prototype`. While this may seem like a good idea at first, it is dangerous in practice. Imagine your code uses a few libraries that both extend the `Array.prototype` by adding the same `contains` method, the implementations will overwrite each other and your code will have unpredictable behavior if these two methods do not work the same way.\n\nThe only time you may want to extend a native object is when you want to create a polyfill, essentially providing your own implementation for a method that is part of the JavaScript specification but might not exist in the user's browser due to it being an older browser.\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx)\n\n \n\n### Why is it, in general, a good idea to leave the global JavaScript scope of a website as-is and never touch it?\n\n\n\nJavaScript that is executed in the browser has access to the global scope (the `window` object). In general it's a good software engineering practice to not pollute the global namespace unless you are working on a feature that truly needs to be global – it is needed by the entire page. Several reasons to avoid touching the global scope:\n\n- **Naming conflicts**: Sharing the global scope across scripts can cause conflicts and bugs when new global variables or changes are introduced.\n- **Cluttered global namespace**: Keeping the global namespace minimal avoids making the codebase hard to manage and maintain.\n- **Scope leaks**: Unintentional references to global variables in closures or event handlers can cause memory leaks and performance issues.\n- **Modularity and encapsulation**: Good design promotes keeping variables and functions within their specific scopes, enhancing organization, reusability, and maintainability.\n- **Security concerns**: Global variables are accessible by all scripts, including potentially malicious ones, posing security risks, especially if sensitive data is stored there.\n- **Compatibility and portability**: Heavy reliance on global variables reduces code portability and integration ease with other libraries or frameworks.\n\nFollow these best practices to avoid global scope pollution:\n\n- **Use local variables**: Declare variables within functions or blocks using `var`, `let`, or `const` to limit their scope.\n- **Pass variables as function parameters**: Maintain encapsulation by passing variables as parameters instead of accessing them globally.\n- **Use immediately invoked function expressions (IIFE)**: Create new scopes with IIFEs to prevent adding variables to the global scope.\n- **Use modules**: Encapsulate code with module systems to maintain separate scopes and manageability.\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx)\n\n \n\n### Explain the differences between CommonJS modules and ES modules in JavaScript\n\n\n\nIn JavaScript, modules are reusable pieces of code that encapsulate functionality, making it easier to manage, maintain, and structure your applications. Modules allow you to break down your code into smaller, manageable parts, each with its own scope.\n\n**CommonJS** is an older module system that was initially designed for server-side JavaScript development with Node.js. It uses the `require()` function to load modules and the `module.exports` or `exports` object to define the exports of a module.\n\n```js\n// my-module.js\nconst value = 42;\nmodule.exports = { value };\n\n// main.js\nconst myModule = require('./my-module.js');\nconsole.log(myModule.value); // 42\n```\n\n**ES Modules** (ECMAScript Modules) are the standardized module system introduced in ES6 (ECMAScript 2015). They use the `import` and `export` statements to handle module dependencies.\n\n```js\n// my-module.js\nexport const value = 42;\n\n// main.js\nimport { value } from './my-module.js';\nconsole.log(value); // 42\n```\n\n**CommonJS vs ES modules**\n\n| Feature | CommonJS | ES modules |\n| --- | --- | --- |\n| Module Syntax | `require()` for importing `module.exports` for exporting | `import` for importing `export` for exporting |\n| Environment | Primarily used in Node.js for server-side development | Designed for both browser and server-side JavaScript (Node.js) |\n| Loading | Synchronous loading of modules | Asynchronous loading of modules |\n| Structure | Dynamic imports, can be conditionally called | Static imports/exports at the top level |\n| File extensions | `.js` (default) | `.mjs` or `.js` (with `type: \"module\"` in `package.json`) |\n| Browser support | Not natively supported in browsers | Natively supported in modern browsers |\n| Optimization | Limited optimization due to dynamic nature | Allows for optimizations like tree-shaking due to static structure |\n| Compatibility | Widely used in existing Node.js codebases and libraries | Newer standard, but gaining adoption in modern projects |\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-the-differences-between-commonjs-modules-and-es-modules?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.mdx)\n\n \n\n### What are the various data types in JavaScript?\n\n\n\nIn JavaScript, data types can be categorized into `primitive` and `non-primitive` types:\n\n**Primitive data types**\n\n- **Number**: Represents both integers and floating-point numbers.\n- **String**: Represents sequences of characters.\n- **Boolean**: Represents `true` or `false` values.\n- **Undefined**: A variable that has been declared but not assigned a value.\n- **Null**: Represents the intentional absence of any object value.\n- **Symbol**: A unique and immutable value used as object property keys. Read more in our [deep dive on `Symbol`s](https://www.greatfrontend.com/questions/quiz/what-are-symbols-used-for)\n- **BigInt**: Represents integers with arbitrary precision.\n\n**Non-primitive (Reference) data types**\n\n- **Object**: Used to store collections of data.\n- **Array**: An ordered collection of data.\n- **Function**: A callable object.\n- **Date**: Represents dates and times.\n- **RegExp**: Represents regular expressions.\n- **Map**: A collection of keyed data items.\n- **Set**: A collection of unique values.\n\nThe primitive types store a single value, while non-primitive types can store collections of data or complex entities.\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-various-data-types-in-javascript?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-various-data-types-in-javascript/en-US.mdx)\n\n \n\n### What language constructs do you use for iterating over object properties and array items in JavaScript?\n\n\n\nThere are multiple ways to iterate over object properties as well as arrays in JavaScript:\n\n**`for...in` loop**\n\nThe `for...in` loop iterates over all enumerable properties of an object, including inherited enumerable properties. So it is important to have a check if you only want to iterate over object's own properties\n\n```js live\nconst obj = {\n a: 1,\n b: 2,\n c: 3,\n};\n\nfor (const key in obj) {\n // To avoid iterating over inherited properties\n if (Object.hasOwn(obj, key)) {\n console.log(`${key}: ${obj[key]}`);\n }\n}\n```\n\n**`Object.keys()`**\n\n`Object.keys()` returns an array of the object's own enumerable property names. You can then use a for...of loop or forEach to iterate over this array.\n\n```js live\nconst obj = {\n a: 1,\n b: 2,\n c: 3,\n};\n\nObject.keys(obj).forEach((key) => {\n console.log(`${key}: ${obj[key]}`);\n});\n```\n\nMost common ways to iterate over array are using `for` loop and `Array.prototype.forEach` method.\n\n**Using `for` loop**\n\n```js live\nlet array = [1, 2, 3, 4, 5, 6];\nfor (let index = 0; index < array.length; index++) {\n console.log(array[index]);\n}\n```\n\n**Using `Array.prototype.forEach` method**\n\n```js live\nlet array = [1, 2, 3, 4, 5, 6];\narray.forEach((number, index) => {\n console.log(`${number} at index ${index}`);\n});\n```\n\n**Using `for...of`**\n\nThis method is the newest and most convenient way to iterate over arrays. It automatically iterates over each element without requiring you to manage the index.\n\n```js live\nconst numbers = [1, 2, 3, 4, 5];\n\nfor (const number of numbers) {\n console.log(number);\n}\n```\n\nThere are also other inbuilt methods available which are suitable for specific scenarios for example:\n\n- `Array.prototype.filter`: You can use the `filter` method to create a new array containing only the elements that satisfy a certain condition.\n- `Array.prototype.map`: You can use the `map` method to create a new array based on the existing one, transforming each element with a provided function.\n- `Array.prototype.reduce`: You can use the `reduce` method to combine all elements into a single value by repeatedly calling a function that takes two arguments: the accumulated value and the current element.\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx)\n\n \n\n### What are the benefits of using spread syntax in JavaScript and how is it different from rest syntax?\n\n\n\n**Spread syntax** (`...`) allows an iterable (like an array or string) to be expanded into individual elements. This is often used as a convenient and modern way to create new arrays or objects by combining existing ones.\n\n| Operation | Traditional | Spread |\n| -------------- | ------------------------------- | ---------------------- |\n| Array cloning | `arr.slice()` | `[...arr]` |\n| Array merging | `arr1.concat(arr2)` | `[...arr1, ...arr2]` |\n| Object cloning | `Object.assign({}, obj)` | `{ ...obj }` |\n| Object merging | `Object.assign({}, obj1, obj2)` | `{ ...obj1, ...obj2 }` |\n\n**Rest syntax** is the opposite of what spread syntax does. It collects a variable number of arguments into an array. This is often used in function parameters to handle a dynamic number of arguments.\n\n```js live\n// Using rest syntax in a function\nfunction sum(...numbers) {\n return numbers.reduce((total, num) => total + num, 0);\n}\n\nconsole.log(sum(1, 2, 3)); // Output: 6\n```\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx)\n\n \n\n### What are iterators and generators in JavaScript and what are they used for?\n\n\n\nIn JavaScript, iterators and generators are powerful tools for managing sequences of data and controlling the flow of execution in a more flexible way.\n\n**Iterators** are objects that define a sequence and potentially a return value upon its termination. It adheres to a specific interface:\n\n- An iterator object must implement a `next()` method.\n- The `next()` method returns an object with two properties:\n - `value`: The next value in the sequence.\n - `done`: A boolean that is `true` if the iterator has finished its sequence, otherwise `false`.\n\nHere's an example of an object implementing the iterator interface.\n\n```js live\nconst iterator = {\n current: 0,\n last: 5,\n next() {\n if (this.current <= this.last) {\n return { value: this.current++, done: false };\n } else {\n return { value: undefined, done: true };\n }\n },\n};\n\nlet result = iterator.next();\nwhile (!result.done) {\n console.log(result.value); // Logs 0, 1, 2, 3, 4, 5\n result = iterator.next();\n}\n```\n\n**Generators** are a special functions that **can pause execution and resume at a later point**. It uses the `function*` syntax and the `yield` keyword to control the flow of execution. When you call a generator function, it doesn't execute completely like a regular function. Instead, it returns an iterator object. Calling the `next()` method on the returned iterator advances the generator to the next `yield` statement, and the value after `yield` becomes the return value of `next()`.\n\n```js live\nfunction* numberGenerator() {\n let num = 0;\n while (num <= 5) {\n yield num++;\n }\n}\n\nconst gen = numberGenerator();\nconsole.log(gen.next()); // { value: 0, done: false }\nconsole.log(gen.next()); // { value: 1, done: false }\nconsole.log(gen.next()); // { value: 2, done: false }\nconsole.log(gen.next()); // { value: 3, done: false }\nconsole.log(gen.next()); // { value: 4, done: false }\nconsole.log(gen.next()); // { value: 5, done: false }\nconsole.log(gen.next()); // { value: undefined, done: true }\n```\n\nGenerators are powerful for creating iterators on-demand, especially for infinite sequences or complex iteration logic. They can be used for:\n\n- Lazy evaluation – processing elements only when needed, improving memory efficiency for large datasets.\n- Implementing iterators for custom data structures.\n- Creating asynchronous iterators for handling data streams.\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-iterators-and-generators-and-what-are-they-used-for?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx)\n\n \n\n### Explain the difference between mutable and immutable objects in JavaScript\n\n\n\n**Mutable objects** allow for modification of properties and values after creation, which is the default behavior for most objects.\n\n```js live\nconst mutableObject = {\n name: 'John',\n age: 30,\n};\n\n// Modify the object\nmutableObject.name = 'Jane';\n\n// The object has been modified\nconsole.log(mutableObject); // Output: { name: 'Jane', age: 30 }\n```\n\n**Immutable objects** cannot be directly modified after creation. Its content cannot be changed without creating an entirely new value.\n\n```js live\nconst immutableObject = Object.freeze({\n name: 'John',\n age: 30,\n});\n\n// Attempt to modify the object\nimmutableObject.name = 'Jane';\n\n// The object remains unchanged\nconsole.log(immutableObject); // Output: { name: 'John', age: 30 }\n```\n\nThe key difference between mutable and immutable objects is modifiability. Immutable objects cannot be modified after they are created, while mutable objects can be.\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx)\n\n \n\n### What is the difference between a `Map` object and a plain object in JavaScript?\n\n\n\nBoth `Map` objects and plain objects in JavaScript can store key-value pairs, but they have several key differences:\n\n| Feature | `Map` | Plain object |\n| --- | --- | --- |\n| Key type | Any data type | String (or Symbol) |\n| Key order | Maintained | Not guaranteed |\n| Size property | Yes (`size`) | None |\n| Iteration | `forEach`, `keys()`, `values()`, `entries()` | `for...in`, `Object.keys()`, etc. |\n| Inheritance | No | Yes |\n| Performance | Generally better for larger datasets and frequent additions/deletions | Faster for small datasets and simple operations |\n| Serializable | No | Yes |\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.mdx)\n\n \n\n### What are the differences between `Map`/`Set` and `WeakMap`/`WeakSet` in JavaScript?\n\n\n\nThe primary difference between `Map`/`Set` and `WeakMap`/`WeakSet` in JavaScript lies in how they handle keys. Here's a breakdown:\n\n**`Map` vs. `WeakMap`**\n\n`Map`s allows any data type (strings, numbers, objects) as keys. The key-value pairs remain in memory as long as the `Map` object itself is referenced. Thus they are suitable for general-purpose key-value storage where you want to maintain references to both keys and values. Common use cases include storing user data, configuration settings, or relationships between objects.\n\n`WeakMap`s only allows objects as keys. However, these object keys are held weakly. This means the garbage collector can remove them from memory even if the `WeakMap` itself still exists, as long as there are no other references to those objects. `WeakMap`s are ideal for scenarios where you want to associate data with objects without preventing those objects from being garbage collected. This can be useful for things like:\n\n- Caching data based on objects without preventing garbage collection of the objects themselves.\n- Storing private data associated with DOM nodes without affecting their lifecycle.\n\n**`Set` vs. `WeakSet`**\n\nSimilar to `Map`, `Set`s allow any data type as keys. The elements within a `Set` must be unique. `Set`s are useful for storing unique values and checking for membership efficiently. Common use cases include removing duplicates from arrays or keeping track of completed tasks.\n\nOn the other hand, `WeakSet` only allows objects as elements, and these object elements are held weakly, similar to `WeakMap` keys. `WeakSet`s are less commonly used, but applicable when you want a collection of unique objects without affecting their garbage collection. This might be necessary for:\n\n- Tracking DOM nodes that have been interacted with without affecting their memory management.\n- Implementing custom object weak references for specific use cases.\n\n**Here's a table summarizing the key differences:**\n\n| Feature | Map | WeakMap | Set | WeakSet |\n| --- | --- | --- | --- | --- |\n| Key Types | Any data type | Objects (weak references) | Any data type (unique) | Objects (weak references, unique) |\n| Garbage Collection | Keys and values are not garbage collected | Keys can be garbage collected if not referenced elsewhere | Elements are not garbage collected | Elements can be garbage collected if not referenced elsewhere |\n| Use Cases | General-purpose key-value storage | Caching, private DOM node data | Removing duplicates, membership checks | Object weak references, custom use cases |\n\n**Choosing between them**\n\n- Use `Map` and `Set` for most scenarios where you need to store key-value pairs or unique elements and want to maintain references to both the keys/elements and the values.\n- Use `WeakMap` and `WeakSet` cautiously in specific situations where you want to associate data with objects without affecting their garbage collection. Be aware of the implications of weak references and potential memory leaks if not used correctly.\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-map-set-and-weakmap-weakset?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.mdx)\n\n \n\n### Why might you want to create static class members in JavaScript?\n\n\n\nStatic class members (properties/methods) has a `static` keyword prepended. Such members cannot be directly accessed on instances of the class. Instead, they're accessed on the class itself.\n\n```js live\nclass Car {\n static noOfWheels = 4;\n static compare() {\n return 'Static method has been called.';\n }\n}\n\nconsole.log(Car.noOfWheels); // 4\n```\n\nStatic members are useful under the following scenarios:\n\n- **Namespace organization**: Static properties can be used to define constants or configuration values that are specific to a class. This helps organize related data within the class namespace and prevents naming conflicts with other variables. Examples include `Math.PI`, `Math.SQRT2`.\n- **Helper functions**: Static methods can be used as helper functions that operate on the class itself or its instances. This can improve code readability and maintainability by separating utility logic from the core functionality of the class. Examples of frequently used static methods include `Object.assign()`, `Math.max()`.\n- **Singleton pattern**: In some rare cases, static properties and methods can be used to implement a singleton pattern, where only one instance of a class ever exists. However, this pattern can be tricky to manage and is generally discouraged in favor of more modern dependency injection techniques.\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/why-you-might-want-to-create-static-class-members?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/why-you-might-want-to-create-static-class-members/en-US.mdx)\n\n \n\n### What are `Symbol`s used for in JavaScript?\n\n\n\n`Symbol`s in JavaScript are a new primitive data type introduced in ES6 (ECMAScript 2015). They are unique and immutable identifiers that is primarily for object property keys to avoid name collisions. These values can be created using `Symbol(...)` function, and each `Symbol` value is guaranteed to be unique, even if they have the same key/description. `Symbol` properties are not enumerable in `for...in` loops or `Object.keys()`, making them suitable for creating private/internal object state.\n\n```js live\nlet sym1 = Symbol();\nlet sym2 = Symbol('myKey');\n\nconsole.log(typeof sym1); // \"symbol\"\nconsole.log(sym1 === sym2); // false, because each symbol is unique\n\nlet obj = {};\nlet sym = Symbol('uniqueKey');\n\nobj[sym] = 'value';\nconsole.log(obj[sym]); // \"value\"\n```\n\n**Note**: The `Symbol()` function must be called without the `new` keyword. It is not exactly a constructor because it can only be called as a function instead of with `new Symbol()`.\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-symbols-used-for?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-symbols-used-for/en-US.mdx)\n\n \n\n### What are server-sent events?\n\n\n\n[Server-sent events (SSE)](https://html.spec.whatwg.org/multipage/comms.html#the-eventsource-interface) is a standard that allows a web page to receive automatic updates from a server via an HTTP connection. Server-sent events are used with `EventSource` instances that opens a connection with a server and allows client to receive events from the server. Connections created by server-sent events are persistent (similar to the `WebSocket`s), however there are a few differences:\n\n| Property | `WebSocket` | `EventSource` |\n| --- | --- | --- |\n| Direction | Bi-directional – both client and server can exchange messages | Unidirectional – only server sends data |\n| Data type | Binary and text data | Only text |\n| Protocol | WebSocket protocol (`ws://`) | Regular HTTP (`http://`) |\n\n**Creating an event source**\n\n```js\nconst eventSource = new EventSource('/sse-stream');\n```\n\n**Listening for events**\n\n```js\n// Fired when the connection is established.\neventSource.addEventListener('open', () => {\n console.log('Connection opened');\n});\n\n// Fired when a message is received from the server.\neventSource.addEventListener('message', (event) => {\n console.log('Received message:', event.data);\n});\n\n// Fired when an error occurs.\neventSource.addEventListener('error', (error) => {\n console.error('Error occurred:', error);\n});\n```\n\n**Sending events from server**\n\n```js\nconst express = require('express');\nconst app = express();\n\napp.get('/sse-stream', (req, res) => {\n // `Content-Type` need to be set to `text/event-stream`.\n res.setHeader('Content-Type', 'text/event-stream');\n res.setHeader('Cache-Control', 'no-cache');\n res.setHeader('Connection', 'keep-alive');\n\n // Each message should be prefixed with data.\n const sendEvent = (data) => res.write(`data: ${data}\\n\\n`);\n\n sendEvent('Hello from server');\n\n const intervalId = setInterval(() => sendEvent(new Date().toString()), 1000);\n\n res.on('close', () => {\n console.log('Client closed connection');\n clearInterval(intervalId);\n });\n});\n\napp.listen(3000, () => console.log('Server started on port 3000'));\n```\n\nIn this example, the server sends a \"Hello from server\" message initially, and then sends the current date every second. The connection is kept alive until the client closes it\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-server-sent-events?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-server-sent-events/en-US.mdx)\n\n \n\n### What are JavaScript object property flags and descriptors?\n\n\n\nIn JavaScript, property flags and descriptors manage the behavior and attributes of object properties.\n\n**Property flags**\n\nProperty flags are used to specify the behavior of a property on an object. Here are the available flags:\n\n- `writable`: Specifies whether the property can be written to. Defaults to `true`.\n- `enumerable`: Specifies whether the property is enumerable. Defaults to `true`.\n- `configurable`: Specifies whether the property can be deleted or its attributes changed. Default is `true`.\n\n**Property descriptors**\n\nThese provide detailed information about an object's property, including its value and flags. They are retrieved using `Object.getOwnPropertyDescriptor()` and set using `Object.defineProperty()`.\n\nThe use cases of property descriptors are as follows:\n\n- Making a property non-writable by setting `writable: false` to ensure data consistency.\n- Hiding a property from enumeration by setting `enumerable: false`.\n- Preventing property deletion and modification by setting `configurable: false`.\n- Freezing or sealing objects to prevent modifications globally.\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-javascript-object-property-flags-and-descriptors?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-javascript-object-property-flags-and-descriptors/en-US.mdx)\n\n \n\n### What are JavaScript object getters and setters for?\n\n\n\nJavaScript object getters and setters are used to control access to an object's properties. They provide a way to encapsulate the implementation details of a property and define custom behavior when getting or setting its value.\n\nGetters and setters are defined using the `get` and `set` keywords, respectively, followed by a function that is executed when the property is accessed or assigned a new value.\n\nHere's a code example demonstrating the use of getters and setters:\n\n```js live\nconst person = {\n _name: 'John Doe', // Private property\n\n get name() {\n // Getter\n return this._name;\n },\n set name(newName) {\n // Setter\n if (newName.trim().length > 0) {\n this._name = newName;\n } else {\n console.log('Invalid name');\n }\n },\n};\n\n// Accessing the name property using the getter\nconsole.log(person.name); // Output: 'John Doe'\n\n// Setting the name property using the setter\nperson.name = 'Jane Smith'; // Setter is called\nconsole.log(person.name); // Output: 'Jane Smith'\n\nperson.name = ''; // Setter is called, but the value is not set due to validation\nconsole.log(person.name); // Output: 'Jane Smith'\n```\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-javascript-object-getters-and-setters-for?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-javascript-object-getters-and-setters-for/en-US.mdx)\n\n \n\n### What are proxies in JavaScript used for?\n\n\n\nIn JavaScript, a proxy is an object that acts as an intermediary between an object and the code. Proxies are used to intercept and customize the fundamental operations of JavaScript objects, such as property access, assignment, function invocation, and more.\n\nHere's a basic example of using a `Proxy` to log every property access:\n\n```js live\nconst myObject = {\n name: 'John',\n age: 42,\n};\n\nconst handler = {\n get: function (target, prop, receiver) {\n console.log(`Someone accessed property \"${prop}\"`);\n return target[prop];\n },\n};\n\nconst proxiedObject = new Proxy(myObject, handler);\n\nconsole.log(proxiedObject.name);\n// Someone accessed property \"name\"\n// 'John'\n\nconsole.log(proxiedObject.age);\n// Someone accessed property \"age\"\n// 42\n```\n\nUse cases include:\n\n- **Property access interception**: Intercept and customize property access on an object.\n - **Property assignment validation**: Validate property values before they are set on the target object.\n - **Logging and debugging**: Create wrappers for logging and debugging interactions with an object\n - **Creating reactive systems**: Trigger updates in other parts of your application when object properties change (data binding).\n - **Data transformation**: Transforming data being set or retrieved from an object.\n - **Mocking and stubbing in tests**: Create mock or stub objects for testing purposes, allowing you to isolate dependencies and focus on the unit under test\n- **Function invocation interception**: Used to cache and return the result of frequently accessed methods if they involve network calls or computationally intensive logic, improving performance\n- **Dynamic property creation**: Useful for defining properties on-the-fly with default values and avoid storing redundant data in objects.\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-proxies-in-javascript-used-for?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-proxies-in-javascript-used-for/en-US.mdx)\n\n \n\n### What tools and techniques do you use for debugging JavaScript code?\n\n\n\nSome of the most commonly used tools and techniques for debugging JavaScript:\n\n- JavaScript language\n - `console` methods (e.g. `console.log()`, `console.error()`, `console.warn()`, `console.table()`)\n - `debugger` statement\n- Breakpoints (browser or IDE)\n- JavaScript frameworks\n - [React Devtools](https://github.com/facebook/react-devtools)\n - [Redux Devtools](https://github.com/gaearon/redux-devtools)\n - [Vue Devtools](https://github.com/vuejs/vue-devtools)\n- Browser developer tools\n - **Chrome DevTools**: The most widely used tool for debugging JavaScript. It provides a rich set of features including the ability to set breakpoints, inspect variables, view the call stack, and more.\n - **Firefox Developer Tools**: Similar to Chrome DevTools with its own set of features for debugging.\n - **Safari Web Inspector**: Provides tools for debugging on Safari.\n - **Edge Developer Tools**: Similar to Chrome DevTools, as Edge is now Chromium-based.\n- Network requests\n - **Postman**: Useful for debugging API calls.\n - **Fiddler**: Helps capture and inspect HTTP/HTTPS traffic.\n - **Charles Proxy**: Another tool for intercepting and debugging network calls.\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.mdx)\n\n \n\n### What are workers in JavaScript used for?\n\n\n\nWorkers in JavaScript are background threads that allow you to run scripts in parallel with the main execution thread, without blocking or interfering with the user interface. Their key features include:\n\n- **Parallel processing**: Workers run in a separate thread from the main thread, allowing your web page to remain responsive to user interactions while the worker performs its tasks. It's useful for moving CPU-intensive work off the main thread and be free from JavaScript's single-threaded nature.\n- **Communication**: Uses `postMessage()` and `onmessage`/ `'message'` event for messaging.\n- **Access to web APIs**: Workers have access to various Web APIs, including `fetch()`, IndexedDB, and Web Storage, allowing them to perform tasks like data fetching and persisting data independently.\n- **No DOM access**: Workers cannot directly manipulate the DOM, thus cannot interact with the UI, ensuring they don't accidentally interfere with the main thread's operation.\n\nThere are three main types of workers in JavaScript:\n\n- **Web workers / Dedicated workers**\n - Run scripts in background threads, separate from the main UI thread.\n - Useful for CPU-intensive tasks like data processing, calculations, etc.\n - Cannot directly access or manipulate the DOM.\n- **Service workers**\n - Act as network proxies, handling requests between the app and network.\n - Enable offline functionality, caching, and push notifications.\n - Runs independently of the web page, even when it's closed.\n- **Shared workers**\n - Can be shared by multiple scripts running in different windows or frames, as long as they're in the same domain.\n - Scripts communicate with the shared worker by sending and receiving messages.\n - Useful for coordinating tasks across different parts of a web page.\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-workers-in-javascript-used-for?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-workers-in-javascript-used-for/en-US.mdx)\n\n \n\n### How does JavaScript garbage collection work?\n\n\n\nGarbage collection in JavaScript is an automatic memory management mechanism that reclaims memory occupied by objects and variables that are no longer in use by the program. The two most common algorithms are mark-and-sweep and generational garbage collection.\n\n**Mark-and-sweep**\n\nThe most common garbage collection algorithm used in JavaScript is the Mark-and-sweep algorithm. It operates in two phases:\n\n- **Marking phase**: The garbage collector traverses the object graph, starting from the root objects (global variables, currently executing functions, etc.), and marks all reachable objects as \"in-use\".\n- **Sweeping phase**: The garbage collector sweeps through memory, removing all unmarked objects, as they are considered unreachable and no longer needed.\n\nThis algorithm effectively identifies and removes objects that have become unreachable, freeing up memory for new allocations.\n\n**Generational garbage collection**\n\nLeveraged by modern JavaScript engines, objects are divided into different generations based on their age and usage patterns. Frequently accessed objects are moved to younger generations, while less frequently used objects are promoted to older generations. This optimization reduces the overhead of garbage collection by focusing on the younger generations, where most objects are short-lived.\n\nDifferent JavaScript engines (differs according to browsers) implement different garbage collection algorithms and there's no standard way of doing garbage collection.\n\n\n\n \n \n> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/how-does-javascript-garbage-collection-work?language=js&tab=quiz) on [GreatFrontEnd](https://www.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) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-does-javascript-garbage-collection-work/en-US.mdx)\n\n \n\n\n\n\n## All Questions with Answers\n\n\n\n### What are the various data types in JavaScript?\n\n\n\nIn JavaScript, data types can be categorized into `primitive` and `non-primitive` types:\n\n**Primitive data types**\n\n- **Number**: Represents both integers and floating-point numbers.\n- **String**: Represents sequences of characters.\n- **Boolean**: Represents `true` or `false` values.\n- **Undefined**: A variable that has been declared but not assigned a value.\n- **Null**: Represents the intentional absence of any object value.\n- **Symbol**: A unique and immutable value used as object property keys. Read more in our [deep dive on `Symbol`s](https://www.greatfrontend.com/questions/quiz/what-are-symbols-used-for)\n- **BigInt**: Represents integers with arbitrary precision.\n\n**Non-primitive (Reference) data types**\n\n- **Object**: Used to store collections of data.\n- **Array**: An ordered collection of data.\n- **Function**: A callable object.\n- **Date**: Represents dates and times.\n- **RegExp**: Represents regular expressions.\n- **Map**: A collection of keyed data items.\n- **Set**: A collection of unique values.\n\nThe primitive types store a single value, while non-primitive types can store collections of data or complex entities.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-various-data-types-in-javascript/en-US.mdx)\n\n \n\n### How do you check the data type of a variable?\n\n\n\nTo check the data type of a variable in JavaScript, you can use the `typeof` operator. For example, `typeof variableName` will return a string indicating the type of the variable, such as `\"string\"`, `\"number\"`, `\"boolean\"`, `\"object\"`, `\"function\"`, `\"undefined\"`, or `\"symbol\"`. For arrays and `null`, you can use `Array.isArray(variableName)` and `variableName === null`, respectively.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-do-you-check-the-data-type-of-a-variable/en-US.mdx)\n\n \n\n### What's the difference between a JavaScript variable that is: `null`, `undefined` or undeclared?\n\n\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\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx)\n\n \n\n### What are the differences between JavaScript variables created using `let`, `var` or `const`?\n\n\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\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx)\n\n \n\n### Why is it, in general, a good idea to leave the global JavaScript scope of a website as-is and never touch it?\n\n\n\nJavaScript that is executed in the browser has access to the global scope (the `window` object). In general it's a good software engineering practice to not pollute the global namespace unless you are working on a feature that truly needs to be global – it is needed by the entire page. Several reasons to avoid touching the global scope:\n\n- **Naming conflicts**: Sharing the global scope across scripts can cause conflicts and bugs when new global variables or changes are introduced.\n- **Cluttered global namespace**: Keeping the global namespace minimal avoids making the codebase hard to manage and maintain.\n- **Scope leaks**: Unintentional references to global variables in closures or event handlers can cause memory leaks and performance issues.\n- **Modularity and encapsulation**: Good design promotes keeping variables and functions within their specific scopes, enhancing organization, reusability, and maintainability.\n- **Security concerns**: Global variables are accessible by all scripts, including potentially malicious ones, posing security risks, especially if sensitive data is stored there.\n- **Compatibility and portability**: Heavy reliance on global variables reduces code portability and integration ease with other libraries or frameworks.\n\nFollow these best practices to avoid global scope pollution:\n\n- **Use local variables**: Declare variables within functions or blocks using `var`, `let`, or `const` to limit their scope.\n- **Pass variables as function parameters**: Maintain encapsulation by passing variables as parameters instead of accessing them globally.\n- **Use immediately invoked function expressions (IIFE)**: Create new scopes with IIFEs to prevent adding variables to the global scope.\n- **Use modules**: Encapsulate code with module systems to maintain separate scopes and manageability.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx)\n\n \n\n### How do you convert a string to a number in JavaScript?\n\n\n\nIn JavaScript, you can convert a string to a number using several methods. The most common ones are `Number()`, `parseInt()`, `parseFloat()`, and the unary plus operator (`+`). For example, `Number(\"123\")` converts the string `\"123\"` to the number `123`, and `parseInt(\"123.45\")` converts the string `\"123.45\"` to the integer `123`.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.mdx)\n\n \n\n### What are template literals and how are they used?\n\n\n\nTemplate literals are a feature in JavaScript that allow for easier string interpolation and multi-line strings. They are enclosed by backticks (`` ` ``) instead of single or double quotes. You can embed expressions within template literals using `${expression}` syntax.\n\nExample:\n\n```js live\nconst myName = 'John';\nconst greeting = `Hello, ${myName}!`;\nconsole.log(greeting); // Output: Hello, John!\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-template-literals-and-how-are-they-used/en-US.mdx)\n\n \n\n### Explain the concept of tagged templates\n\n\n\nTagged templates in JavaScript allow you to parse template literals with a function. The function receives the literal strings and the values as arguments, enabling custom processing of the template. For example:\n\n```js live\nfunction tag(strings, ...values) {\n return strings[0] + values[0] + strings[1] + values[1] + strings[2];\n}\n\nconst result = tag`Hello ${'world'}! How are ${'you'}?`;\nconsole.log(result); // \"Hello world! How are you?\"\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-concept-of-tagged-templates/en-US.mdx)\n\n \n\n### What is the spread operator and how is it used?\n\n\n\nThe spread operator, represented by three dots (`...`), is used in JavaScript to expand iterable objects like arrays or strings into individual elements. It can also be used to spread object properties. For example, you can use it to combine arrays, copy arrays, or pass array elements as arguments to a function.\n\n```js live\nconst arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\nconst combined = [...arr1, ...arr2];\nconsole.log(combined); // [1, 2, 3, 4, 5, 6]\n\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { c: 3, d: 4 };\nconst combinedObj = { ...obj1, ...obj2 };\nconsole.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-spread-operator-and-how-is-it-used/en-US.mdx)\n\n \n\n### What are `Symbol`s used for in JavaScript?\n\n\n\n`Symbol`s in JavaScript are a new primitive data type introduced in ES6 (ECMAScript 2015). They are unique and immutable identifiers that is primarily for object property keys to avoid name collisions. These values can be created using `Symbol(...)` function, and each `Symbol` value is guaranteed to be unique, even if they have the same key/description. `Symbol` properties are not enumerable in `for...in` loops or `Object.keys()`, making them suitable for creating private/internal object state.\n\n```js live\nlet sym1 = Symbol();\nlet sym2 = Symbol('myKey');\n\nconsole.log(typeof sym1); // \"symbol\"\nconsole.log(sym1 === sym2); // false, because each symbol is unique\n\nlet obj = {};\nlet sym = Symbol('uniqueKey');\n\nobj[sym] = 'value';\nconsole.log(obj[sym]); // \"value\"\n```\n\n**Note**: The `Symbol()` function must be called without the `new` keyword. It is not exactly a constructor because it can only be called as a function instead of with `new Symbol()`.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-symbols-used-for/en-US.mdx)\n\n \n\n### What are proxies in JavaScript used for?\n\n\n\nIn JavaScript, a proxy is an object that acts as an intermediary between an object and the code. Proxies are used to intercept and customize the fundamental operations of JavaScript objects, such as property access, assignment, function invocation, and more.\n\nHere's a basic example of using a `Proxy` to log every property access:\n\n```js live\nconst myObject = {\n name: 'John',\n age: 42,\n};\n\nconst handler = {\n get: function (target, prop, receiver) {\n console.log(`Someone accessed property \"${prop}\"`);\n return target[prop];\n },\n};\n\nconst proxiedObject = new Proxy(myObject, handler);\n\nconsole.log(proxiedObject.name);\n// Someone accessed property \"name\"\n// 'John'\n\nconsole.log(proxiedObject.age);\n// Someone accessed property \"age\"\n// 42\n```\n\nUse cases include:\n\n- **Property access interception**: Intercept and customize property access on an object.\n - **Property assignment validation**: Validate property values before they are set on the target object.\n - **Logging and debugging**: Create wrappers for logging and debugging interactions with an object\n - **Creating reactive systems**: Trigger updates in other parts of your application when object properties change (data binding).\n - **Data transformation**: Transforming data being set or retrieved from an object.\n - **Mocking and stubbing in tests**: Create mock or stub objects for testing purposes, allowing you to isolate dependencies and focus on the unit under test\n- **Function invocation interception**: Used to cache and return the result of frequently accessed methods if they involve network calls or computationally intensive logic, improving performance\n- **Dynamic property creation**: Useful for defining properties on-the-fly with default values and avoid storing redundant data in objects.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-proxies-in-javascript-used-for/en-US.mdx)\n\n \n\n### Explain the concept of \"hoisting\" in JavaScript\n\n\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\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-hoisting/en-US.mdx)\n\n \n\n### Explain the difference in hoisting between `var`, `let`, and `const`\n\n\n\n`var` declarations are hoisted to the top of their scope and initialized with `undefined`, allowing them to be used before their declaration. `let` and `const` declarations are also hoisted but are not initialized, resulting in a `ReferenceError` if accessed before their declaration. `const` additionally requires an initial value at the time of declaration.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.mdx)\n\n \n\n### How does hoisting affect function declarations and expressions?\n\n\n\nHoisting in JavaScript means that function declarations are moved to the top of their containing scope during the compile phase, making them available throughout the entire scope. This allows you to call a function before it is defined in the code. However, function expressions are not hoisted in the same way. If you try to call a function expression before it is defined, you will get an error because the variable holding the function is hoisted but not its assignment.\n\n```js live\n// Function declaration\nconsole.log(foo()); // Works fine\nfunction foo() {\n return 'Hello';\n}\n\n// Function expression\nconsole.log(bar()); // Throws TypeError: bar is not a function\nvar bar = function () {\n return 'Hello';\n};\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-does-hoisting-affect-function-declarations-and-expressions/en-US.mdx)\n\n \n\n### What are the potential issues caused by hoisting?\n\n\n\nHoisting can lead to unexpected behavior in JavaScript because variable and function declarations are moved to the top of their containing scope during the compilation phase. This can result in `undefined` values for variables if they are used before their declaration and can cause confusion with function declarations and expressions. For example:\n\n```js live\nconsole.log(a); // undefined\nvar a = 5;\n\nconsole.log(b); // ReferenceError: Cannot access 'b' before initialization\nlet b = 10;\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-potential-issues-caused-by-hoisting/en-US.mdx)\n\n \n\n### How can you avoid problems related to hoisting?\n\n\n\nTo avoid problems related to hoisting, always declare variables at the top of their scope using `let` or `const` instead of `var`. This ensures that variables are block-scoped and not hoisted to the top of their containing function or global scope. Additionally, declare functions before they are called to avoid issues with function hoisting.\n\n```js live\n// Use let or const\nlet x = 10;\nconst y = 20;\nconsole.log(x, y); // Output: 10 20\n\n// Declare functions before calling them\nfunction myFunction() {\n console.log('Hello, world!');\n}\nmyFunction(); // Output: 'Hello, world!'\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx)\n\n \n\n### What is the difference between `==` and `===` in JavaScript?\n\n\n\n`==` is the abstract equality operator while `===` is the strict equality operator. The `==` operator will compare for equality after doing any necessary type conversions. The `===` operator will not do type conversion, so if two values are not the same type `===` will simply return `false`.\n\n| Operator | `==` | `===` |\n| --- | --- | --- |\n| Name | (Loose) Equality operator | Strict equality operator |\n| Type coercion | Yes | No |\n| Compares value and type | No | Yes |\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx)\n\n \n\n### What language constructs do you use for iterating over object properties and array items in JavaScript?\n\n\n\nThere are multiple ways to iterate over object properties as well as arrays in JavaScript:\n\n**`for...in` loop**\n\nThe `for...in` loop iterates over all enumerable properties of an object, including inherited enumerable properties. So it is important to have a check if you only want to iterate over object's own properties\n\n```js live\nconst obj = {\n a: 1,\n b: 2,\n c: 3,\n};\n\nfor (const key in obj) {\n // To avoid iterating over inherited properties\n if (Object.hasOwn(obj, key)) {\n console.log(`${key}: ${obj[key]}`);\n }\n}\n```\n\n**`Object.keys()`**\n\n`Object.keys()` returns an array of the object's own enumerable property names. You can then use a for...of loop or forEach to iterate over this array.\n\n```js live\nconst obj = {\n a: 1,\n b: 2,\n c: 3,\n};\n\nObject.keys(obj).forEach((key) => {\n console.log(`${key}: ${obj[key]}`);\n});\n```\n\nMost common ways to iterate over array are using `for` loop and `Array.prototype.forEach` method.\n\n**Using `for` loop**\n\n```js live\nlet array = [1, 2, 3, 4, 5, 6];\nfor (let index = 0; index < array.length; index++) {\n console.log(array[index]);\n}\n```\n\n**Using `Array.prototype.forEach` method**\n\n```js live\nlet array = [1, 2, 3, 4, 5, 6];\narray.forEach((number, index) => {\n console.log(`${number} at index ${index}`);\n});\n```\n\n**Using `for...of`**\n\nThis method is the newest and most convenient way to iterate over arrays. It automatically iterates over each element without requiring you to manage the index.\n\n```js live\nconst numbers = [1, 2, 3, 4, 5];\n\nfor (const number of numbers) {\n console.log(number);\n}\n```\n\nThere are also other inbuilt methods available which are suitable for specific scenarios for example:\n\n- `Array.prototype.filter`: You can use the `filter` method to create a new array containing only the elements that satisfy a certain condition.\n- `Array.prototype.map`: You can use the `map` method to create a new array based on the existing one, transforming each element with a provided function.\n- `Array.prototype.reduce`: You can use the `reduce` method to combine all elements into a single value by repeatedly calling a function that takes two arguments: the accumulated value and the current element.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx)\n\n \n\n### What is the purpose of the `break` and `continue` statements?\n\n\n\nThe `break` statement is used to exit a loop or switch statement prematurely, while the `continue` statement skips the current iteration of a loop and proceeds to the next iteration. For example, in a `for` loop, `break` will stop the loop entirely, and `continue` will skip to the next iteration.\n\n```js live\nfor (let i = 0; i < 10; i++) {\n if (i === 5) break; // exits the loop when i is 5\n console.log(i);\n}\n\nfor (let i = 0; i < 10; i++) {\n if (i === 5) continue; // skips the iteration when i is 5\n console.log(i);\n}\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-purpose-of-the-break-and-continue-statements/en-US.mdx)\n\n \n\n### What is the ternary operator and how is it used?\n\n\n\nThe ternary operator is a shorthand for an `if-else` statement in JavaScript. It takes three operands: a condition, a result for true, and a result for false. The syntax is `condition ? expr1 : expr2`. For example, `let result = (a > b) ? 'a is greater' : 'b is greater';` assigns `'a is greater'` to `result` if `a` is greater than `b`, otherwise it assigns `'b is greater'`.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-ternary-operator-and-how-is-it-used/en-US.mdx)\n\n \n\n### How do you access the index of an element in an array during iteration?\n\n\n\nTo access the index of an element in an array during iteration, you can use methods like `forEach`, `map`, `for...of` with `entries`, or a traditional `for` loop. For example, using `forEach`:\n\n```js live\nconst array = ['a', 'b', 'c'];\narray.forEach((element, index) => {\n console.log(index, element);\n});\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.mdx)\n\n \n\n### What is the purpose of the `switch` statement?\n\n\n\nThe `switch` statement is used to execute one block of code among many based on the value of an expression. It is an alternative to using multiple `if...else if` statements. The `switch` statement evaluates an expression, matches the expression's value to a `case` label, and executes the associated block of code. If no `case` matches, the `default` block is executed.\n\n```js\nswitch (expression) {\n case value1:\n // code to be executed if expression === value1\n break;\n case value2:\n // code to be executed if expression === value2\n break;\n default:\n // code to be executed if no case matches\n}\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-purpose-of-the-switch-statement/en-US.mdx)\n\n \n\n### What are rest parameters and how are they used?\n\n\n\nRest parameters in JavaScript allow a function to accept an indefinite number of arguments as an array. They are denoted by three dots (`...`) followed by the name of the array. This feature is useful for functions that need to handle multiple arguments without knowing the exact number in advance.\n\n```js live\nfunction sum(...numbers) {\n return numbers.reduce((acc, curr) => acc + curr, 0);\n}\n\nconsole.log(sum(1, 2, 3, 4)); // Output: 10\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-rest-parameters-and-how-are-they-used/en-US.mdx)\n\n \n\n### Explain the concept of the spread operator and its uses\n\n\n\nThe spread operator (`...`) in JavaScript allows you to expand elements of an iterable (like an array or object) into individual elements. It is commonly used for copying arrays or objects, merging arrays or objects, and passing elements of an array as arguments to a function.\n\n```js live\n// Copying an array\nconst arr1 = [1, 2, 3];\nconst arr2 = [...arr1];\nconsole.log(arr2); // Output: [1, 2, 3]\n\n// Merging arrays\nconst arr3 = [4, 5, 6];\nconst mergedArray = [...arr1, ...arr3];\nconsole.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]\n\n// Copying an object\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1 };\nconsole.log(obj2); // Output: { a: 1, b: 2 }\n\n// Merging objects\nconst obj3 = { c: 3, d: 4 };\nconst mergedObject = { ...obj1, ...obj3 };\nconsole.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }\n\n// Passing array elements as function arguments\nconst sum = (x, y, z) => x + y + z;\nconst numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // Output: 6\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.mdx)\n\n \n\n### What are the benefits of using spread syntax in JavaScript and how is it different from rest syntax?\n\n\n\n**Spread syntax** (`...`) allows an iterable (like an array or string) to be expanded into individual elements. This is often used as a convenient and modern way to create new arrays or objects by combining existing ones.\n\n| Operation | Traditional | Spread |\n| -------------- | ------------------------------- | ---------------------- |\n| Array cloning | `arr.slice()` | `[...arr]` |\n| Array merging | `arr1.concat(arr2)` | `[...arr1, ...arr2]` |\n| Object cloning | `Object.assign({}, obj)` | `{ ...obj }` |\n| Object merging | `Object.assign({}, obj1, obj2)` | `{ ...obj1, ...obj2 }` |\n\n**Rest syntax** is the opposite of what spread syntax does. It collects a variable number of arguments into an array. This is often used in function parameters to handle a dynamic number of arguments.\n\n```js live\n// Using rest syntax in a function\nfunction sum(...numbers) {\n return numbers.reduce((total, num) => total + num, 0);\n}\n\nconsole.log(sum(1, 2, 3)); // Output: 6\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx)\n\n \n\n### What are iterators and generators in JavaScript and what are they used for?\n\n\n\nIn JavaScript, iterators and generators are powerful tools for managing sequences of data and controlling the flow of execution in a more flexible way.\n\n**Iterators** are objects that define a sequence and potentially a return value upon its termination. It adheres to a specific interface:\n\n- An iterator object must implement a `next()` method.\n- The `next()` method returns an object with two properties:\n - `value`: The next value in the sequence.\n - `done`: A boolean that is `true` if the iterator has finished its sequence, otherwise `false`.\n\nHere's an example of an object implementing the iterator interface.\n\n```js live\nconst iterator = {\n current: 0,\n last: 5,\n next() {\n if (this.current <= this.last) {\n return { value: this.current++, done: false };\n } else {\n return { value: undefined, done: true };\n }\n },\n};\n\nlet result = iterator.next();\nwhile (!result.done) {\n console.log(result.value); // Logs 0, 1, 2, 3, 4, 5\n result = iterator.next();\n}\n```\n\n**Generators** are a special functions that **can pause execution and resume at a later point**. It uses the `function*` syntax and the `yield` keyword to control the flow of execution. When you call a generator function, it doesn't execute completely like a regular function. Instead, it returns an iterator object. Calling the `next()` method on the returned iterator advances the generator to the next `yield` statement, and the value after `yield` becomes the return value of `next()`.\n\n```js live\nfunction* numberGenerator() {\n let num = 0;\n while (num <= 5) {\n yield num++;\n }\n}\n\nconst gen = numberGenerator();\nconsole.log(gen.next()); // { value: 0, done: false }\nconsole.log(gen.next()); // { value: 1, done: false }\nconsole.log(gen.next()); // { value: 2, done: false }\nconsole.log(gen.next()); // { value: 3, done: false }\nconsole.log(gen.next()); // { value: 4, done: false }\nconsole.log(gen.next()); // { value: 5, done: false }\nconsole.log(gen.next()); // { value: undefined, done: true }\n```\n\nGenerators are powerful for creating iterators on-demand, especially for infinite sequences or complex iteration logic. They can be used for:\n\n- Lazy evaluation – processing elements only when needed, improving memory efficiency for large datasets.\n- Implementing iterators for custom data structures.\n- Creating asynchronous iterators for handling data streams.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx)\n\n \n\n### Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}` in JavaScript\n\n\n\n`function foo() {}` a function declaration while the `var foo = function() {}` is a function expression. The key difference is that function declarations have its body hoisted but the bodies of function expressions are not (they have the same hoisting behavior as `var`-declared variables).\n\nIf you try to invoke a function expression before it is declared, you will get an `Uncaught TypeError: XXX is not a function` error.\n\nFunction declarations can be called in the enclosing scope even before they are declared.\n\n```js live\nfoo(); // 'FOOOOO'\nfunction foo() {\n console.log('FOOOOO');\n}\n```\n\nFunction expressions if called before they are declared will result in an error.\n\n```js live\nfoo(); // Uncaught TypeError: foo is not a function\nvar foo = function () {\n console.log('FOOOOO');\n};\n```\n\nAnother key difference is in the scope of the function name. Function expressions can be named by defining it after the `function` and before the parenthesis. However when using named function expressions, the function name is only accessible within the function itself. Trying to access it outside will result in an error or `undefined`.\n\n```js live\nconst myFunc = function namedFunc() {\n console.log(namedFunc); // Works\n};\n\nmyFunc(); // Runs the function and logs the function reference\nconsole.log(namedFunc); // ReferenceError: namedFunc is not defined\n```\n\n**Note**: The examples uses `var` due to legacy reasons. Function expressions can be defined using `let` and `const` and the key difference is in the hoisting behavior of those keywords.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx)\n\n \n\n### What is the difference between a parameter and an argument?\n\n\n\nA parameter is a variable in the declaration of a function, while an argument is the actual value passed to the function when it is called. For example, in the function `function add(a, b) { return a + b; }`, `a` and `b` are parameters. When you call `add(2, 3)`, `2` and `3` are arguments.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-difference-between-a-parameter-and-an-argument/en-US.mdx)\n\n \n\n### Explain the concept of hoisting with regards to functions\n\n\n\nHoisting in JavaScript is a behavior where function declarations are moved to the top of their containing scope during the compile phase. This means you can call a function before it is defined in the code. However, this does not apply to function expressions or arrow functions, which are not hoisted in the same way.\n\n```js live\n// Function declaration\nhoistedFunction(); // Works fine\nfunction hoistedFunction() {\n console.log('This function is hoisted');\n}\n\n// Function expression\nnonHoistedFunction(); // Throws an error\nvar nonHoistedFunction = function () {\n console.log('This function is not hoisted');\n};\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.mdx)\n\n \n\n### What's the difference between `.call` and `.apply` in JavaScript?\n\n\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)); // 3\nconsole.log(add.apply(null, [1, 2])); // 3\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/whats-the-difference-between-call-and-apply/en-US.mdx)\n\n \n\n### Can you offer a use case for the new arrow => function syntax?\n\n\n\nArrow functions provide a concise syntax for writing functions in JavaScript. They are particularly useful for maintaining the `this` context within methods and callbacks. For example, in an event handler or array method like `map`, arrow functions can simplify the code and avoid issues with `this` binding.\n\n```js live\nconst numbers = [1, 2, 3];\nconst doubled = numbers.map((n) => n * 2);\nconsole.log(doubled); // [2, 4, 6]\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx)\n\n \n\n### Difference between: `function Person(){}`, `const person = Person()`, and `const person = new Person()` in JavaScript?\n\n\n\n- `function Person(){}`: A function declaration in JavaScript. It can be used as a regular function or as a constructor.\n- `const person = Person()`: Calls `Person` as a regular function, not a constructor. If `Person` is intended to be a constructor, this will lead to unexpected behavior.\n- `const person = new Person()`: Creates a new instance of `Person`, correctly utilizing the constructor function to initialize the new object.\n\n| Aspect | `function Person(){}` | `const person = Person()` | `const person = new Person()` |\n| --- | --- | --- | --- |\n| Type | Function declaration | Function call | Constructor call |\n| Usage | Defines a function | Invokes `Person` as a regular function | Creates a new instance of `Person` |\n| Instance Creation | No instance created | No instance created | New instance created |\n| Common Mistake | N/A | Misusing as constructor leading to `undefined` | None (when used correctly) |\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.mdx)\n\n \n\n### What is the definition of a higher-order function in JavaScript?\n\n\n\nA higher-order function is any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result.\n\nHigher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is `Array.prototype.map()`, which takes an array and a function as arguments. `Array.prototype.map()` then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are `Array.prototype.forEach()`, `Array.prototype.filter()`, and `Array.prototype.reduce()`. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. `Function.prototype.bind()` is an example that returns another function.\n\nImagine a scenario where we have an array of names that we need to transform to uppercase. The imperative way will be as such:\n\n```js live\nconst names = ['irish', 'daisy', 'anna'];\n\nfunction transformNamesToUppercase(names) {\n const results = [];\n for (let i = 0; i < names.length; i++) {\n results.push(names[i].toUpperCase());\n }\n return results;\n}\n\nconsole.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']\n```\n\nUsing `Array.prototype.map(transformerFn)` makes the code shorter and more declarative.\n\n```js live\nconst names = ['irish', 'daisy', 'anna'];\n\nfunction transformNamesToUppercase(names) {\n return names.map((name) => name.toUpperCase());\n}\n\nconsole.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx)\n\n \n\n### What are callback functions and how are they used?\n\n\n\nA callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. They are commonly used for asynchronous operations like handling events, making API calls, or reading files. For example:\n\n```js live\nfunction fetchData(callback) {\n // assume an asynchronous operation to fetch data\n const data = { name: 'John Doe' };\n callback(data);\n}\n\nfunction handleData(data) {\n console.log(data);\n}\n\nfetchData(handleData);\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx)\n\n \n\n### What's a typical use case for anonymous functions in JavaScript?\n\n\n\nAnonymous function in Javascript is a function that does not have any name associated with it. They are typically used as arguments to other functions or assigned to variables.\n\n```js live\nconst arr = [-1, 0, 5, 6];\n\n// The filter method is passed an anonymous function.\narr.filter((x) => x > 1); // [5, 6]\n```\n\nThey are often used as arguments to other functions, known as higher-order functions, which can take functions as input and return a function as output. Anonymous functions can access variables from the outer scope, a concept known as closures, allowing them to \"close over\" and remember the environment in which they were created.\n\n```js live\n// Encapsulating Code\n(function () {\n // Some code here.\n})();\n\n// Callbacks\nsetTimeout(function () {\n console.log('Hello world!');\n}, 1000);\n\n// Functional programming constructs\nconst arr = [1, 2, 3];\nconst double = arr.map(function (el) {\n return el * 2;\n});\nconsole.log(double); // [2, 4, 6]\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx)\n\n \n\n### What is recursion and how is it used in JavaScript?\n\n\n\nRecursion is a programming technique where a function calls itself to solve a problem. In JavaScript, recursion is used to solve problems that can be broken down into smaller, similar sub-problems. A base case is essential to stop the recursive calls and prevent infinite loops. For example, calculating the factorial of a number can be done using recursion:\n\n```js live\nfunction factorial(n) {\n if (n === 0) {\n return 1;\n }\n return n * factorial(n - 1);\n}\n\nconsole.log(factorial(4)); // Output: 24\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.mdx)\n\n \n\n### What are default parameters and how are they used?\n\n\n\nDefault parameters in JavaScript allow you to set default values for function parameters if no value or `undefined` is passed. This helps avoid `undefined` values and makes your code more robust. You can define default parameters by assigning a value to the parameter in the function definition.\n\n```js live\nfunction greet(name = 'Guest') {\n console.log(`Hello, ${name}!`);\n}\n\ngreet(); // Output: Hello, Guest!\ngreet('Alice'); // Output: Hello, Alice!\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-default-parameters-and-how-are-they-used/en-US.mdx)\n\n \n\n### Explain why the following doesn't work as an IIFE: `function foo(){}();`. What needs to be changed to properly make it an IIFE?\n\n\n\nThe code `function foo(){}();` doesn't work as an Immediately Invoked Function Expression (IIFE) because the JavaScript parser treats `function foo(){}` as a function declaration, not an expression. To make it an IIFE, you need to wrap the function in parentheses to turn it into a function expression: `(function foo(){})();`.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/en-US.mdx)\n\n \n\n### What are the various ways to create objects in JavaScript?\n\n\n\nCreating objects in JavaScript offers several methods:\n\n- **Object literals (`{}`)**: Simplest and most popular approach. Define key-value pairs within curly braces.\n- **`Object()` constructor**: Use `new Object()` with dot notation to add properties.\n- **`Object.create()`**: Create new objects using existing objects as prototypes, inheriting properties and methods.\n- **Constructor functions**: Define blueprints for objects using functions, creating instances with `new`.\n- **ES2015 classes**: Structured syntax similar to other languages, using `class` and `constructor` keywords.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-various-ways-to-create-objects-in-javascript/en-US.mdx)\n\n \n\n### Explain the difference between dot notation and bracket notation for accessing object properties\n\n\n\nDot notation and bracket notation are two ways to access properties of an object in JavaScript. Dot notation is more concise and readable but can only be used with valid JavaScript identifiers. Bracket notation is more flexible and can be used with property names that are not valid identifiers, such as those containing spaces or special characters.\n\n```js live\nconst obj = { name: 'Alice', 'favorite color': 'blue' };\n\n// Dot notation\nconsole.log(obj.name); // Alice\n\n// Bracket notation\nconsole.log(obj['favorite color']); // blue\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.mdx)\n\n \n\n### What are the different methods for iterating over an array?\n\n\n\nThere are several methods to iterate over an array in JavaScript. The most common ones include `for` loops, `forEach`, `map`, `filter`, `reduce`, and `for...of`. Each method has its own use case. For example, `for` loops are versatile and can be used for any kind of iteration, while `forEach` is specifically for executing a function on each array element. `map` is used for transforming arrays, `filter` for filtering elements, `reduce` for accumulating values, and `for...of` for iterating over iterable objects.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-different-methods-for-iterating-over-an-array/en-US.mdx)\n\n \n\n### How do you add, remove, and update elements in an array?\n\n\n\nTo add elements to an array, you can use methods like `push`, `unshift`, or `splice`. To remove elements, you can use `pop`, `shift`, or `splice`. To update elements, you can directly access the array index and assign a new value.\n\n```js live\nlet arr = [1, 2, 3];\n\n// Add elements\narr.push(4); // [1, 2, 3, 4]\narr.unshift(0); // [0, 1, 2, 3, 4]\narr.splice(2, 0, 1.5); // [0, 1, 1.5, 2, 3, 4]\n\n// Remove elements\narr.pop(); // [0, 1, 1.5, 2, 3]\narr.shift(); // [1, 1.5, 2, 3]\narr.splice(1, 1); // [1, 2, 3]\n\n// Update elements\narr[1] = 5; // [1, 5, 3]\nconsole.log(arr); // Final state: [1, 5, 3]\n```\n\n**Note**: If you try to `console.log(arr)` after each operation in some environments (like Chrome DevTools), you may only see the final state of `arr`. This happens because the console sometimes keeps a live reference to the array instead of logging its state at the exact moment. To see intermediate states properly, store snapshots using `console.log([...arr])` or print values immediately after each operation.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-do-you-add-remove-and-update-elements-in-an-array/en-US.mdx)\n\n \n\n### What are the different ways to copy an object or an array?\n\n\n\nTo copy an object or an array in JavaScript, you can use several methods. For shallow copies, you can use the spread operator (`...`) or `Object.assign()`. For deep copies, you can use `JSON.parse(JSON.stringify())` or libraries like Lodash's `_.cloneDeep()`.\n\n```js live\n// Shallow copy of an array\nconst originalArray = [1, 2, 3];\nconst shallowCopyArray = [...originalArray];\nconsole.log(shallowCopyArray); // [1, 2, 3]\n\n// Shallow copy of an object\nconst originalObject = { a: 1, b: 2 };\nconst shallowCopyObject = { ...originalObject };\nconsole.log(shallowCopyObject); // { a: 1, b: 2 };\n\n// Deep copy using JSON methods\nconst deepCopyObject = JSON.parse(JSON.stringify(originalObject));\nconsole.log(deepCopyObject); // { a: 1, b: 2 };\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.mdx)\n\n \n\n### Explain the difference between shallow copy and deep copy\n\n\n\nA shallow copy duplicates the top-level properties of an object, but nested objects are still referenced. A deep copy duplicates all levels of an object, creating entirely new instances of nested objects. For example, using `Object.assign()` creates a shallow copy, while using libraries like `Lodash` or `structuredClone()` in modern JavaScript can create deep copies.\n\n```js live\n// Shallow copy example\nlet obj1 = { a: 1, b: { c: 2 } };\nlet shallowCopy = Object.assign({}, obj1);\nshallowCopy.b.c = 3;\nconsole.log(shallowCopy.b.c); // Output: 3\nconsole.log(obj1.b.c); // Output: 3 (original nested object changed too!)\n\n// Deep copy example\nlet obj2 = { a: 1, b: { c: 2 } };\nlet deepCopy = JSON.parse(JSON.stringify(obj2));\ndeepCopy.b.c = 4;\nconsole.log(deepCopy.b.c); // Output: 4\nconsole.log(obj2.b.c); // Output: 2 (original nested object remains unchanged)\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.mdx)\n\n \n\n### What are the advantages of using the spread operator with arrays and objects?\n\n\n\nThe spread operator (`...`) in JavaScript allows you to easily copy arrays and objects, merge them, and add new elements or properties. It simplifies syntax and improves readability. For arrays, it can be used to concatenate or clone arrays. For objects, it can be used to merge objects or add new properties.\n\n```js live\n// Arrays\nconst arr1 = [1, 2, 3];\nconst arr2 = [...arr1, 4, 5];\nconsole.log(arr2); // [1, 2, 3, 4, 5]\n\n// Objects\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { ...obj1, c: 3 };\nconsole.log(obj2); // { a: 1, b: 2, c: 3 }\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.mdx)\n\n \n\n### How do you check if an object has a specific property?\n\n\n\nTo check if an object has a specific property, you can use the `in` operator or the `hasOwnProperty` method. The `in` operator checks for both own and inherited properties, while `hasOwnProperty` checks only for own properties.\n\n```js live\nconst obj = { key: 'value' };\n\n// Using the `in` operator\nif ('key' in obj) {\n console.log('Property exists');\n}\n\n// Using `hasOwnProperty`\nif (obj.hasOwnProperty('key')) {\n console.log('Property exists');\n}\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-do-you-check-if-an-object-has-a-specific-property/en-US.mdx)\n\n \n\n### Explain the difference between mutable and immutable objects in JavaScript\n\n\n\n**Mutable objects** allow for modification of properties and values after creation, which is the default behavior for most objects.\n\n```js live\nconst mutableObject = {\n name: 'John',\n age: 30,\n};\n\n// Modify the object\nmutableObject.name = 'Jane';\n\n// The object has been modified\nconsole.log(mutableObject); // Output: { name: 'Jane', age: 30 }\n```\n\n**Immutable objects** cannot be directly modified after creation. Its content cannot be changed without creating an entirely new value.\n\n```js live\nconst immutableObject = Object.freeze({\n name: 'John',\n age: 30,\n});\n\n// Attempt to modify the object\nimmutableObject.name = 'Jane';\n\n// The object remains unchanged\nconsole.log(immutableObject); // Output: { name: 'John', age: 30 }\n```\n\nThe key difference between mutable and immutable objects is modifiability. Immutable objects cannot be modified after they are created, while mutable objects can be.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx)\n\n \n\n### Explain the concept of destructuring assignment for objects and arrays\n\n\n\nDestructuring assignment is a syntax in JavaScript that allows you to unpack values from arrays or properties from objects into distinct variables. For arrays, you use square brackets, and for objects, you use curly braces. For example:\n\n```js live\n// Array destructuring\nconst [a, b] = [1, 2];\n\n// Object destructuring\nconst { name, age } = { name: 'John', age: 30 };\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.mdx)\n\n \n\n### What is `Object.freeze()` for?\n\n\n\n`Object.freeze()` is used to make an object immutable. Once an object is frozen, you cannot add, remove, or modify its properties. This is useful for creating constants or ensuring that an object remains unchanged throughout the program.\n\n```js live\nconst obj = { name: 'John' };\nObject.freeze(obj);\nobj.name = 'Doe'; // This will not change the name property\n\nconsole.log(obj); // { name: 'John' }\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-objectfreeze-for/en-US.mdx)\n\n \n\n### What is `Object.seal()` for?\n\n\n\n`Object.seal()` is used to prevent new properties from being added to an object and to mark all existing properties as non-configurable. This means you can still modify the values of existing properties, but you cannot delete them or add new ones. Doing so will throw errors in strict mode but fail silently in non-strict mode. In the following examples, you can uncomment the 'use strict' comment to see this.\n\n```js live\n// 'use strict'\n\nconst obj = { name: 'John' };\nObject.seal(obj);\n\nobj.name = 'Jane'; // Allowed\nobj.age = 30; // Not allowed, throws an error in strict mode\ndelete obj.name; // Not allowed, throws an error in strict mode\n\nconsole.log(obj); // { name: 'Jane } (unchanged)\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-objectseal-for/en-US.mdx)\n\n \n\n### What is `Object.preventExtensions()` for?\n\n\n\n`Object.preventExtensions()` is a method in JavaScript that prevents new properties from being added to an object. However, it does not affect the deletion or modification of existing properties. This method is useful when you want to ensure that an object remains in a certain shape and no additional properties can be added to it.\n\n```js live\nconst obj = { name: 'John' };\nObject.preventExtensions(obj);\n\nobj.age = 30; // This will not work, as the object is not extensible\nconsole.log(obj.age); // undefined\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-objectpreventextensions-for/en-US.mdx)\n\n \n\n### What are JavaScript object getters and setters for?\n\n\n\nJavaScript object getters and setters are used to control access to an object's properties. They provide a way to encapsulate the implementation details of a property and define custom behavior when getting or setting its value.\n\nGetters and setters are defined using the `get` and `set` keywords, respectively, followed by a function that is executed when the property is accessed or assigned a new value.\n\nHere's a code example demonstrating the use of getters and setters:\n\n```js live\nconst person = {\n _name: 'John Doe', // Private property\n\n get name() {\n // Getter\n return this._name;\n },\n set name(newName) {\n // Setter\n if (newName.trim().length > 0) {\n this._name = newName;\n } else {\n console.log('Invalid name');\n }\n },\n};\n\n// Accessing the name property using the getter\nconsole.log(person.name); // Output: 'John Doe'\n\n// Setting the name property using the setter\nperson.name = 'Jane Smith'; // Setter is called\nconsole.log(person.name); // Output: 'Jane Smith'\n\nperson.name = ''; // Setter is called, but the value is not set due to validation\nconsole.log(person.name); // Output: 'Jane Smith'\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-javascript-object-getters-and-setters-for/en-US.mdx)\n\n \n\n### What are JavaScript object property flags and descriptors?\n\n\n\nIn JavaScript, property flags and descriptors manage the behavior and attributes of object properties.\n\n**Property flags**\n\nProperty flags are used to specify the behavior of a property on an object. Here are the available flags:\n\n- `writable`: Specifies whether the property can be written to. Defaults to `true`.\n- `enumerable`: Specifies whether the property is enumerable. Defaults to `true`.\n- `configurable`: Specifies whether the property can be deleted or its attributes changed. Default is `true`.\n\n**Property descriptors**\n\nThese provide detailed information about an object's property, including its value and flags. They are retrieved using `Object.getOwnPropertyDescriptor()` and set using `Object.defineProperty()`.\n\nThe use cases of property descriptors are as follows:\n\n- Making a property non-writable by setting `writable: false` to ensure data consistency.\n- Hiding a property from enumeration by setting `enumerable: false`.\n- Preventing property deletion and modification by setting `configurable: false`.\n- Freezing or sealing objects to prevent modifications globally.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-javascript-object-property-flags-and-descriptors/en-US.mdx)\n\n \n\n### How do you reliably determine whether an object is empty?\n\n\n\nTo reliably determine whether an object is empty, you can use `Object.keys()` to check if the object has any enumerable properties. If the length of the array returned by `Object.keys()` is zero, the object is empty.\n\n```js live\nconst isEmpty = (obj) => Object.keys(obj).length === 0;\n\nconst obj = {};\nconsole.log(isEmpty(obj)); // true\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-do-you-reliably-determine-whether-an-object-is-empty/en-US.mdx)\n\n \n\n### What is the event loop in JavaScript runtimes?\n\n\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 / 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/when the call stack is empty:\n 1. Microtask queue is processed. Microtasks include promise callbacks (`then`, `catch`, `finally`), `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\nThe unfortunate truth is that it is extremely hard to explain the event loop well using only text. We recommend checking out one of the following excellent videos explaining the event loop:\n\n- [JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue](https://www.youtube.com/watch?v=eiC58R16hb8) (2024): Lydia Hallie is a popular educator on JavaScript and this is the best recent video explaining the event loop. There's also an [accompanying blog post](https://www.lydiahallie.com/blog/event-loop) for those who prefer detailed text-based explanations.\n- [In the Loop](https://www.youtube.com/watch?v=cCOL7MC4Pl0) (2018): Jake Archibald previously from the Chrome team provides a visual demonstration of the event loop during JSConf 2018, accounting for different types of tasks.\n- [What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ) (2014): Philip Robert's gave this epic talk at JSConf 2014 and it is one of the most viewed JavaScript videos on YouTube.\n\nWe recommend watching [Lydia's video](https://www.youtube.com/watch?v=eiC58R16hb8) as it is the most modern and concise explanation standing at only 13 minutes long whereas the other videos are at least 30 minutes long. Her video is sufficient for the purpose of interviews.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx)\n\n \n\n### Explain the difference between synchronous and asynchronous functions in JavaScript\n\n\n\nSynchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. As a result, programs containing only synchronous code are evaluated exactly in order of the statements. The execution of the program is paused if one of the statements take a very long time.\n\n```js live\nfunction sum(a, b) {\n console.log('Inside sum function');\n return a + b;\n}\n\nconst result = sum(2, 3); // The program waits for sum() to complete before assigning the result\nconsole.log('Result: ', result); // Output: 5\n```\n\nAsynchronous functions usually accept a callback as a parameter and execution continue on to the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).\n\n```js live\nfunction fetchData(callback) {\n setTimeout(() => {\n const data = { name: 'John', age: 30 };\n callback(data); // Calling the callback function with data\n }, 2000); // Simulating a 2-second delay\n}\n\nconsole.log('Fetching data...');\n\nfetchData((data) => {\n console.log(data); // Output: { name: 'John', age: 30 } (after 2 seconds)\n});\n\nconsole.log('Call made to fetch data'); // This will print before the data is fetched\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx)\n\n \n\n### Explain the concept of a callback function in asynchronous operations\n\n\n\nA callback function is a function passed as an argument to another function, which is then invoked inside the outer function to complete some kind of routine or action. In asynchronous operations, callbacks are used to handle tasks that take time to complete, such as network requests or file I/O, without blocking the execution of the rest of the code. For example:\n\n```js live\nfunction fetchData(callback) {\n setTimeout(() => {\n const data = { name: 'John', age: 30 };\n callback(data);\n }, 1000);\n}\n\nfetchData((data) => {\n console.log(data);\n});\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx)\n\n \n\n### What are Promises and how do they work?\n\n\n\nPromises in JavaScript are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value. They have three states: `pending`, `fulfilled`, and `rejected`. You can handle the results of a promise using the `.then()` method for success and the `.catch()` method for errors.\n\n```js live\nlet promise = new Promise((resolve, reject) => {\n // asynchronous operation\n const success = true;\n if (success) {\n resolve('Success!');\n } else {\n reject('Error!');\n }\n});\n\npromise\n .then((result) => {\n console.log(result); // 'Success!' (this will print)\n })\n .catch((error) => {\n console.error(error); // 'Error!'\n });\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-promises-and-how-do-they-work/en-US.mdx)\n\n \n\n### Explain the different states of a Promise\n\n\n\nA `Promise` in JavaScript can be in one of three states: `pending`, `fulfilled`, or `rejected`. When a `Promise` is created, it starts in the `pending` state. If the operation completes successfully, the `Promise` transitions to the `fulfilled` state, and if it fails, it transitions to the `rejected` state. Here's a quick example:\n\n```js\nlet promise = new Promise((resolve, reject) => {\n // some asynchronous operation\n if (success) {\n resolve('Success!');\n } else {\n reject('Error!');\n }\n});\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-different-states-of-a-promise/en-US.mdx)\n\n \n\n### What are the pros and cons of using Promises instead of callbacks in JavaScript?\n\n\n\nPromises offer a cleaner alternative to callbacks, helping to avoid callback hell and making asynchronous code more readable. They facilitate writing sequential and parallel asynchronous operations with ease. However, using promises may introduce slightly more complex code.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx)\n\n \n\n### What is the use of `Promise.all()`\n\n\n\n`Promise.all()` is a method in JavaScript that takes an array of promises and returns a single promise. This returned promise resolves when all the input promises have resolved, or it rejects if any of the input promises reject. It is useful for running multiple asynchronous operations in parallel and waiting for all of them to complete.\n\n```js live\nconst promise1 = Promise.resolve(3);\nconst promise2 = 42;\nconst promise3 = new Promise((resolve, reject) => {\n setTimeout(resolve, 100, 'foo');\n});\n\nPromise.all([promise1, promise2, promise3]).then((values) => {\n console.log(values); // [3, 42, 'foo']\n});\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-use-of-promiseall/en-US.mdx)\n\n \n\n### How is `Promise.all()` different from `Promise.allSettled()`?\n\n\n\n`Promise.all()` and `Promise.allSettled()` are both methods for handling multiple promises in JavaScript, but they behave differently. `Promise.all()` waits for all promises to resolve and fails fast if any promise rejects, returning a single rejected promise. `Promise.allSettled()`, on the other hand, waits for all promises to settle (either resolve or reject) and returns an array of objects describing the outcome of each promise.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-is-promiseall-different-from-promiseallsettled/en-US.mdx)\n\n \n\n### What is async/await and how does it simplify asynchronous code?\n\n\n\n`async/await` is a modern syntax in JavaScript that simplifies working with promises. By using the `async` keyword before a function, you can use the `await` keyword inside that function to pause execution until a promise is resolved. This makes asynchronous code look and behave more like synchronous code, making it easier to read and maintain.\n\n```js live\nasync function fetchData() {\n try {\n const response = await fetch(\n 'https://jsonplaceholder.typicode.com/posts/1',\n );\n const data = await response.json();\n console.log(data);\n } catch (error) {\n console.error('Error fetching data:', error);\n }\n}\nfetchData();\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.mdx)\n\n \n\n### How do you handle errors in asynchronous operations?\n\n\n\nTo handle errors in asynchronous operations, you can use `try...catch` blocks with `async/await` syntax or `.catch()` method with Promises. For example, with `async/await`, you can wrap your code in a `try...catch` block to catch any errors:\n\n```js live\nasync function fetchData() {\n try {\n // Invalid URl\n const response = await fetch('https://api.example.com/data');\n const data = await response.json();\n console.log(data);\n } catch (error) {\n console.error('Error fetching data:', error);\n }\n}\n\nfetchData(); // Error fetching data: ....\n```\n\nWith Promises, you can use the `.catch()` method:\n\n```js live\nfetch('https://api.example.com/data') // Invalid URl\n .then((response) => response.json())\n .then((data) => console.log(data))\n .catch((error) => console.error('Error fetching data:', error));\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx)\n\n \n\n### Explain the concept of a microtask queue\n\n\n\nThe microtask queue is a queue of tasks that need to be executed after the currently executing script and before any other task. Microtasks are typically used for tasks that need to be executed immediately after the current operation, such as promise callbacks. The microtask queue is processed before the macrotask queue, ensuring that microtasks are executed as soon as possible.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-concept-of-a-microtask-queue/en-US.mdx)\n\n \n\n### What is the difference between `setTimeout()`, `setImmediate()`, and `process.nextTick()`?\n\n\n\n`setTimeout()` schedules a callback to run after a minimum delay. `setImmediate()` schedules a callback to run after the current event loop completes. `process.nextTick()` schedules a callback to run before the next event loop iteration begins.\n\n```js\nsetTimeout(() => console.log('setTimeout'), 0);\nsetImmediate(() => console.log('setImmediate'));\nprocess.nextTick(() => console.log('nextTick'));\n```\n\nIn this example, `process.nextTick()` will execute first, followed by either `setTimeout()` or `setImmediate()` depending on the environment.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.mdx)\n\n \n\n### Explain how prototypal inheritance works in JavaScript\n\n\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://davidwalsh.name/javascript-objects).\n\nHere's an example of prototypal inheritance:\n\n```js live\n// Parent object constructor.\nfunction Animal(name) {\n this.name = name;\n}\n\n// 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// Child object constructor.\nfunction Dog(name) {\n Animal.call(this, name); // Call the parent constructor.\n}\n\n// Set the child object's prototype to be the parent's prototype.\nObject.setPrototypeOf(Dog.prototype, Animal.prototype);\n\n// Add a method to the child object's prototype.\nDog.prototype.bark = function () {\n console.log('Woof!');\n};\n\n// Create a new instance of Dog.\nconst bolt = new Dog('Bolt');\n\n// Call methods on the child object.\nconsole.log(bolt.name); // \"Bolt\"\nbolt.makeSound(); // \"The Dog makes a sound.\"\nbolt.bark(); // \"Woof!\"\n```\n\nThings to note are:\n\n- `.makeSound` is not defined on `Dog`, so the JavaScript engine goes up the prototype chain and finds `.makeSound` on the inherited `Animal`.\n- Using `Object.create()` to build the inheritance chain is no longer recommended. Use `Object.setPrototypeOf()` instead.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-how-prototypal-inheritance-works/en-US.mdx)\n\n \n\n### What is the prototype chain and how does it work?\n\n\n\nThe prototype chain is a mechanism in JavaScript that allows objects to inherit properties and methods from other objects. When you try to access a property on an object, JavaScript will first look for the property on the object itself. If it doesn't find it, it will look at the object's prototype, and then the prototype's prototype, and so on, until it either finds the property or reaches the end of the chain, which is `null`.\n\n```js live\nfunction Person(name) {\n this.name = name;\n}\n\nPerson.prototype.greet = function () {\n console.log(`Hello, my name is ${this.name}`);\n};\n\nconst alice = new Person('Alice');\nalice.greet(); // \"Hello, my name is Alice\"\n```\n\nIn this example, `alice` inherits the `greet` method from `Person.prototype`.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-prototype-chain-and-how-does-it-work/en-US.mdx)\n\n \n\n### Explain the difference between classical inheritance and prototypal inheritance\n\n\n\nClassical inheritance is a model where classes inherit from other classes, typically seen in languages like Java and C++. Prototypal inheritance, used in JavaScript, involves objects inheriting directly from other objects. In classical inheritance, you define a class and create instances from it. In prototypal inheritance, you create an object and use it as a prototype for other objects.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.mdx)\n\n \n\n### Explain the concept of inheritance in ES2015 classes\n\n\n\nInheritance in ES2015 classes allows one class to extend another, enabling the child class to inherit properties and methods from the parent class. This is done using the `extends` keyword. The `super` keyword is used to call the constructor and methods of the parent class. Here's a quick example:\n\n```js live\nclass Animal {\n constructor(name) {\n this.name = name;\n }\n\n speak() {\n console.log(`${this.name} makes a noise.`);\n }\n}\n\nclass Dog extends Animal {\n constructor(name, breed) {\n super(name);\n this.breed = breed;\n }\n\n speak() {\n console.log(`${this.name} barks.`);\n }\n}\n\nconst dog = new Dog('Rex', 'German Shepherd');\ndog.speak(); // Rex barks.\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.mdx)\n\n \n\n### What is the purpose of the `new` keyword?\n\n\n\nThe `new` keyword in JavaScript is used to create an instance of a user-defined object type or one of the built-in object types that has a constructor function. When you use `new`, it does four things: it creates a new object, sets the prototype, binds `this` to the new object, and returns the new object.\n\n```js live\nfunction Person(name) {\n this.name = name;\n}\n\nconst person1 = new Person('Alice');\nconsole.log(person1.name); // Alice\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-purpose-of-the-new-keyword/en-US.mdx)\n\n \n\n### How do you create a constructor function?\n\n\n\nTo create a constructor function in JavaScript, define a regular function with a capitalized name to indicate it's a constructor. Use the `this` keyword to set properties and methods. When creating an instance, use the `new` keyword.\n\n```js live\nfunction Person(name, age) {\n this.name = name;\n this.age = age;\n}\n\nconst john = new Person('John', 30);\nconsole.log(john.age); // 30\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-do-you-create-a-constructor-function/en-US.mdx)\n\n \n\n### What are the differences between JavaScript ES2015 classes and ES5 function constructors?\n\n\n\nES2015 introduces a new way of creating classes, which provides a more intuitive and concise way to define and work with objects and inheritance compared to the ES5 function constructor syntax. Here's an example of each:\n\n```js\n// ES5 function constructor\nfunction Person(name) {\n this.name = name;\n}\n\n// ES2015 Class\nclass Person {\n constructor(name) {\n this.name = name;\n }\n}\n```\n\nFor simple constructors, they look pretty similar. The main difference in the constructor comes when using inheritance. If we want to create a `Student` class that subclasses `Person` and add a `studentId` field, this is what we have to do.\n\n```js live\n// ES5 inheritance\n// Superclass\nfunction Person1(name) {\n this.name = name;\n}\n\n// Subclass\nfunction Student1(name, studentId) {\n // Call constructor of superclass to initialize superclass-derived members.\n Person1.call(this, name);\n\n // Initialize subclass's own members.\n this.studentId = studentId;\n}\nStudent1.prototype = Object.create(Person1.prototype);\nStudent1.prototype.constructor = Student1;\n\nconst student1 = new Student1('John', 1234);\nconsole.log(student1.name, student1.studentId); // \"John\" 1234\n\n// ES2015 inheritance\n// Superclass\nclass Person2 {\n constructor(name) {\n this.name = name;\n }\n}\n\n// Subclass\nclass Student2 extends Person2 {\n constructor(name, studentId) {\n super(name);\n this.studentId = studentId;\n }\n}\n\nconst student2 = new Student2('Alice', 5678);\nconsole.log(student2.name, student2.studentId); // \"Alice\" 5678\n```\n\nIt's much more verbose to use inheritance in ES5 and the ES2015 version is easier to understand and remember.\n\n**Comparison of ES5 function constructors vs ES2015 classes**\n\n| Feature | ES5 Function Constructor | ES2015 Class |\n| --- | --- | --- |\n| Syntax | Uses function constructors and prototypes | Uses `class` keyword |\n| Constructor | Function with properties assigned using `this` | `constructor` method inside the class |\n| Method Definition | Defined on the prototype | Defined inside the class body |\n| Static Methods | Added directly to the constructor function | Defined using the `static` keyword |\n| Inheritance | Uses `Object.create()` and manually sets prototype chain | Uses `extends` keyword and `super` function |\n| Readability | Less intuitive and more verbose | More concise and intuitive |\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx)\n\n \n\n### What advantage is there for using the JavaScript arrow syntax for a method in a constructor?\n\n\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 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(); // John\njohn.sayName2(); // John\n\n// The regular function can have its `this` value changed, but the arrow function cannot\njohn.sayName1.call(dave); // Dave (because `this` is now the dave object)\njohn.sayName2.call(dave); // John\n\njohn.sayName1.apply(dave); // Dave (because `this` is now the dave object)\njohn.sayName2.apply(dave); // John\n\njohn.sayName1.bind(dave)(); // Dave (because `this` is now the dave object)\njohn.sayName2.bind(dave)(); // John\n\nconst sayNameFromWindow1 = john.sayName1;\nsayNameFromWindow1(); // undefined (because `this` is now the window object)\n\nconst sayNameFromWindow2 = john.sayName2;\nsayNameFromWindow2(); // 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\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx)\n\n \n\n### Why might you want to create static class members in JavaScript?\n\n\n\nStatic class members (properties/methods) has a `static` keyword prepended. Such members cannot be directly accessed on instances of the class. Instead, they're accessed on the class itself.\n\n```js live\nclass Car {\n static noOfWheels = 4;\n static compare() {\n return 'Static method has been called.';\n }\n}\n\nconsole.log(Car.noOfWheels); // 4\n```\n\nStatic members are useful under the following scenarios:\n\n- **Namespace organization**: Static properties can be used to define constants or configuration values that are specific to a class. This helps organize related data within the class namespace and prevents naming conflicts with other variables. Examples include `Math.PI`, `Math.SQRT2`.\n- **Helper functions**: Static methods can be used as helper functions that operate on the class itself or its instances. This can improve code readability and maintainability by separating utility logic from the core functionality of the class. Examples of frequently used static methods include `Object.assign()`, `Math.max()`.\n- **Singleton pattern**: In some rare cases, static properties and methods can be used to implement a singleton pattern, where only one instance of a class ever exists. However, this pattern can be tricky to manage and is generally discouraged in favor of more modern dependency injection techniques.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/why-you-might-want-to-create-static-class-members/en-US.mdx)\n\n \n\n### What is a closure in JavaScript, and how/why would you use one?\n\n\n\nIn the book [\"You Don't Know JS\"](https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures) (YDKJS) by Kyle Simpson, a closure is defined as follows:\n\n> Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope\n\nIn simple terms, functions have access to variables that were in their scope at the time of their creation. This is what we call the function's lexical scope. A closure is a function that retains access to these variables even after the outer function has finished executing. This is like the function has a memory of its original environment.\n\n```js live\nfunction outerFunction() {\n const outerVar = 'I am outside of innerFunction';\n\n function innerFunction() {\n console.log(outerVar); // `innerFunction` can still access `outerVar`.\n }\n\n return innerFunction;\n}\n\nconst inner = outerFunction(); // `inner` now holds a reference to `innerFunction`.\n\ninner(); // \"I am outside of innerFunction\"\n// Even though `outerFunction` has completed execution, `inner` still has access to variables defined inside `outerFunction`.\n```\n\nKey points to remember:\n\n- Closure occurs when an inner function has access to variables in its outer (lexical) scope, even when the outer function has finished executing.\n- Closure allows a function to **remember** the environment in which it was created, even if that environment is no longer present.\n- Closures are used extensively in JavaScript, such as in callbacks, event handlers, and asynchronous functions.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx)\n\n \n\n### Explain the concept of lexical scoping\n\n\n\nLexical scoping means that the scope of a variable is determined by its location within the source code, and nested functions have access to variables declared in their outer scope. For example:\n\n```js live\nfunction outerFunction() {\n let outerVariable = 'I am outside!';\n\n function innerFunction() {\n console.log(outerVariable); // 'I am outside!'\n }\n\n innerFunction();\n}\n\nouterFunction();\n```\n\nIn this example, `innerFunction` can access `outerVariable` because of lexical scoping.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-concept-of-lexical-scoping/en-US.mdx)\n\n \n\n### Explain the concept of scope in JavaScript\n\n\n\nIn JavaScript, scope determines the accessibility of variables and functions at different parts of the code. There are three main types of scope: global scope, function scope, and block scope. Global scope means the variable is accessible everywhere in the code. Function scope means the variable is accessible only within the function it is declared. Block scope, introduced with ES6, means the variable is accessible only within the block (e.g., within curly braces `{}`) it is declared.\n\n```js live\nvar globalVar = 'I am a global var';\n\nfunction myFunction() {\n var functionVar = 'I am a function-scoped var';\n\n if (true) {\n let blockVar = 'I am a block-scoped var';\n\n console.log('Inside block:');\n console.log(globalVar); // Accessible\n console.log(functionVar); // Accessible\n console.log(blockVar); // Accessible\n }\n\n console.log('Inside function:');\n console.log(globalVar); // Accessible\n console.log(functionVar); // Accessible\n // console.log(blockVar); // Uncaught ReferenceError\n}\n\nmyFunction();\n\nconsole.log('In global scope:');\nconsole.log(globalVar); // Accessible\n// console.log(functionVar); // Uncaught ReferenceError\n// console.log(blockVar); // Uncaught ReferenceError\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-concept-of-scope-in-javascript/en-US.mdx)\n\n \n\n### How can closures be used to create private variables?\n\n\n\nClosures in JavaScript can be used to create private variables by defining a function within another function. The inner function has access to the outer function's variables, but those variables are not accessible from outside the outer function. This allows you to encapsulate and protect the variables from being accessed or modified directly.\n\n```js live\nfunction createCounter() {\n let count = 0; // private variable\n\n return {\n increment: function () {\n count++;\n return count;\n },\n decrement: function () {\n count--;\n return count;\n },\n getCount: function () {\n return count;\n },\n };\n}\n\nconst counter = createCounter();\nconsole.log(counter.increment()); // 1\nconsole.log(counter.getCount()); // 1\nconsole.log(counter.count); // undefined\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-can-closures-be-used-to-create-private-variables/en-US.mdx)\n\n \n\n### What are the potential pitfalls of using closures?\n\n\n\nClosures can lead to memory leaks if not managed properly, especially when they capture variables that are no longer needed. They can also make debugging more difficult due to the complexity of the scope chain. Additionally, closures can cause performance issues if they are overused or used inappropriately, as they keep references to variables in their scope, which can prevent garbage collection.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-potential-pitfalls-of-using-closures/en-US.mdx)\n\n \n\n### Explain the difference between global scope, function scope, and block scope\n\n\n\nGlobal scope means variables are accessible from anywhere in the code. Function scope means variables are accessible only within the function they are declared in. Block scope means variables are accessible only within the block (e.g., within `{}`) they are declared in.\n\n```js live\nvar globalVar = \"I'm global\"; // Global scope\n\nfunction myFunction() {\n var functionVar = \"I'm in a function\"; // Function scope\n if (true) {\n let blockVar = \"I'm in a block\"; // Block scope\n console.log(blockVar); // Accessible here\n }\n // console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined\n}\n// console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined\nmyFunction();\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.mdx)\n\n \n\n### Explain how `this` works in JavaScript\n\n\n\nThere's no simple explanation for `this`; it is one of the most confusing concepts in JavaScript because it's 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/create 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://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3).\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-how-this-works-in-javascript/en-US.mdx)\n\n \n\n### Explain `Function.prototype.bind` in JavaScript\n\n\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. It's 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\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-function-prototype-bind/en-US.mdx)\n\n \n\n### Explain the different ways the `this` keyword can be bound\n\n\n\nThe `this` keyword in JavaScript can be bound in several ways:\n\n- Default binding: In non-strict mode, `this` refers to the global object (window in browsers). In strict mode, `this` is `undefined`.\n- Implicit binding: When a function is called as a method of an object, `this` refers to the object.\n- Explicit binding: Using `call`, `apply`, or `bind` methods to explicitly set `this`.\n- New binding: When a function is used as a constructor with the `new` keyword, `this` refers to the newly created object.\n- Arrow functions: Arrow functions do not have their own `this` and inherit `this` from the surrounding lexical context.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.mdx)\n\n \n\n### What are the common pitfalls of using the `this` keyword?\n\n\n\nThe `this` keyword in JavaScript can be tricky because its value depends on how a function is called. Common pitfalls include losing the context of `this` when passing methods as callbacks, using `this` in nested functions, and misunderstanding `this` in arrow functions. To avoid these issues, you can use `.bind()`, arrow functions, or store the context in a variable.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.mdx)\n\n \n\n### Explain the concept of `this` binding in event handlers\n\n\n\nIn JavaScript, the `this` keyword refers to the object that is currently executing the code. In event handlers, `this` typically refers to the element that triggered the event. However, the value of `this` can change depending on how the event handler is defined and called. To ensure `this` refers to the desired object, you can use methods like `bind()`, arrow functions, or assign the context explicitly.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.mdx)\n\n \n\n### What is the DOM and how is it structured?\n\n\n\nThe DOM, or Document Object Model, is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM is structured as a tree of objects, where each node represents part of the document, such as elements, attributes, and text.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-dom-and-how-is-it-structured/en-US.mdx)\n\n \n\n### What's the difference between an \"attribute\" and a \"property\" in the DOM?\n\n\n\nAttributes are defined in the HTML and provide initial values for properties. Properties are part of the DOM and represent the current state of an element. For example, the `value` attribute of an `` element sets its initial value, while the `value` property reflects the current value as the user interacts with it.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/whats-the-difference-between-an-attribute-and-a-property/en-US.mdx)\n\n \n\n### Explain the difference between `document.querySelector()` and `document.getElementById()`\n\n\n\n`document.querySelector()` and `document.getElementById()` are both methods used to select elements from the DOM, but they have key differences. `document.querySelector()` can select any element using a CSS selector and returns the first match, while `document.getElementById()` selects an element by its ID and returns the element with that specific ID.\n\n```js\n// Using document.querySelector()\nconst element = document.querySelector('.my-class');\n\n// Using document.getElementById()\nconst elementById = document.getElementById('my-id');\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/en-US.mdx)\n\n \n\n### How do you add, remove, and modify HTML elements using JavaScript?\n\n\n\nTo add, remove, and modify HTML elements using JavaScript, you can use methods like `createElement`, `appendChild`, `removeChild`, and properties like `innerHTML` and `textContent`. For example, to add an element, you can create it using `document.createElement` and then append it to a parent element using `appendChild`. To remove an element, you can use `removeChild` on its parent. To modify an element, you can change its `innerHTML` or `textContent`.\n\n```js\n// Adding an element\nconst newElement = document.createElement('div');\nnewElement.textContent = 'Hello, World!';\ndocument.body.appendChild(newElement);\n\n// Removing an element\nconst elementToRemove = document.getElementById('elementId');\nelementToRemove.parentNode.removeChild(elementToRemove);\n\n// Modifying an element\nconst elementToModify = document.getElementById('elementId');\nelementToModify.innerHTML = 'New Content';\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.mdx)\n\n \n\n### What are event listeners and how are they used?\n\n\n\nEvent listeners are functions that wait for specific events to occur on elements, such as clicks or key presses. They are used to execute code in response to these events. You can add an event listener to an element using the `addEventListener` method. For example:\n\n```js\ndocument.getElementById('myButton').addEventListener('click', function () {\n alert('Button was clicked!');\n});\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-event-listeners-and-how-are-they-used/en-US.mdx)\n\n \n\n### Explain the event phases in a browser\n\n\n\nIn a browser, events go through three phases: capturing, target, and bubbling. During the capturing phase, the event travels from the root to the target element. In the target phase, the event reaches the target element. Finally, in the bubbling phase, the event travels back up from the target element to the root. You can control event handling using `addEventListener` with the `capture` option.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-event-phases-in-a-browser/en-US.mdx)\n\n \n\n### Describe event bubbling in JavaScript and browsers\n\n\n\nEvent bubbling is a DOM event propagation mechanism where an event (e.g. a click), starts at the target element and bubbles up to the root of the document. This allows ancestor elements to also respond to the event.\n\nEvent bubbling is essential for event delegation, where a single event handler manages events for multiple child elements, enhancing performance and code simplicity. While convenient, failing to manage event propagation properly can lead to unintended behavior, such as multiple handlers firing for a single event.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/describe-event-bubbling/en-US.mdx)\n\n \n\n### Describe event capturing in JavaScript and browsers\n\n\n\nEvent capturing is a lesser-used counterpart to [event bubbling](https://www.greatfrontend.com/questions/quiz/describe-event-bubbling) in the DOM event propagation mechanism. It follows the opposite order, where an event triggers first on the ancestor element and then travels down to the target element.\n\nEvent capturing is rarely used as compared to event bubbling, but it can be used in specific scenarios where you need to intercept events at a higher level before they reach the target element. It is disabled by default but can be enabled through an option on `addEventListener()`.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/describe-event-capturing/en-US.mdx)\n\n \n\n### Explain event delegation in JavaScript\n\n\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\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-event-delegation/en-US.mdx)\n\n \n\n### How do you prevent the default behavior of an event?\n\n\n\nTo prevent the default behavior of an event in JavaScript, you can use the `preventDefault` method on the event object. For example, if you want to prevent a form from submitting, you can do the following:\n\n```js\ndocument.querySelector('form').addEventListener('submit', function (event) {\n event.preventDefault();\n});\n```\n\nThis method stops the default action associated with the event from occurring.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-do-you-prevent-the-default-behavior-of-an-event/en-US.mdx)\n\n \n\n### What is the difference between `event.preventDefault()` and `event.stopPropagation()`?\n\n\n\n`event.preventDefault()` is used to prevent the default action that belongs to the event, such as preventing a form from submitting. `event.stopPropagation()` is used to stop the event from bubbling up to parent elements, preventing any parent event handlers from being executed.\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/en-US.mdx)\n\n \n\n### What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?\n\n\n\nThe main difference lies in the bubbling behavior of `mouseenter` and `mouseover` events. `mouseenter` does not bubble while `mouseover` bubbles.\n\n`mouseenter` events do not bubble. The `mouseenter` event is triggered only when the mouse pointer enters the element itself, not its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the `mouseenter` event will not be triggered on the parent element again, it's only triggered once upon entry of parent element without regard for its contents. If both parent and child have `mouseenter` listeners attached and the mouse pointer moves from the parent element to the child element, `mouseenter` will only fire for the child.\n\n`mouseover` events bubble up the DOM tree. The `mouseover` event is triggered when the mouse pointer enters the element or one of its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the `mouseover` event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, `mouseover` will fire for both the parent and the child.\n\n| Property | `mouseenter` | `mouseover` |\n| --- | --- | --- |\n| Bubbling | No | Yes |\n| Trigger | Only when entering itself | When entering itself and when entering descendants |\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx)\n\n \n\n### What is the difference between `innerHTML` and `textContent`?\n\n\n\n`innerHTML` and `textContent` are both properties used to get or set the content of an HTML element, but they serve different purposes. `innerHTML` returns or sets the HTML markup contained within the element, which means it can parse and render HTML tags. On the other hand, `textContent` returns or sets the text content of the element, ignoring any HTML tags and rendering them as plain text.\n\n```js\n// Example of innerHTML\nelement.innerHTML = 'Bold Text'; // Renders as bold text\n\n// Example of textContent\nelement.textContent = 'Bold Text'; // Renders as plain text: Bold Text\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-difference-between-innerhtml-and-textcontent/en-US.mdx)\n\n \n\n### How do you manipulate CSS styles using JavaScript?\n\n\n\nYou can manipulate CSS styles using JavaScript by accessing the `style` property of an HTML element. For example, to change the background color of a `div` element with the id `myDiv`, you can use:\n\n```js\ndocument.getElementById('myDiv').style.backgroundColor = 'blue';\n```\n\nYou can also add, remove, or toggle CSS classes using the `classList` property:\n\n```js\ndocument.getElementById('myDiv').classList.add('newClass');\ndocument.getElementById('myDiv').classList.remove('oldClass');\ndocument.getElementById('myDiv').classList.toggle('toggleClass');\n```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-do-you-manipulate-css-styles-using-javascript/en-US.mdx)\n\n \n\n### Describe the difference between `\n ```\n\n\n\n \n \n[Back to top ↑](#table-of-contents-all-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-javascript-polyfills-for/en-US.mdx)\n\n \n\n### How do you detect if JavaScript is disabled on a page?\n\n\n\nTo detect if JavaScript is disabled on a page, you can use the `
![\"GreatFrontEnd](\"./images/greatfrontend-js-banner4x.png\")
\n \n