Showing preview only (2,201K chars total). Download the full file or copy to clipboard to get everything.
Repository: greatfrontend/top-javascript-interview-questions
Branch: main
Commit: 85a7c27cc2a5
Files: 833
Total size: 1.9 MB
Directory structure:
gitextract_d8pnkcyw/
├── .github/
│ └── workflows/
│ └── gen-toc.yml
├── .gitignore
├── .prettierignore
├── .prettierrc
├── README.md
├── __template__/
│ ├── concise/
│ │ ├── en-US.mdx
│ │ └── metadata.json
│ └── detailed/
│ ├── en-US.mdx
│ └── metadata.json
├── data/
│ └── questions.json
├── langnostic.config.ts
├── package.json
├── pnpm-workspace.yaml
├── questions/
│ ├── can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── describe-event-bubbling/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── describe-event-capturing/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── describe-the-difference-between-script-async-and-script-defer/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── difference-between-document-load-event-and-document-domcontentloaded-event/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── difference-between-function-person-var-person-person-and-var-person-new-person/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-ajax-in-as-much-detail-as-possible/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-event-delegation/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-function-prototype-bind/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-hoisting/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-how-jsonp-works-and-how-its-not-really-ajax/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-how-prototypal-inheritance-works/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-how-this-works-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-a-callback-function-in-asynchronous-operations/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-a-microtask-queue/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-debouncing-and-throttling/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-error-propagation-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-hoisting-with-regards-to-functions/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-inheritance-in-es2015-classes/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-input-validation-and-its-importance-in-security/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-lexical-scoping/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-partial-application/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-scope-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-tagged-templates/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-test-driven-development-tdd/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-the-prototype-pattern/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-the-singleton-pattern/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-the-spread-operator-and-its-uses/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-the-strategy-pattern/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-the-web-socket-api/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-this-binding-in-event-handlers/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-tree-shaking-in-module-bundling/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-global-scope-function-scope-and-block-scope/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-mutable-and-immutable-objects/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-shallow-copy-and-deep-copy/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-synchronous-and-asynchronous-functions/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-in-hoisting-between-var-let-and-const/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-differences-between-commonjs-modules-and-es-modules/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-the-different-states-of-a-promise/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-different-ways-the-this-keyword-can-be-bound/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-event-phases-in-a-browser/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-observer-pattern-and-its-use-cases/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-same-origin-policy-with-regards-to-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── how-can-closures-be-used-to-create-private-variables/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-avoid-problems-related-to-hoisting/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-create-custom-error-objects/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-optimize-dom-manipulation-for-better-performance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-optimize-network-requests-for-better-performance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-prevent-clickjacking-attacks/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-share-code-between-files/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── how-can-you-test-asynchronous-code-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-currying-and-partial-application-differ-from-each-other/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-iframe-on-a-page-communicate/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-sets-and-maps-handle-equality-checks-for-objects/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-abort-a-web-request-using-abortcontrollers/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-add-remove-and-modify-html-elements-using-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-add-remove-and-update-elements-in-an-array/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-check-if-an-object-has-a-specific-property/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-check-the-data-type-of-a-variable/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-convert-a-set-to-an-array-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-convert-a-string-to-a-number-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-create-a-constructor-function/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-detect-if-javascript-is-disabled-on-a-page/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-handle-errors-in-asynchronous-operations/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-handle-errors-using-trycatch-blocks/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-import-and-export-modules-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-make-an-http-request-using-the-fetch-api/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-manipulate-css-styles-using-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-organize-your-code-module-pattern-classical-inheritance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── how-do-you-prevent-the-default-behavior-of-an-event/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-redirect-to-a-new-page-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-reliably-determine-whether-an-object-is-empty/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-use-windowhistory-api/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-validate-form-elements-using-the-constraint-validation-api/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-write-unit-tests-for-javascript-code/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-does-hoisting-affect-function-declarations-and-expressions/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-does-javascript-garbage-collection-work/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-is-promiseall-different-from-promiseallsettled/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── provide-some-examples-of-how-currying-and-partial-application-can-be-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-are-callback-functions-and-how-are-they-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-default-parameters-and-how-are-they-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-design-patterns-and-why-are-they-useful/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-event-listeners-and-how-are-they-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-iterators-and-generators-and-what-are-they-used-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-javascript-object-getters-and-setters-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-javascript-object-property-flags-and-descriptors/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-javascript-polyfills-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-mocks-and-stubs-and-how-are-they-used-in-testing/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-modules-and-why-are-they-useful/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-progressive-web-applications-pwas/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-promises-and-how-do-they-work/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-proxies-in-javascript-used-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-rest-parameters-and-how-are-they-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-server-sent-events/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-sets-and-maps-and-how-are-they-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-best-practices-for-handling-sensitive-data-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-best-practices-for-writing-maintainable-and-effective-tests/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-common-performance-bottlenecks-in-javascript-applications/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-common-security-headers-and-their-purpose/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-are-some-popular-javascript-testing-frameworks/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-techniques-for-reducing-reflows-and-repaints/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-tools-that-can-be-used-for-javascript-testing/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-symbols-used-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-template-literals-and-how-are-they-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-advantages-and-disadvantages-of-using-ajax/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-benefits-of-using-a-module-bundler/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-benefits-of-using-currying-and-partial-application/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-are-the-common-pitfalls-of-using-the-this-keyword/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-differences-between-es6-class-and-es5-function-constructors/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-are-the-differences-between-map-set-and-weakmap-weakset/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-differences-between-variables-created-using-let-var-or-const/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-are-the-differences-between-xmlhttprequest-and-fetch/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-different-methods-for-iterating-over-an-array/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-different-types-of-errors-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-different-types-of-testing-in-software-development/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-different-ways-to-copy-an-object-or-an-array/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-different-ways-to-make-an-api-call-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-metadata-fields-of-a-module/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-potential-issues-caused-by-hoisting/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-potential-pitfalls-of-using-closures/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-are-the-various-data-types-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-various-ways-to-create-objects-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-web-workers-and-how-can-they-be-used-to-improve-performance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-workers-in-javascript-used-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-do-you-think-of-amd-vs-commonjs/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-is-a-closure-and-how-why-would-you-use-one/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-currying-and-how-does-it-work/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-is-objectfreeze-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-objectpreventextensions-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-objectseal-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-recursion-and-how-is-it-used-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-command-pattern-and-how-is-it-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-decorator-pattern-and-how-is-it-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-definition-of-a-higher-order-function/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-a-parameter-and-an-argument/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-double-equal-and-triple-equal/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-innerhtml-and-textcontent/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-mouseenter-and-mouseover-event/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-the-window-object-and-the-document-object/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-dom-and-how-is-it-structured/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-factory-pattern-and-how-is-it-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-intl-namespace-object-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-prototype-chain-and-how-does-it-work/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-purpose-of-the-break-and-continue-statements/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-purpose-of-the-finally-block/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-purpose-of-the-new-keyword/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-purpose-of-the-switch-statement/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-spread-operator-and-how-is-it-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-ternary-operator-and-how-is-it-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-use-of-promiseall/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-tools-and-techniques-do-you-use-for-debugging-javascript-code/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── whats-a-typical-use-case-for-anonymous-functions/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── 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.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── whats-the-difference-between-an-attribute-and-a-property/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── whats-the-difference-between-call-and-apply/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── when-would-you-use-document-write/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── why-is-extending-built-in-javascript-objects-not-a-good-idea/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ └── why-you-might-want-to-create-static-class-members/
│ ├── en-US.langnostic.json
│ ├── en-US.mdx
│ ├── metadata.json
│ ├── pt-BR.mdx
│ └── zh-CN.mdx
└── scripts/
├── constants.ts
├── gen.ts
├── rank.ts
└── types.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/workflows/gen-toc.yml
================================================
name: Generate table of contents
on:
pull_request:
push:
branches:
- main
jobs:
gen-toc:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
with:
ref: ${{ github.head_ref }}
- name: Install pnpm
uses: pnpm/action-setup@v2
- name: Install dependencies
run: pnpm install
- name: Generate table of contents
run: npm run gen
- name: 'Commit changes if required'
run: |
if ! git diff --quiet README.md; then
git config user.email "github-actions[bot]@users.noreply.github.com"
git config user.name "GitHub Actions"
git add README.md
git commit -m "[auto] regenerate table of contents"
git push
echo "[info] Table of contents updated and committed."
else
echo "[info] No changes to table of contents."
fi
working-directory: ${{ github.workspace }}
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
.cache
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
# Translations
.langnostic
================================================
FILE: .prettierignore
================================================
README.md
================================================
FILE: .prettierrc
================================================
{
"bracketSameLine": true,
"printWidth": 80,
"proseWrap": "never",
"singleQuote": true,
"trailingComma": "all"
}
================================================
FILE: README.md
================================================
# Top JavaScript Interview Questions (Updated for 2025)
**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).
The questions are divided into two sections:
1. [**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.
2. [**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.
3. [**Questions by difficulty**](#questions-by-difficulty): Questions categorized by difficulty – basic, intermediate, advanced.
---
<div>
<p align="center">
<a href="https://www.greatfrontend.com/questions/javascript-interview-questions?utm_source=github&utm_medium=referral&utm_campaign=top-js-qns&gnrs=yangshun">
<img src="./images/greatfrontend-js-banner4x.png" alt="GreatFrontEnd JavaScript Interview Questions" width="100%">
</a>
</p>
</div>
> 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) 💡
---
## Table of Contents (Top Questions)
This 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.
<!-- TABLE_OF_CONTENTS:TOP:START -->
| No. | Questions | Level |
| --- | :-- | :-- |
| 1 | [Explain the concept of "hoisting" in JavaScript](#explain-the-concept-of-hoisting-in-javascript) | Basic |
| 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 |
| 3 | [What is the difference between `==` and `===` in JavaScript?](#what-is-the-difference-between--and--in-javascript) | Basic |
| 4 | [What is the event loop in JavaScript runtimes?](#what-is-the-event-loop-in-javascript-runtimes) | Basic |
| 5 | [Explain event delegation in JavaScript](#explain-event-delegation-in-javascript) | Basic |
| 6 | [Explain how `this` works in JavaScript](#explain-how-this-works-in-javascript) | Basic |
| 7 | [Describe the difference between a cookie, `sessionStorage` and `localStorage` in browsers](#describe-the-difference-between-a-cookie-sessionstorage-and-localstorage-in-browsers) | Basic |
| 8 | [Describe the difference between `<script>`, `<script async>` and `<script defer>`](#describe-the-difference-between-script-script-async-and-script-defer) | Basic |
| 9 | [What's the difference between a JavaScript variable that is: `null`, `undefined` or undeclared?](#whats-the-difference-between-a-javascript-variable-that-is-null-undefined-or-undeclared) | Basic |
| 10 | [What's the difference between `.call` and `.apply` in JavaScript?](#whats-the-difference-between-call-and-apply-in-javascript) | Basic |
| 11 | [Explain `Function.prototype.bind` in JavaScript](#explain-functionprototypebind-in-javascript) | Basic |
| 12 | [What advantage is there for using the JavaScript arrow syntax for a method in a constructor?](#what-advantage-is-there-for-using-the-javascript-arrow-syntax-for-a-method-in-a-constructor) | Basic |
| 13 | [Explain how prototypal inheritance works in JavaScript](#explain-how-prototypal-inheritance-works-in-javascript) | Basic |
| 14 | [Difference between: `function Person(){}`, `const person = Person()`, and `const person = new Person()` in JavaScript?](#difference-between-function-person-const-person--person-and-const-person--new-person-in-javascript) | Basic |
| 15 | [Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}` in JavaScript](#explain-the-differences-on-the-usage-of-foo-between-function-foo--and-var-foo--function--in-javascript) | Basic |
| 16 | [What's a typical use case for anonymous functions in JavaScript?](#whats-a-typical-use-case-for-anonymous-functions-in-javascript) | Intermediate |
| 17 | [What are the various ways to create objects in JavaScript?](#what-are-the-various-ways-to-create-objects-in-javascript) | Basic |
| 18 | [What is a closure in JavaScript, and how/why would you use one?](#what-is-a-closure-in-javascript-and-howwhy-would-you-use-one) | Intermediate |
| 19 | [What is the definition of a higher-order function in JavaScript?](#what-is-the-definition-of-a-higher-order-function-in-javascript) | Basic |
| 20 | [What are the differences between JavaScript ES2015 classes and ES5 function constructors?](#what-are-the-differences-between-javascript-es2015-classes-and-es5-function-constructors) | Basic |
| 21 | [Describe event bubbling in JavaScript and browsers](#describe-event-bubbling-in-javascript-and-browsers) | Basic |
| 22 | [Describe event capturing in JavaScript and browsers](#describe-event-capturing-in-javascript-and-browsers) | Basic |
| 23 | [What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?](#what-is-the-difference-between-mouseenter-and-mouseover-event-in-javascript-and-browsers) | Basic |
| 24 | [What is `'use strict';` in JavaScript for?](#what-is-use-strict-in-javascript-for) | Advanced |
| 25 | [Explain the difference between synchronous and asynchronous functions in JavaScript](#explain-the-difference-between-synchronous-and-asynchronous-functions-in-javascript) | Basic |
| 26 | [What are the pros and cons of using Promises instead of callbacks in JavaScript?](#what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks-in-javascript) | Intermediate |
| 27 | [Explain AJAX in as much detail as possible](#explain-ajax-in-as-much-detail-as-possible) | Basic |
| 28 | [What are the advantages and disadvantages of using AJAX?](#what-are-the-advantages-and-disadvantages-of-using-ajax) | Basic |
| 29 | [What are the differences between `XMLHttpRequest` and `fetch()` in JavaScript and browsers?](#what-are-the-differences-between-xmlhttprequest-and-fetch-in-javascript-and-browsers) | Basic |
| 30 | [How do you abort a web request using `AbortController` in JavaScript?](#how-do-you-abort-a-web-request-using-abortcontroller-in-javascript) | Intermediate |
| 31 | [What are JavaScript polyfills for?](#what-are-javascript-polyfills-for) | Advanced |
| 32 | [Why is extending built-in JavaScript objects not a good idea?](#why-is-extending-built-in-javascript-objects-not-a-good-idea) | Intermediate |
| 33 | [Why is it, in general, a good idea to leave the global JavaScript scope of a website as-is and never touch it?](#why-is-it-in-general-a-good-idea-to-leave-the-global-javascript-scope-of-a-website-as-is-and-never-touch-it) | Intermediate |
| 34 | [Explain the differences between CommonJS modules and ES modules in JavaScript](#explain-the-differences-between-commonjs-modules-and-es-modules-in-javascript) | Intermediate |
| 35 | [What are the various data types in JavaScript?](#what-are-the-various-data-types-in-javascript) | Basic |
| 36 | [What language constructs do you use for iterating over object properties and array items in JavaScript?](#what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items-in-javascript) | Basic |
| 37 | [What are the benefits of using spread syntax in JavaScript and how is it different from rest syntax?](#what-are-the-benefits-of-using-spread-syntax-in-javascript-and-how-is-it-different-from-rest-syntax) | Basic |
| 38 | [What are iterators and generators in JavaScript and what are they used for?](#what-are-iterators-and-generators-in-javascript-and-what-are-they-used-for) | Advanced |
| 39 | [Explain the difference between mutable and immutable objects in JavaScript](#explain-the-difference-between-mutable-and-immutable-objects-in-javascript) | Intermediate |
| 40 | [What is the difference between a `Map` object and a plain object in JavaScript?](#what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript) | Basic |
| 41 | [What are the differences between `Map`/`Set` and `WeakMap`/`WeakSet` in JavaScript?](#what-are-the-differences-between-mapset-and-weakmapweakset-in-javascript) | Basic |
| 42 | [Why might you want to create static class members in JavaScript?](#why-might-you-want-to-create-static-class-members-in-javascript) | Intermediate |
| 43 | [What are `Symbol`s used for in JavaScript?](#what-are-symbols-used-for-in-javascript) | Intermediate |
| 44 | [What are server-sent events?](#what-are-server-sent-events) | Advanced |
| 45 | [What are JavaScript object property flags and descriptors?](#what-are-javascript-object-property-flags-and-descriptors) | Advanced |
| 46 | [What are JavaScript object getters and setters for?](#what-are-javascript-object-getters-and-setters-for) | Intermediate |
| 47 | [What are proxies in JavaScript used for?](#what-are-proxies-in-javascript-used-for) | Advanced |
| 48 | [What tools and techniques do you use for debugging JavaScript code?](#what-tools-and-techniques-do-you-use-for-debugging-javascript-code) | Intermediate |
| 49 | [What are workers in JavaScript used for?](#what-are-workers-in-javascript-used-for) | Advanced |
| 50 | [How does JavaScript garbage collection work?](#how-does-javascript-garbage-collection-work) | Advanced |
<!-- TABLE_OF_CONTENTS:TOP:END -->
## Table of Contents (All Questions)
This list contains a longer list of important JavaScript questions. Not all of them will be asked during Front End Engineer interviews but they provide a well-rounded review of JavaScript concepts ranging from beginner to advanced topics.
<!-- TABLE_OF_CONTENTS:ALL:START -->
| No. | Questions | Level |
| --- | :-- | :-- |
| 1 | [What are the various data types in JavaScript?](#what-are-the-various-data-types-in-javascript) | Basic |
| 2 | [How do you check the data type of a variable?](#how-do-you-check-the-data-type-of-a-variable) | Basic |
| 3 | [What's the difference between a JavaScript variable that is: `null`, `undefined` or undeclared?](#whats-the-difference-between-a-javascript-variable-that-is-null-undefined-or-undeclared) | Basic |
| 4 | [What are the differences between JavaScript variables created using `let`, `var` or `const`?](#what-are-the-differences-between-javascript-variables-created-using-let-var-or-const) | Basic |
| 5 | [Why is it, in general, a good idea to leave the global JavaScript scope of a website as-is and never touch it?](#why-is-it-in-general-a-good-idea-to-leave-the-global-javascript-scope-of-a-website-as-is-and-never-touch-it) | Intermediate |
| 6 | [How do you convert a string to a number in JavaScript?](#how-do-you-convert-a-string-to-a-number-in-javascript) | Basic |
| 7 | [What are template literals and how are they used?](#what-are-template-literals-and-how-are-they-used) | Basic |
| 8 | [Explain the concept of tagged templates](#explain-the-concept-of-tagged-templates) | Intermediate |
| 9 | [What is the spread operator and how is it used?](#what-is-the-spread-operator-and-how-is-it-used) | Basic |
| 10 | [What are `Symbol`s used for in JavaScript?](#what-are-symbols-used-for-in-javascript) | Intermediate |
| 11 | [What are proxies in JavaScript used for?](#what-are-proxies-in-javascript-used-for) | Advanced |
| 12 | [Explain the concept of "hoisting" in JavaScript](#explain-the-concept-of-hoisting-in-javascript) | Basic |
| 13 | [Explain the difference in hoisting between `var`, `let`, and `const`](#explain-the-difference-in-hoisting-between-var-let-and-const) | Basic |
| 14 | [How does hoisting affect function declarations and expressions?](#how-does-hoisting-affect-function-declarations-and-expressions) | Advanced |
| 15 | [What are the potential issues caused by hoisting?](#what-are-the-potential-issues-caused-by-hoisting) | Intermediate |
| 16 | [How can you avoid problems related to hoisting?](#how-can-you-avoid-problems-related-to-hoisting) | Basic |
| 17 | [What is the difference between `==` and `===` in JavaScript?](#what-is-the-difference-between--and--in-javascript) | Basic |
| 18 | [What language constructs do you use for iterating over object properties and array items in JavaScript?](#what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items-in-javascript) | Basic |
| 19 | [What is the purpose of the `break` and `continue` statements?](#what-is-the-purpose-of-the-break-and-continue-statements) | Basic |
| 20 | [What is the ternary operator and how is it used?](#what-is-the-ternary-operator-and-how-is-it-used) | Basic |
| 21 | [How do you access the index of an element in an array during iteration?](#how-do-you-access-the-index-of-an-element-in-an-array-during-iteration) | Basic |
| 22 | [What is the purpose of the `switch` statement?](#what-is-the-purpose-of-the-switch-statement) | Basic |
| 23 | [What are rest parameters and how are they used?](#what-are-rest-parameters-and-how-are-they-used) | Basic |
| 24 | [Explain the concept of the spread operator and its uses](#explain-the-concept-of-the-spread-operator-and-its-uses) | Basic |
| 25 | [What are the benefits of using spread syntax in JavaScript and how is it different from rest syntax?](#what-are-the-benefits-of-using-spread-syntax-in-javascript-and-how-is-it-different-from-rest-syntax) | Basic |
| 26 | [What are iterators and generators in JavaScript and what are they used for?](#what-are-iterators-and-generators-in-javascript-and-what-are-they-used-for) | Advanced |
| 27 | [Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}` in JavaScript](#explain-the-differences-on-the-usage-of-foo-between-function-foo--and-var-foo--function--in-javascript) | Basic |
| 28 | [What is the difference between a parameter and an argument?](#what-is-the-difference-between-a-parameter-and-an-argument) | Basic |
| 29 | [Explain the concept of hoisting with regards to functions](#explain-the-concept-of-hoisting-with-regards-to-functions) | Basic |
| 30 | [What's the difference between `.call` and `.apply` in JavaScript?](#whats-the-difference-between-call-and-apply-in-javascript) | Basic |
| 31 | [Can you offer a use case for the new arrow => function syntax?](#can-you-offer-a-use-case-for-the-new-arrow--function-syntax) | Basic |
| 32 | [Difference between: `function Person(){}`, `const person = Person()`, and `const person = new Person()` in JavaScript?](#difference-between-function-person-const-person--person-and-const-person--new-person-in-javascript) | Basic |
| 33 | [What is the definition of a higher-order function in JavaScript?](#what-is-the-definition-of-a-higher-order-function-in-javascript) | Basic |
| 34 | [What are callback functions and how are they used?](#what-are-callback-functions-and-how-are-they-used) | Basic |
| 35 | [What's a typical use case for anonymous functions in JavaScript?](#whats-a-typical-use-case-for-anonymous-functions-in-javascript) | Intermediate |
| 36 | [What is recursion and how is it used in JavaScript?](#what-is-recursion-and-how-is-it-used-in-javascript) | Basic |
| 37 | [What are default parameters and how are they used?](#what-are-default-parameters-and-how-are-they-used) | Basic |
| 38 | [Explain why the following doesn't work as an IIFE: `function foo(){}();`. What needs to be changed to properly make it an IIFE?](#explain-why-the-following-doesnt-work-as-an-iife-function-foo-what-needs-to-be-changed-to-properly-make-it-an-iife) | Advanced |
| 39 | [What are the various ways to create objects in JavaScript?](#what-are-the-various-ways-to-create-objects-in-javascript) | Basic |
| 40 | [Explain the difference between dot notation and bracket notation for accessing object properties](#explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties) | Basic |
| 41 | [What are the different methods for iterating over an array?](#what-are-the-different-methods-for-iterating-over-an-array) | Basic |
| 42 | [How do you add, remove, and update elements in an array?](#how-do-you-add-remove-and-update-elements-in-an-array) | Basic |
| 43 | [What are the different ways to copy an object or an array?](#what-are-the-different-ways-to-copy-an-object-or-an-array) | Basic |
| 44 | [Explain the difference between shallow copy and deep copy](#explain-the-difference-between-shallow-copy-and-deep-copy) | Basic |
| 45 | [What are the advantages of using the spread operator with arrays and objects?](#what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects) | Basic |
| 46 | [How do you check if an object has a specific property?](#how-do-you-check-if-an-object-has-a-specific-property) | Basic |
| 47 | [Explain the difference between mutable and immutable objects in JavaScript](#explain-the-difference-between-mutable-and-immutable-objects-in-javascript) | Intermediate |
| 48 | [Explain the concept of destructuring assignment for objects and arrays](#explain-the-concept-of-destructuring-assignment-for-objects-and-arrays) | Basic |
| 49 | [What is `Object.freeze()` for?](#what-is-objectfreeze-for) | Intermediate |
| 50 | [What is `Object.seal()` for?](#what-is-objectseal-for) | Intermediate |
| 51 | [What is `Object.preventExtensions()` for?](#what-is-objectpreventextensions-for) | Intermediate |
| 52 | [What are JavaScript object getters and setters for?](#what-are-javascript-object-getters-and-setters-for) | Intermediate |
| 53 | [What are JavaScript object property flags and descriptors?](#what-are-javascript-object-property-flags-and-descriptors) | Advanced |
| 54 | [How do you reliably determine whether an object is empty?](#how-do-you-reliably-determine-whether-an-object-is-empty) | Basic |
| 55 | [What is the event loop in JavaScript runtimes?](#what-is-the-event-loop-in-javascript-runtimes) | Basic |
| 56 | [Explain the difference between synchronous and asynchronous functions in JavaScript](#explain-the-difference-between-synchronous-and-asynchronous-functions-in-javascript) | Basic |
| 57 | [Explain the concept of a callback function in asynchronous operations](#explain-the-concept-of-a-callback-function-in-asynchronous-operations) | Basic |
| 58 | [What are Promises and how do they work?](#what-are-promises-and-how-do-they-work) | Basic |
| 59 | [Explain the different states of a Promise](#explain-the-different-states-of-a-promise) | Intermediate |
| 60 | [What are the pros and cons of using Promises instead of callbacks in JavaScript?](#what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks-in-javascript) | Intermediate |
| 61 | [What is the use of `Promise.all()`](#what-is-the-use-of-promiseall) | Basic |
| 62 | [How is `Promise.all()` different from `Promise.allSettled()`?](#how-is-promiseall-different-from-promiseallsettled) | Intermediate |
| 63 | [What is async/await and how does it simplify asynchronous code?](#what-is-asyncawait-and-how-does-it-simplify-asynchronous-code) | Intermediate |
| 64 | [How do you handle errors in asynchronous operations?](#how-do-you-handle-errors-in-asynchronous-operations) | Basic |
| 65 | [Explain the concept of a microtask queue](#explain-the-concept-of-a-microtask-queue) | Intermediate |
| 66 | [What is the difference between `setTimeout()`, `setImmediate()`, and `process.nextTick()`?](#what-is-the-difference-between-settimeout-setimmediate-and-processnexttick) | Intermediate |
| 67 | [Explain how prototypal inheritance works in JavaScript](#explain-how-prototypal-inheritance-works-in-javascript) | Basic |
| 68 | [What is the prototype chain and how does it work?](#what-is-the-prototype-chain-and-how-does-it-work) | Intermediate |
| 69 | [Explain the difference between classical inheritance and prototypal inheritance](#explain-the-difference-between-classical-inheritance-and-prototypal-inheritance) | Basic |
| 70 | [Explain the concept of inheritance in ES2015 classes](#explain-the-concept-of-inheritance-in-es2015-classes) | Basic |
| 71 | [What is the purpose of the `new` keyword?](#what-is-the-purpose-of-the-new-keyword) | Basic |
| 72 | [How do you create a constructor function?](#how-do-you-create-a-constructor-function) | Basic |
| 73 | [What are the differences between JavaScript ES2015 classes and ES5 function constructors?](#what-are-the-differences-between-javascript-es2015-classes-and-es5-function-constructors) | Basic |
| 74 | [What advantage is there for using the JavaScript arrow syntax for a method in a constructor?](#what-advantage-is-there-for-using-the-javascript-arrow-syntax-for-a-method-in-a-constructor) | Basic |
| 75 | [Why might you want to create static class members in JavaScript?](#why-might-you-want-to-create-static-class-members-in-javascript) | Intermediate |
| 76 | [What is a closure in JavaScript, and how/why would you use one?](#what-is-a-closure-in-javascript-and-howwhy-would-you-use-one) | Intermediate |
| 77 | [Explain the concept of lexical scoping](#explain-the-concept-of-lexical-scoping) | Basic |
| 78 | [Explain the concept of scope in JavaScript](#explain-the-concept-of-scope-in-javascript) | Basic |
| 79 | [How can closures be used to create private variables?](#how-can-closures-be-used-to-create-private-variables) | Basic |
| 80 | [What are the potential pitfalls of using closures?](#what-are-the-potential-pitfalls-of-using-closures) | Intermediate |
| 81 | [Explain the difference between global scope, function scope, and block scope](#explain-the-difference-between-global-scope-function-scope-and-block-scope) | Basic |
| 82 | [Explain how `this` works in JavaScript](#explain-how-this-works-in-javascript) | Basic |
| 83 | [Explain `Function.prototype.bind` in JavaScript](#explain-functionprototypebind-in-javascript) | Basic |
| 84 | [Explain the different ways the `this` keyword can be bound](#explain-the-different-ways-the-this-keyword-can-be-bound) | Intermediate |
| 85 | [What are the common pitfalls of using the `this` keyword?](#what-are-the-common-pitfalls-of-using-the-this-keyword) | Basic |
| 86 | [Explain the concept of `this` binding in event handlers](#explain-the-concept-of-this-binding-in-event-handlers) | Basic |
| 87 | [What is the DOM and how is it structured?](#what-is-the-dom-and-how-is-it-structured) | Basic |
| 88 | [What's the difference between an "attribute" and a "property" in the DOM?](#whats-the-difference-between-an-attribute-and-a-property-in-the-dom) | Intermediate |
| 89 | [Explain the difference between `document.querySelector()` and `document.getElementById()`](#explain-the-difference-between-documentqueryselector-and-documentgetelementbyid) | Basic |
| 90 | [How do you add, remove, and modify HTML elements using JavaScript?](#how-do-you-add-remove-and-modify-html-elements-using-javascript) | Basic |
| 91 | [What are event listeners and how are they used?](#what-are-event-listeners-and-how-are-they-used) | Basic |
| 92 | [Explain the event phases in a browser](#explain-the-event-phases-in-a-browser) | Intermediate |
| 93 | [Describe event bubbling in JavaScript and browsers](#describe-event-bubbling-in-javascript-and-browsers) | Basic |
| 94 | [Describe event capturing in JavaScript and browsers](#describe-event-capturing-in-javascript-and-browsers) | Basic |
| 95 | [Explain event delegation in JavaScript](#explain-event-delegation-in-javascript) | Basic |
| 96 | [How do you prevent the default behavior of an event?](#how-do-you-prevent-the-default-behavior-of-an-event) | Basic |
| 97 | [What is the difference between `event.preventDefault()` and `event.stopPropagation()`?](#what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation) | Intermediate |
| 98 | [What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?](#what-is-the-difference-between-mouseenter-and-mouseover-event-in-javascript-and-browsers) | Basic |
| 99 | [What is the difference between `innerHTML` and `textContent`?](#what-is-the-difference-between-innerhtml-and-textcontent) | Intermediate |
| 100 | [How do you manipulate CSS styles using JavaScript?](#how-do-you-manipulate-css-styles-using-javascript) | Basic |
| 101 | [Describe the difference between `<script>`, `<script async>` and `<script defer>`](#describe-the-difference-between-script-script-async-and-script-defer) | Basic |
| 102 | [What is the difference between the Window object and the Document object?](#what-is-the-difference-between-the-window-object-and-the-document-object) | Intermediate |
| 103 | [Describe the difference between a cookie, `sessionStorage` and `localStorage` in browsers](#describe-the-difference-between-a-cookie-sessionstorage-and-localstorage-in-browsers) | Basic |
| 104 | [How do you make an HTTP request using the Fetch API?](#how-do-you-make-an-http-request-using-the-fetch-api) | Basic |
| 105 | [What are the different ways to make an API call in JavaScript?](#what-are-the-different-ways-to-make-an-api-call-in-javascript) | Basic |
| 106 | [Explain AJAX in as much detail as possible](#explain-ajax-in-as-much-detail-as-possible) | Basic |
| 107 | [What are the advantages and disadvantages of using AJAX?](#what-are-the-advantages-and-disadvantages-of-using-ajax) | Basic |
| 108 | [What are the differences between `XMLHttpRequest` and `fetch()` in JavaScript and browsers?](#what-are-the-differences-between-xmlhttprequest-and-fetch-in-javascript-and-browsers) | Basic |
| 109 | [How do you abort a web request using `AbortController` in JavaScript?](#how-do-you-abort-a-web-request-using-abortcontroller-in-javascript) | Intermediate |
| 110 | [Explain how JSONP works (and how it's not really Ajax)](#explain-how-jsonp-works-and-how-its-not-really-ajax) | Intermediate |
| 111 | [What are workers in JavaScript used for?](#what-are-workers-in-javascript-used-for) | Advanced |
| 112 | [Explain the concept of the Web Socket API](#explain-the-concept-of-the-web-socket-api) | Intermediate |
| 113 | [What are JavaScript polyfills for?](#what-are-javascript-polyfills-for) | Advanced |
| 114 | [How do you detect if JavaScript is disabled on a page?](#how-do-you-detect-if-javascript-is-disabled-on-a-page) | Intermediate |
| 115 | [What is the `Intl` namespace object for?](#what-is-the-intl-namespace-object-for) | Intermediate |
| 116 | [How do you validate form elements using the Constraint Validation API?](#how-do-you-validate-form-elements-using-the-constraint-validation-api) | Advanced |
| 117 | [How do you use `window.history` API?](#how-do-you-use-windowhistory-api) | Basic |
| 118 | [How do `<iframe>` on a page communicate?](#how-do-iframe-on-a-page-communicate) | Intermediate |
| 119 | [Difference between document `load` event and document `DOMContentLoaded` event?](#difference-between-document-load-event-and-document-domcontentloaded-event) | Intermediate |
| 120 | [How do you redirect to a new page in JavaScript?](#how-do-you-redirect-to-a-new-page-in-javascript) | Basic |
| 121 | [How do you get the query string values of the current page in JavaScript?](#how-do-you-get-the-query-string-values-of-the-current-page-in-javascript) | Basic |
| 122 | [What are server-sent events?](#what-are-server-sent-events) | Advanced |
| 123 | [What are Progressive Web Applications (PWAs)?](#what-are-progressive-web-applications-pwas) | Intermediate |
| 124 | [What are modules and why are they useful?](#what-are-modules-and-why-are-they-useful) | Basic |
| 125 | [Explain the differences between CommonJS modules and ES modules in JavaScript](#explain-the-differences-between-commonjs-modules-and-es-modules-in-javascript) | Intermediate |
| 126 | [How do you import and export modules in JavaScript?](#how-do-you-import-and-export-modules-in-javascript) | Basic |
| 127 | [What are the benefits of using a module bundler?](#what-are-the-benefits-of-using-a-module-bundler) | Intermediate |
| 128 | [Explain the concept of tree shaking in module bundling](#explain-the-concept-of-tree-shaking-in-module-bundling) | Intermediate |
| 129 | [What are the metadata fields of a module?](#what-are-the-metadata-fields-of-a-module) | Intermediate |
| 130 | [What do you think of CommonJS vs ESM?](#what-do-you-think-of-commonjs-vs-esm) | Basic |
| 131 | [What are the different types of errors in JavaScript?](#what-are-the-different-types-of-errors-in-javascript) | Intermediate |
| 132 | [How do you handle errors using `try...catch` blocks?](#how-do-you-handle-errors-using-trycatch-blocks) | Basic |
| 133 | [What is the purpose of the `finally` block?](#what-is-the-purpose-of-the-finally-block) | Basic |
| 134 | [How can you create custom error objects?](#how-can-you-create-custom-error-objects) | Intermediate |
| 135 | [Explain the concept of error propagation in JavaScript](#explain-the-concept-of-error-propagation-in-javascript) | Intermediate |
| 136 | [What is currying and how does it work?](#what-is-currying-and-how-does-it-work) | Intermediate |
| 137 | [Explain the concept of partial application](#explain-the-concept-of-partial-application) | Intermediate |
| 138 | [What are the benefits of using currying and partial application?](#what-are-the-benefits-of-using-currying-and-partial-application) | Intermediate |
| 139 | [Provide some examples of how currying and partial application can be used](#provide-some-examples-of-how-currying-and-partial-application-can-be-used) | Basic |
| 140 | [How do currying and partial application differ from each other?](#how-do-currying-and-partial-application-differ-from-each-other) | Intermediate |
| 141 | [What are `Set`s and `Map`s and how are they used?](#what-are-sets-and-maps-and-how-are-they-used) | Basic |
| 142 | [What are the differences between `Map`/`Set` and `WeakMap`/`WeakSet` in JavaScript?](#what-are-the-differences-between-mapset-and-weakmapweakset-in-javascript) | Basic |
| 143 | [How do you convert a `Set` to an array in JavaScript?](#how-do-you-convert-a-set-to-an-array-in-javascript) | Basic |
| 144 | [What is the difference between a `Map` object and a plain object in JavaScript?](#what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript) | Basic |
| 145 | [How do `Set`s and `Map`s handle equality checks for objects?](#how-do-sets-and-maps-handle-equality-checks-for-objects) | Basic |
| 146 | [What are some common performance bottlenecks in JavaScript applications?](#what-are-some-common-performance-bottlenecks-in-javascript-applications) | Intermediate |
| 147 | [Explain the concept of debouncing and throttling](#explain-the-concept-of-debouncing-and-throttling) | Basic |
| 148 | [How can you optimize DOM manipulation for better performance?](#how-can-you-optimize-dom-manipulation-for-better-performance) | Advanced |
| 149 | [What are some techniques for reducing reflows and repaints?](#what-are-some-techniques-for-reducing-reflows-and-repaints) | Advanced |
| 150 | [Explain the concept of lazy loading and how it can improve performance](#explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance) | Basic |
| 151 | [What are Web Workers and how can they be used to improve performance?](#what-are-web-workers-and-how-can-they-be-used-to-improve-performance) | Advanced |
| 152 | [Explain the concept of caching and how it can be used to improve performance](#explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance) | Basic |
| 153 | [What are some tools that can be used to measure and analyze JavaScript performance?](#what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance) | Advanced |
| 154 | [How can you optimize network requests for better performance?](#how-can-you-optimize-network-requests-for-better-performance) | Advanced |
| 155 | [What are the different types of testing in software development?](#what-are-the-different-types-of-testing-in-software-development) | Intermediate |
| 156 | [Explain the difference between unit testing, integration testing, and end-to-end testing](#explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing) | Intermediate |
| 157 | [What are some popular JavaScript testing frameworks?](#what-are-some-popular-javascript-testing-frameworks) | Basic |
| 158 | [How do you write unit tests for JavaScript code?](#how-do-you-write-unit-tests-for-javascript-code) | Intermediate |
| 159 | [Explain the concept of test-driven development (TDD)](#explain-the-concept-of-test-driven-development-tdd) | Intermediate |
| 160 | [What are mocks and stubs and how are they used in testing?](#what-are-mocks-and-stubs-and-how-are-they-used-in-testing) | Advanced |
| 161 | [How can you test asynchronous code in JavaScript?](#how-can-you-test-asynchronous-code-in-javascript) | Intermediate |
| 162 | [What are some best practices for writing maintainable and effective tests in JavaScript?](#what-are-some-best-practices-for-writing-maintainable-and-effective-tests-in-javascript) | Intermediate |
| 163 | [Explain the concept of code coverage and how it can be used to assess test quality](#explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality) | Intermediate |
| 164 | [What are some tools that can be used for JavaScript testing?](#what-are-some-tools-that-can-be-used-for-javascript-testing) | Basic |
| 165 | [What are design patterns and why are they useful?](#what-are-design-patterns-and-why-are-they-useful) | Basic |
| 166 | [Explain the concept of the Singleton pattern](#explain-the-concept-of-the-singleton-pattern) | Basic |
| 167 | [What is the Factory pattern and how is it used?](#what-is-the-factory-pattern-and-how-is-it-used) | Intermediate |
| 168 | [Explain the Observer pattern and its use cases](#explain-the-observer-pattern-and-its-use-cases) | Intermediate |
| 169 | [What is the Module pattern and how does it help with encapsulation?](#what-is-the-module-pattern-and-how-does-it-help-with-encapsulation) | Intermediate |
| 170 | [Explain the concept of the Prototype pattern](#explain-the-concept-of-the-prototype-pattern) | Basic |
| 171 | [What is the Decorator pattern and how is it used?](#what-is-the-decorator-pattern-and-how-is-it-used) | Intermediate |
| 172 | [Explain the concept of the Strategy pattern](#explain-the-concept-of-the-strategy-pattern) | Intermediate |
| 173 | [What is the Command pattern and how is it used?](#what-is-the-command-pattern-and-how-is-it-used) | Intermediate |
| 174 | [Why is extending built-in JavaScript objects not a good idea?](#why-is-extending-built-in-javascript-objects-not-a-good-idea) | Intermediate |
| 175 | [What is Cross-Site Scripting (XSS) and how can you prevent it?](#what-is-cross-site-scripting-xss-and-how-can-you-prevent-it) | Intermediate |
| 176 | [Explain the concept of Cross-Site Request Forgery (CSRF) and its mitigation techniques](#explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques) | Intermediate |
| 177 | [How can you prevent SQL injection vulnerabilities in JavaScript applications?](#how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications) | Intermediate |
| 178 | [What are some best practices for handling sensitive data in JavaScript?](#what-are-some-best-practices-for-handling-sensitive-data-in-javascript) | Intermediate |
| 179 | [Explain the concept of Content Security Policy (CSP) and how it enhances security](#explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security) | Intermediate |
| 180 | [What are some common security headers and their purpose?](#what-are-some-common-security-headers-and-their-purpose) | Intermediate |
| 181 | [How can you prevent clickjacking attacks?](#how-can-you-prevent-clickjacking-attacks) | Advanced |
| 182 | [Explain the concept of input validation and its importance in security](#explain-the-concept-of-input-validation-and-its-importance-in-security) | Intermediate |
| 183 | [What are some tools and techniques for identifying security vulnerabilities in JavaScript code?](#what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code) | Intermediate |
| 184 | [How can you implement secure authentication and authorization in JavaScript applications?](#how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications) | Advanced |
| 185 | [Explain the same-origin policy with regards to JavaScript](#explain-the-same-origin-policy-with-regards-to-javascript) | Intermediate |
| 186 | [What is `'use strict';` in JavaScript for?](#what-is-use-strict-in-javascript-for) | Advanced |
| 187 | [What tools and techniques do you use for debugging JavaScript code?](#what-tools-and-techniques-do-you-use-for-debugging-javascript-code) | Intermediate |
| 188 | [How does JavaScript garbage collection work?](#how-does-javascript-garbage-collection-work) | Advanced |
| 189 | [Explain what a single page app is and how to make one SEO-friendly](#explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly) | Intermediate |
| 190 | [How can you share code between JavaScript files?](#how-can-you-share-code-between-javascript-files) | Basic |
| 191 | [How do you organize your code?](#how-do-you-organize-your-code) | Intermediate |
| 192 | [What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?](#what-are-some-of-the-advantagesdisadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript) | Advanced |
| 193 | [When would you use `document.write()`?](#when-would-you-use-documentwrite) | Advanced |
<!-- TABLE_OF_CONTENTS:ALL:END -->
## Top Questions with Answers
<!-- QUESTIONS:TOP:START -->
### Explain the concept of "hoisting" in JavaScript
<!-- Update here: /questions/explain-hoisting/en-US.mdx -->
Hoisting is a JavaScript mechanism where variable and function declarations are moved ("hoisted") to the top of their containing scope during the compile phase.
- **Variable declarations (`var`)**: Declarations are hoisted, but not initializations. The value of the variable is `undefined` if accessed before initialization.
- **Variable declarations (`let` and `const`)**: Declarations are hoisted, but not initialized. Accessing them results in `ReferenceError` until the actual declaration is encountered.
- **Function expressions (`var`)**: Declarations are hoisted, but not initializations. The value of the variable is `undefined` if accessed before initialization.
- **Function declarations (`function`)**: Both declaration and definition are fully hoisted.
- **Class declarations (`class`)**: Declarations are hoisted, but not initialized. Accessing them results in `ReferenceError` until the actual declaration is encountered.
- **Import declarations (`import`)**: Declarations are hoisted, and side effects of importing the module are executed before the rest of the code.
The following behavior summarizes the result of accessing the variables before they are declared.
| Declaration | Accessing before declaration |
| ------------------------------ | ---------------------------- |
| `var foo` | `undefined` |
| `let foo` | `ReferenceError` |
| `const foo` | `ReferenceError` |
| `class Foo` | `ReferenceError` |
| `var foo = function() { ... }` | `undefined` |
| `function foo() { ... }` | Normal |
| `import` | Normal |
<!-- Update here: /questions/explain-hoisting/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-hoisting?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-hoisting/en-US.mdx)
<br>
### What are the differences between JavaScript variables created using `let`, `var` or `const`?
<!-- Update here: /questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx -->
In 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:
| Behavior | `var` | `let` | `const` |
| --- | --- | --- | --- |
| Scope | Function or Global | Block | Block |
| Initialization | Optional | Optional | Required |
| Redeclaration | Yes | No | No |
| Reassignment | Yes | Yes | No |
| Accessing before declaration | `undefined` | `ReferenceError` | `ReferenceError` |
<!-- Update here: /questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[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-variables-created-using-let-var-or-const/en-US.mdx)
<br>
### What is the difference between `==` and `===` in JavaScript?
<!-- Update here: /questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx -->
`==` 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`.
| Operator | `==` | `===` |
| --- | --- | --- |
| Name | (Loose) Equality operator | Strict equality operator |
| Type coercion | Yes | No |
| Compares value and type | No | Yes |
<!-- Update here: /questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[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-double-equal-and-triple-equal/en-US.mdx)
<br>
### What is the event loop in JavaScript runtimes?
<!-- Update here: /questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx -->
The event loop is a concept within the JavaScript runtime environment regarding how asynchronous operations are executed within JavaScript engines. It works as such:
1. The JavaScript engine starts executing scripts, placing synchronous operations on the call stack.
2. 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.
3. 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.
4. The event loop continuously monitors the call stack and executes items on the call stack. If/when the call stack is empty:
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.
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!
1. If the microtask queue is non-empty, process them as per the previous step.
2. If the microtask queue is empty, the next macrotask queue callback is processed. This repeats until the macrotask queue is empty.
5. This process continues indefinitely, allowing the JavaScript engine to handle both synchronous and asynchronous operations efficiently without blocking the call stack.
The 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:
- [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.
- [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.
- [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.
We 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.
<!-- Update here: /questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-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)
<br>
### Explain event delegation in JavaScript
<!-- Update here: /questions/explain-event-delegation/en-US.mdx -->
Event 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.
Event delegation provides the following benefits:
- **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.
- **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.
- **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
However, do note that:
- It is important to identify the target element that triggered the event.
- Not all events can be delegated because they are not bubbled. Non-bubbling events include: `focus`, `blur`, `scroll`, `mouseenter`, `mouseleave`, `resize`, etc.
<!-- Update here: /questions/explain-event-delegation/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-event-delegation?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-event-delegation/en-US.mdx)
<br>
### Explain how `this` works in JavaScript
<!-- Update here: /questions/explain-how-this-works-in-javascript/en-US.mdx -->
There'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.
A longer explanation is that `this` follows these rules:
1. 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.
2. If `this` is used in a `class` `constructor`, the `this` inside the `constructor` is the newly-created object instance.
3. 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.
4. If a function is called as a method (e.g. `obj.method()`) — `this` is the object that the function is a property of.
5. 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.
6. If multiple of the above rules apply, the rule that is higher wins and will set the `this` value.
7. 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.
For an in-depth explanation, do check out [Arnav Aggrawal's article on Medium](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3).
<!-- Update here: /questions/explain-how-this-works-in-javascript/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-how-this-works-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.
[Back to top ↑](#table-of-contents-top-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-how-this-works-in-javascript/en-US.mdx)
<br>
### Describe the difference between a cookie, `sessionStorage` and `localStorage` in browsers
<!-- Update here: /questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx -->
All of the following are mechanisms of storing data on the client, the user's browser in this case. `localStorage` and `sessionStorage` both implement the [Web Storage API interface](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API).
- **Cookies**: Suitable for server-client communication, small storage capacity, can be persistent or session-based, domain-specific. Sent to the server on every request.
- **`localStorage`**: Suitable for long-term storage, data persists even after the browser is closed, accessible across all tabs and windows of the same origin, highest storage capacity among the three.
- **`sessionStorage`**: Suitable for temporary data within a single page session, data is cleared when the tab or window is closed, has a higher storage capacity compared to cookies.
Here's a table summarizing the 3 client storage mechanisms.
| Property | Cookie | `localStorage` | `sessionStorage` |
| --- | --- | --- | --- |
| Initiator | Client or server. Server can use `Set-Cookie` header | Client | Client |
| Lifespan | As specified | Until deleted | Until tab is closed |
| Persistent across browser sessions | If a future expiry date is set | Yes | No |
| Sent to server with every HTTP request | Yes, sent via `Cookie` header | No | No |
| Total capacity (per domain) | 4kb | 5MB | 5MB |
| Access | Across windows/tabs | Across windows/tabs | Same tab |
| Security | JavaScript cannot access `HttpOnly` cookies | None | None |
<!-- Update here: /questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx)
<br>
### Describe the difference between `<script>`, `<script async>` and `<script defer>`
<!-- Update here: /questions/describe-the-difference-between-script-async-and-script-defer/en-US.mdx -->
All of these ways (`<script>`, `<script async>`, and `<script defer>`) are used to load and execute JavaScript files in an HTML document, but they differ in how the browser handles loading and execution of the script:
- `<script>` is the default way of including JavaScript. The browser blocks HTML parsing while the script is being downloaded and executed. The browser will not continue rendering the page until the script has finished executing.
- `<script async>` downloads the script asynchronously, in parallel with parsing the HTML. Executes the script as soon as it is available, potentially interrupting the HTML parsing. `<script async>` do not wait for each other and execute in no particular order.
- `<script defer>` downloads the script asynchronously, in parallel with parsing the HTML. However, the execution of the script is deferred until HTML parsing is complete, in the order they appear in the HTML.
Here's a table summarizing the 3 ways of loading `<script>`s in a HTML document.
| Feature | `<script>` | `<script async>` | `<script defer>` |
| --- | --- | --- | --- |
| Parsing behavior | Blocks HTML parsing | Runs parallel to parsing | Runs parallel to parsing |
| Execution order | In order of appearance | Not guaranteed | In order of appearance |
| DOM dependency | No | No | Yes (waits for DOM) |
<!-- Update here: /questions/describe-the-difference-between-script-async-and-script-defer/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/describe-the-difference-between-script-async-and-script-defer?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/describe-the-difference-between-script-async-and-script-defer/en-US.mdx)
<br>
### What's the difference between a JavaScript variable that is: `null`, `undefined` or undeclared?
<!-- Update here: /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 -->
| Trait | `null` | `undefined` | Undeclared |
| --- | --- | --- | --- |
| 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 |
| Type (via `typeof` operator) | `'object'` | `'undefined'` | `'undefined'` |
| Equality Comparison | `null == undefined` is `true` | `undefined == null` is `true` | Throws a `ReferenceError` |
<!-- Update here: /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 -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-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)
<br>
### What's the difference between `.call` and `.apply` in JavaScript?
<!-- Update here: /questions/whats-the-difference-between-call-and-apply/en-US.mdx -->
`.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:
- `.call(thisArg, arg1, arg2, ...)`: Takes arguments individually.
- `.apply(thisArg, [argsArray])`: Takes arguments as an array.
Assuming we have a function `add`, the function can be invoked using `.call` and `.apply` in the following manner:
```js live
function add(a, b) {
return a + b;
}
console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3
```
<!-- Update here: /questions/whats-the-difference-between-call-and-apply/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/whats-the-difference-between-call-and-apply?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/whats-the-difference-between-call-and-apply/en-US.mdx)
<br>
### Explain `Function.prototype.bind` in JavaScript
<!-- Update here: /questions/explain-function-prototype-bind/en-US.mdx -->
`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:
- **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`.
- **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.
- **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.
The `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.
<!-- Update here: /questions/explain-function-prototype-bind/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-function-prototype-bind?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-function-prototype-bind/en-US.mdx)
<br>
### What advantage is there for using the JavaScript arrow syntax for a method in a constructor?
<!-- Update here: /questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx -->
The 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.
For 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:
```js live
const Person = function (name) {
this.firstName = name;
this.sayName1 = function () {
console.log(this.firstName);
};
this.sayName2 = () => {
console.log(this.firstName);
};
};
const john = new Person('John');
const dave = new Person('Dave');
john.sayName1(); // John
john.sayName2(); // John
// The regular function can have its `this` value changed, but the arrow function cannot
john.sayName1.call(dave); // Dave (because `this` is now the dave object)
john.sayName2.call(dave); // John
john.sayName1.apply(dave); // Dave (because `this` is now the dave object)
john.sayName2.apply(dave); // John
john.sayName1.bind(dave)(); // Dave (because `this` is now the dave object)
john.sayName2.bind(dave)(); // John
const sayNameFromWindow1 = john.sayName1;
sayNameFromWindow1(); // undefined (because `this` is now the window object)
const sayNameFromWindow2 = john.sayName2;
sayNameFromWindow2(); // John
```
The 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.
<!-- Update here: /questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-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)
<br>
### Explain how prototypal inheritance works in JavaScript
<!-- Update here: /questions/explain-how-prototypal-inheritance-works/en-US.mdx -->
Prototypical 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".
When 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.
This behavior simulates classical inheritance, but it is really more of [delegation than inheritance](https://davidwalsh.name/javascript-objects).
Here's an example of prototypal inheritance:
```js live
// Parent object constructor.
function Animal(name) {
this.name = name;
}
// Add a method to the parent object's prototype.
Animal.prototype.makeSound = function () {
console.log('The ' + this.constructor.name + ' makes a sound.');
};
// Child object constructor.
function Dog(name) {
Animal.call(this, name); // Call the parent constructor.
}
// Set the child object's prototype to be the parent's prototype.
Object.setPrototypeOf(Dog.prototype, Animal.prototype);
// Add a method to the child object's prototype.
Dog.prototype.bark = function () {
console.log('Woof!');
};
// Create a new instance of Dog.
const bolt = new Dog('Bolt');
// Call methods on the child object.
console.log(bolt.name); // "Bolt"
bolt.makeSound(); // "The Dog makes a sound."
bolt.bark(); // "Woof!"
```
Things to note are:
- `.makeSound` is not defined on `Dog`, so the JavaScript engine goes up the prototype chain and finds `.makeSound` on the inherited `Animal`.
- Using `Object.create()` to build the inheritance chain is no longer recommended. Use `Object.setPrototypeOf()` instead.
<!-- Update here: /questions/explain-how-prototypal-inheritance-works/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-how-prototypal-inheritance-works?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-how-prototypal-inheritance-works/en-US.mdx)
<br>
### Difference between: `function Person(){}`, `const person = Person()`, and `const person = new Person()` in JavaScript?
<!-- Update here: /questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.mdx -->
- `function Person(){}`: A function declaration in JavaScript. It can be used as a regular function or as a constructor.
- `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.
- `const person = new Person()`: Creates a new instance of `Person`, correctly utilizing the constructor function to initialize the new object.
| Aspect | `function Person(){}` | `const person = Person()` | `const person = new Person()` |
| --- | --- | --- | --- |
| Type | Function declaration | Function call | Constructor call |
| Usage | Defines a function | Invokes `Person` as a regular function | Creates a new instance of `Person` |
| Instance Creation | No instance created | No instance created | New instance created |
| Common Mistake | N/A | Misusing as constructor leading to `undefined` | None (when used correctly) |
<!-- Update here: /questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-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)
<br>
### Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}` in JavaScript
<!-- Update here: /questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx -->
`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).
If you try to invoke a function expression before it is declared, you will get an `Uncaught TypeError: XXX is not a function` error.
Function declarations can be called in the enclosing scope even before they are declared.
```js live
foo(); // 'FOOOOO'
function foo() {
console.log('FOOOOO');
}
```
Function expressions if called before they are declared will result in an error.
```js live
foo(); // Uncaught TypeError: foo is not a function
var foo = function () {
console.log('FOOOOO');
};
```
Another 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`.
```js live
const myFunc = function namedFunc() {
console.log(namedFunc); // Works
};
myFunc(); // Runs the function and logs the function reference
console.log(namedFunc); // ReferenceError: namedFunc is not defined
```
**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.
<!-- Update here: /questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-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)
<br>
### What's a typical use case for anonymous functions in JavaScript?
<!-- Update here: /questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx -->
Anonymous 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.
```js live
const arr = [-1, 0, 5, 6];
// The filter method is passed an anonymous function.
arr.filter((x) => x > 1); // [5, 6]
```
They 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.
```js live
// Encapsulating Code
(function () {
// Some code here.
})();
// Callbacks
setTimeout(function () {
console.log('Hello world!');
}, 1000);
// Functional programming constructs
const arr = [1, 2, 3];
const double = arr.map(function (el) {
return el * 2;
});
console.log(double); // [2, 4, 6]
```
<!-- Update here: /questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/whats-a-typical-use-case-for-anonymous-functions?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-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)
<br>
### What are the various ways to create objects in JavaScript?
<!-- Update here: /questions/what-are-the-various-ways-to-create-objects-in-javascript/en-US.mdx -->
Creating objects in JavaScript offers several methods:
- **Object literals (`{}`)**: Simplest and most popular approach. Define key-value pairs within curly braces.
- **`Object()` constructor**: Use `new Object()` with dot notation to add properties.
- **`Object.create()`**: Create new objects using existing objects as prototypes, inheriting properties and methods.
- **Constructor functions**: Define blueprints for objects using functions, creating instances with `new`.
- **ES2015 classes**: Structured syntax similar to other languages, using `class` and `constructor` keywords.
<!-- Update here: /questions/what-are-the-various-ways-to-create-objects-in-javascript/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-various-ways-to-create-objects-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.
[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-ways-to-create-objects-in-javascript/en-US.mdx)
<br>
### What is a closure in JavaScript, and how/why would you use one?
<!-- Update here: /questions/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx -->
In 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:
> Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope
In 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.
```js live
function outerFunction() {
const outerVar = 'I am outside of innerFunction';
function innerFunction() {
console.log(outerVar); // `innerFunction` can still access `outerVar`.
}
return innerFunction;
}
const inner = outerFunction(); // `inner` now holds a reference to `innerFunction`.
inner(); // "I am outside of innerFunction"
// Even though `outerFunction` has completed execution, `inner` still has access to variables defined inside `outerFunction`.
```
Key points to remember:
- Closure occurs when an inner function has access to variables in its outer (lexical) scope, even when the outer function has finished executing.
- Closure allows a function to **remember** the environment in which it was created, even if that environment is no longer present.
- Closures are used extensively in JavaScript, such as in callbacks, event handlers, and asynchronous functions.
<!-- Update here: /questions/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-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)
<br>
### What is the definition of a higher-order function in JavaScript?
<!-- Update here: /questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx -->
A 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.
Higher-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.
Imagine a scenario where we have an array of names that we need to transform to uppercase. The imperative way will be as such:
```js live
const names = ['irish', 'daisy', 'anna'];
function transformNamesToUppercase(names) {
const results = [];
for (let i = 0; i < names.length; i++) {
results.push(names[i].toUpperCase());
}
return results;
}
console.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']
```
Using `Array.prototype.map(transformerFn)` makes the code shorter and more declarative.
```js live
const names = ['irish', 'daisy', 'anna'];
function transformNamesToUppercase(names) {
return names.map((name) => name.toUpperCase());
}
console.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']
```
<!-- Update here: /questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-the-definition-of-a-higher-order-function?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-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)
<br>
### What are the differences between JavaScript ES2015 classes and ES5 function constructors?
<!-- Update here: /questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx -->
ES2015 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:
```js
// ES5 function constructor
function Person(name) {
this.name = name;
}
// ES2015 Class
class Person {
constructor(name) {
this.name = name;
}
}
```
For 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.
```js live
// ES5 inheritance
// Superclass
function Person1(name) {
this.name = name;
}
// Subclass
function Student1(name, studentId) {
// Call constructor of superclass to initialize superclass-derived members.
Person1.call(this, name);
// Initialize subclass's own members.
this.studentId = studentId;
}
Student1.prototype = Object.create(Person1.prototype);
Student1.prototype.constructor = Student1;
const student1 = new Student1('John', 1234);
console.log(student1.name, student1.studentId); // "John" 1234
// ES2015 inheritance
// Superclass
class Person2 {
constructor(name) {
this.name = name;
}
}
// Subclass
class Student2 extends Person2 {
constructor(name, studentId) {
super(name);
this.studentId = studentId;
}
}
const student2 = new Student2('Alice', 5678);
console.log(student2.name, student2.studentId); // "Alice" 5678
```
It's much more verbose to use inheritance in ES5 and the ES2015 version is easier to understand and remember.
**Comparison of ES5 function constructors vs ES2015 classes**
| Feature | ES5 Function Constructor | ES2015 Class |
| --- | --- | --- |
| Syntax | Uses function constructors and prototypes | Uses `class` keyword |
| Constructor | Function with properties assigned using `this` | `constructor` method inside the class |
| Method Definition | Defined on the prototype | Defined inside the class body |
| Static Methods | Added directly to the constructor function | Defined using the `static` keyword |
| Inheritance | Uses `Object.create()` and manually sets prototype chain | Uses `extends` keyword and `super` function |
| Readability | Less intuitive and more verbose | More concise and intuitive |
<!-- Update here: /questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[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-es6-class-and-es5-function-constructors/en-US.mdx)
<br>
### Describe event bubbling in JavaScript and browsers
<!-- Update here: /questions/describe-event-bubbling/en-US.mdx -->
Event 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.
Event 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.
<!-- Update here: /questions/describe-event-bubbling/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/describe-event-bubbling?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/describe-event-bubbling/en-US.mdx)
<br>
### Describe event capturing in JavaScript and browsers
<!-- Update here: /questions/describe-event-capturing/en-US.mdx -->
Event 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.
Event 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()`.
<!-- Update here: /questions/describe-event-capturing/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/describe-event-capturing?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/describe-event-capturing/en-US.mdx)
<br>
### What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?
<!-- Update here: /questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx -->
The main difference lies in the bubbling behavior of `mouseenter` and `mouseover` events. `mouseenter` does not bubble while `mouseover` bubbles.
`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.
`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.
| Property | `mouseenter` | `mouseover` |
| --- | --- | --- |
| Bubbling | No | Yes |
| Trigger | Only when entering itself | When entering itself and when entering descendants |
<!-- Update here: /questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-the-difference-between-mouseenter-and-mouseover-event?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[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-mouseenter-and-mouseover-event/en-US.mdx)
<br>
### What is `'use strict';` in JavaScript for?
<!-- Update here: /questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.mdx -->
`'use strict'` is a statement used to enable strict mode to entire scripts or individual functions. Strict mode is a way to opt into a restricted variant of JavaScript.
**Advantages**
- Makes it impossible to accidentally create global variables.
- Makes assignments which would otherwise silently fail to throw an exception.
- Makes attempts to delete undeletable properties throw an exception (where before the attempt would simply have no effect).
- Requires that function parameter names be unique.
- `this` is `undefined` in the global context.
- It catches some common coding bloopers, throwing exceptions.
- It disables features that are confusing or poorly thought out.
**Disadvantages**
- Many missing features that some developers might be used to.
- No more access to `function.caller` and `function.arguments`.
- Concatenation of scripts written in different strict modes might cause issues.
Overall, the benefits outweigh the disadvantages and there is not really a need to rely on the features that strict mode prohibits. We should all be using strict mode by default.
<!-- Update here: /questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.mdx)
<br>
### Explain the difference between synchronous and asynchronous functions in JavaScript
<!-- Update here: /questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx -->
Synchronous 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.
```js live
function sum(a, b) {
console.log('Inside sum function');
return a + b;
}
const result = sum(2, 3); // The program waits for sum() to complete before assigning the result
console.log('Result: ', result); // Output: 5
```
Asynchronous 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).
```js live
function fetchData(callback) {
setTimeout(() => {
const data = { name: 'John', age: 30 };
callback(data); // Calling the callback function with data
}, 2000); // Simulating a 2-second delay
}
console.log('Fetching data...');
fetchData((data) => {
console.log(data); // Output: { name: 'John', age: 30 } (after 2 seconds)
});
console.log('Call made to fetch data'); // This will print before the data is fetched
```
<!-- Update here: /questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[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-synchronous-and-asynchronous-functions/en-US.mdx)
<br>
### What are the pros and cons of using Promises instead of callbacks in JavaScript?
<!-- Update here: /questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx -->
Promises 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.
<!-- Update here: /questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-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)
<br>
### Explain AJAX in as much detail as possible
<!-- Update here: /questions/explain-ajax-in-as-much-detail-as-possible/en-US.mdx -->
AJAX (Asynchronous JavaScript and XML) facilitates asynchronous communication between the client and server, enabling dynamic updates to web pages without reloading. It uses techniques like `XMLHttpRequest` or the `fetch()` API to send and receive data in the background. In modern web applications, the `fetch()` API is more commonly used to implement AJAX.
**Using `XMLHttpRequest`**
```js live
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error('Request failed: ' + xhr.status);
}
}
};
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
xhr.send();
```
**Using `fetch()`**
```js live
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then((data) => console.log(data))
.catch((error) => console.error('Fetch error:', error));
```
<!-- Update here: /questions/explain-ajax-in-as-much-detail-as-possible/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-ajax-in-as-much-detail-as-possible?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-ajax-in-as-much-detail-as-possible/en-US.mdx)
<br>
### What are the advantages and disadvantages of using AJAX?
<!-- Update here: /questions/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.mdx -->
AJAX (Asynchronous JavaScript and XML) is a technique in JavaScript that allows web pages to send and retrieve data asynchronously from servers without refreshing or reloading the entire page.
**Advantages**
- **Smoother user experience**: Updates happen without full page reloads, like in mail and chat applications.
- **Lighter server Load**: Only necessary data is fetched via AJAX, reducing server load and improving perceived performance of webpages.
- **Maintains client state**: User interactions and any client states are persisted within the page.
**Disadvantages**
- **Reliance on JavaScript**: If disabled, Ajax functionality breaks.
- **Bookmarking issues**: Dynamic content makes bookmarking specific page states difficult.
- **SEO Challenges**: Search engines may struggle to index dynamic content.
- **Performance Concerns**: Processing Ajax data on low-end devices can be slow.
<!-- Update here: /questions/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.mdx)
<br>
### What are the differences between `XMLHttpRequest` and `fetch()` in JavaScript and browsers?
<!-- Update here: /questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx -->
`XMLHttpRequest` (XHR) and `fetch()` API are both used for asynchronous HTTP requests in JavaScript (AJAX). `fetch()` offers a cleaner syntax, promise-based approach, and more modern feature set compared to XHR. However, there are some differences:
- `XMLHttpRequest` event callbacks, while `fetch()` utilizes promise chaining.
- `fetch()` provides more flexibility in headers and request bodies.
- `fetch()` support cleaner error handling with `catch()`.
- Handling caching with `XMLHttpRequest` is difficult but caching is supported by `fetch()` by default in the `options.cache` object (`cache` value of second parameter) to `fetch()` or `Request()`.
- `fetch()` requires an `AbortController` for cancelation, while for `XMLHttpRequest`, it provides `abort()` property.
- `XMLHttpRequest` has good support for progress tracking, which `fetch()` lacks.
- `XMLHttpRequest` is only available in the browser and not natively supported in Node.js environments. On the other hand `fetch()` is part of the JavaScript language and is supported on all modern JavaScript runtimes.
These days `fetch()` is preferred for its cleaner syntax and modern features.
<!-- Update here: /questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-xmlhttprequest-and-fetch?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[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-xmlhttprequest-and-fetch/en-US.mdx)
<br>
### How do you abort a web request using `AbortController` in JavaScript?
<!-- Update here: /questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx -->
`AbortController` is used to cancel ongoing asynchronous operations like fetch requests.
```js live
const controller = new AbortController();
const signal = controller.signal;
fetch('https://jsonplaceholder.typicode.com/todos/1', { signal })
.then((response) => {
// Handle response
})
.catch((error) => {
if (error.name === 'AbortError') {
console.log('Request aborted');
} else {
console.error('Error:', error);
}
});
// Call abort() to abort the request
controller.abort();
```
Aborting web requests is useful for:
- Canceling requests based on user actions.
- Prioritizing the latest requests in scenarios with multiple simultaneous requests.
- Canceling requests that are no longer needed, e.g. after the user has navigated away from the page.
<!-- Update here: /questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx -->
<br>
> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/how-do-you-abort-a-web-request-using-abortcontrollers?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
[Back to top ↑](#table-of-contents-top-questions) / [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx)
<br>
### What are JavaScript polyfills for?
<!-- Update here: /questions/what-are-javascript-polyfills-for/en-US.mdx -->
Polyfills in JavaScript are pieces of code that provide modern functionality to older browsers that lack native support for those features. They bridge the gap between the JavaScript language features and APIs available in modern browsers and the limited capabilities of older browser versions.
They can be implemented manually or included through libraries and are often used in conjunction with feature detection.
Common use cases include:
- **New JavaScript Methods**: For example, `Array.prototype.includes()`, `Object.assign()`, etc.
- **New APIs**: Such as `fetch()`, `Promise`, `IntersectionObserver`, etc. Modern browsers support these now but for a long time they have to be polyfilled.
Libraries and services for polyfills:
- **`core-js`**: A modular standard library for JavaScript which includes polyfills for a wide range of ECMAScript features.
```js
import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.
[1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]
```
- **Polyfill.io**: A service that provides polyfills based on the features and user agents specified in the request.
```js
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
```
<!-- Update here: /questions/what-are-javascript-polyfills-for/en-US.mdx -->
<br>
> 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.
[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)
<br>
### Why is extending built-in JavaScript objects not a good idea?
<!-- Update here: /questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx -->
Extending 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.
The 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.
<!-- Update here: /questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx -->
<br>
> 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.
[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)
<br>
### Why is it, in general, a good idea to leave the global JavaScript scope of a website as-is and never touch it?
<!-- Update here: /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 -->
JavaScript 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:
- **Naming conflicts**: Sharing the global scope across scripts can cause conflicts and bugs when new global variables or changes are introduced.
- **Cluttered global namespace**: Keeping the global namespace minimal avoids making the codebase hard to manage and maintain.
- **Scope leaks**: Unintentional references to global variables in closures or event handlers can cause memory leaks and performance issues.
- **Modularity and encapsulation**: Good design promotes keeping variables and functions within their specific scopes, enhancing organization, reusability, and maintainability.
- **Security concerns**: Global variables are accessible by all scripts, including potentially malicious ones, posing security risks, especially if sensitive data is stored there.
- **Compatibility and portability**: Heavy reliance on global variables reduces code portability and integration ease with other libraries or frameworks.
Follow these best practices to avoid global scope pollution:
- **Use local variables**: Declare variables within functions or blocks using `var`, `let`, or `const` to limit their scope.
- **Pass variables as function parameters**: Maintain encapsulation by passing variables as parameters instead of accessing them globally.
- **Use immediately invoked function expressions (IIFE)**: Create new scopes with IIFEs to prevent adding variables to the global scope.
- **Use modules**: Encapsulate code with module systems to maintain separate scopes and manageability.
<!-- Update here: /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 -->
<br>
> 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.
[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)
<br>
### Explain the differences between CommonJS modules and ES modules in JavaScript
<!-- Update here: /questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.mdx -->
In 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.
**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.
```js
// my-module.js
const value = 42;
module.exports = { value };
// main.js
const myModule = require('./my-module.js');
console.log(myModule.value); // 42
```
**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.
```js
// my-module.js
export const value = 42;
// main.js
import { value } from './my-module.js';
console.log(value); // 42
```
**CommonJS vs ES modules**
| Feature | CommonJS | ES modules |
| --- | --- | --- |
| Module Syntax | `require()` for importing `module.exports` for exporting | `import` for importing `export` for exporting |
| Environment | Primarily used in Node.js for server-side development | Designed for both browser and server-side JavaScript (Node.js) |
| Loading | Synchronous loading of modules | Asynchronous loading of modules |
| Structure | Dynamic imports, can be conditionally called | Static imports/exports at the top level |
| File extensions | `.js` (default) | `.mjs` or `.js` (with `type: "module"` in `package.json`) |
| Browser support | Not natively supported in browsers | Natively supported in modern browsers |
| Optimization | Limited optimization due to dynamic nature | Allows for optimizations like tree-shaking due to static structure |
| Compatibility | Widely used in existing Node.js codebases and libraries | Newer standard, but gaining adoption in modern projects |
<!-- Update here: /questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.mdx -->
<br>
> 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.
[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)
<br>
### What are the various data types in JavaScript?
<!-- Update here: /questions/what-are-the-various-data-types-in-javascript/en-US.mdx -->
In JavaScript, data types can be categorized into `primitive` and `non-primitive` types:
**Primitive data types**
- **Number**: Represents both integers and floating-point numbers.
- **String**: Represents sequences of characters.
- **Boolean**: Represents `true` or `false` values.
- **Undefined**: A variable that has been declared but not assigned a value.
- **Null**: Represents the intentional absence of any object value.
- **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)
- **BigInt**: Represents integers with arbitrary precision.
**Non-primitive (Reference) data types**
- **Object**: Used to store collections of data.
- **Array**: An ordered collection of data.
- **Function**: A callable object.
- **Date**: Represents dates and times.
- **RegExp**: Represents regular expressions.
- **Map**: A collection of keyed data items.
- **Set**: A collection of unique values.
The primitive types store a single value, while non-primitive types can store collections of data or complex entities.
<!-- Update here: /questions/what-are-the-various-data-types-in-javascript/en-US.mdx -->
<br>
> 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.
[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)
<br>
### What language constructs do you use for iterating over object properties and array items in JavaScript?
<!-- Update here: /questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx -->
There are multiple ways to iterate over object properties as well as arrays in JavaScript:
**`for...in` loop**
The `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
```js live
const obj = {
a: 1,
b: 2,
c: 3,
};
for (const key in obj) {
// To avoid iterating over inherited properties
if (Object.hasOwn(obj, key)) {
console.log(`${key}: ${obj[key]}`);
}
}
```
**`Object.keys()`**
`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.
```js live
const obj = {
a: 1,
b: 2,
c: 3,
};
Object.keys(obj).forEach((key) => {
console.log(`${key}: ${obj[key]}`);
});
```
Most common ways to iterate over array are using `for` loop and `Array.prototype.forEach` method.
**Using `for` loop**
```js live
let array = [1, 2, 3, 4, 5, 6];
for (let index = 0; index < array.length; index++) {
console.log(array[index]);
}
```
**Using `Array.prototype.forEach` method**
```js live
let array = [1, 2, 3, 4, 5, 6];
array.forEach((number, index) => {
console.log(`${number} at index ${index}`);
});
```
**Using `for...of`**
This 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.
```js live
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
console.log(number);
}
```
There are also other inbuilt methods available which are suitable for specific scenarios for example:
- `Array.prototype.filter`: You can use the `filter` method to create a new array containing only the elements that satisfy a certain condition.
- `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.
- `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.
<!-- Update here: /questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx -->
<br>
> 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.
[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)
<br>
### What are the benefits of using spread syntax in JavaScript and how is it different from rest syntax?
<!-- Update here: /questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx -->
**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.
| Operation | Traditional | Spread |
| -------------- | ------------------------------- | ---------------------- |
| Array cloning | `arr.slice()` | `[...arr]` |
| Array merging | `arr1.concat(arr2)` | `[...arr1, ...arr2]` |
| Object cloning | `Object.assign({}, obj)` | `{ ...obj }` |
| Object merging | `Object.assign({}, obj1, obj2)` | `{ ...obj1, ...obj2 }` |
**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.
```js live
// Using rest syntax in a function
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // Output: 6
```
<!-- Update here: /questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx -->
<br>
> 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.
[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)
<br>
### What are iterators and generators in JavaScript and what are they used for?
<!-- Update here: /questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx -->
In JavaScript, iterators and generators are powerful tools for managing sequences of data and controlling the flow of execution in a more flexible way.
**Iterators** are objects that define a sequence and potentially a return value upon its termination. It adheres to a specific interface:
- An iterator object must implement a `next()` method.
- The `next()` method returns an object with two properties:
- `value`: The next value in the sequence.
- `done`: A boolean that is `true` if the iterator has finished its sequence, otherwise `false`.
Here's an example of an object implementing the iterator interface.
```js live
const iterator = {
current: 0,
last: 5,
next() {
if (this.current <= this.last) {
return { value: this.current++, done: false };
} else {
return { value: undefined, done: true };
}
},
};
let result = iterator.next();
while (!result.done) {
console.log(result.value); // Logs 0, 1, 2, 3, 4, 5
result = iterator.next();
}
```
**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()`.
```js live
function* numberGenerator() {
let num = 0;
while (num <= 5) {
yield num++;
}
}
const gen = numberGenerator();
console.log(gen.next()); // { value: 0, done: false }
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: 4, done: false }
console.log(gen.next()); // { value: 5, done: false }
console.log(gen.next()); // { value: undefined, done: true }
```
Generators are powerful for creating iterators on-demand, especially for infinite sequences or complex iteration logic. They can be used for:
- Lazy evaluation – processing elements only when needed, improving memory efficiency for large datasets.
- Implementing iterators for custom data structures.
- Creating asynchronous iterators for handling data streams.
<!-- Update here: /questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx -->
<br>
> 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.
[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)
<br>
### Explain the difference between mutable and immutable objects in JavaScript
<!-- Update here: /questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx -->
**Mutable objects** allow for modification of properties and values after creation, which is the default behavior for most objects.
```js live
const mutableObject = {
name: 'John',
age: 30,
};
// Modify the object
mutableObject.name = 'Jane';
// The object has been modified
console.log(mutableObject); // Output: { name: 'Jane', age: 30 }
```
**Immutable objects** cannot be directly modified after creation. Its content cannot be changed without creating an entirely new value.
```js live
const immutableObject = Object.freeze({
name: 'John',
age: 30,
});
// Attempt to modify the object
immutableObject.name = 'Jane';
// The object remains unchanged
console.log(immutableObject); // Output: { name: 'John', age: 30 }
```
The key difference between mutable and immutable objects is modifiability. Immutable objects cannot be modified after they are created, while mutable objects can be.
<!-- Update here: /questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx -->
<br>
> 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.
[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)
<br>
### What is the difference between a `Map` object and a plain object in JavaScript?
<!-- Update here: /questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.mdx -->
Both `Map` objects and plain objects in JavaScript can store key-value pairs, but they have several key differences:
| Feature | `Map` | Plain object |
| --- | --- | --- |
| Key type | Any data type | String (or Symbol) |
| Key order | Maintained | Not guaranteed |
| Size property | Yes (`size`) | None |
| Iteration | `forEach`, `keys()`, `values()`, `entries()` | `for...in`, `Object.keys()`, etc. |
| Inheritance | No | Yes |
| Performance | Generally better for larger datasets and frequent additions/deletions | Faster for small datasets and simple operations |
| Serializable | No | Yes |
<!-- Update here: /questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.mdx -->
<br>
> 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.
[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)
<br>
### What are the differences between `Map`/`Set` and `WeakMap`/`WeakSet` in JavaScript?
<!-- Update here: /questions/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.mdx -->
The primary difference between `Map`/`Set` and `WeakMap`/`WeakSet` in JavaScript lies in how they handle keys. Here's a breakdown:
**`Map` vs. `WeakMap`**
`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.
`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:
- Caching data based on objects without preventing garbage collection of the objects themselves.
- Storing private data associated with DOM nodes without affecting their lifecycle.
**`Set` vs. `WeakSet`**
Similar 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.
On 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:
- Tracking DOM nodes that have been interacted with without affecting their memory management.
- Implementing custom object weak references for specific use cases.
**Here's a table summarizing the key differences:**
| Feature | Map | WeakMap | Set | WeakSet |
| --- | --- | --- | --- | --- |
| Key Types | Any data type | Objects (weak references) | Any data type (unique) | Objects (weak references, unique) |
| 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 |
| Use Cases | General-purpose key-value storage | Caching, private DOM node data | Removing duplicates, membership checks | Object weak references, custom use cases |
**Choosing between them**
- 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.
- 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.
<!-- Update here: /questions/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.mdx -->
<br>
> 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.
[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)
<br>
### Why might you want to create static class members in JavaScript?
<!-- Update here: /questions/why-you-might-want-to-create-static-class-members/en-US.mdx -->
Static 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.
```js live
class Car {
static noOfWheels = 4;
static compare() {
return 'Static method has been called.';
}
}
console.log(Car.noOfWheels); // 4
```
Static members are useful under the following scenarios:
- **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`.
- **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()`.
- **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.
<!-- Update here: /questions/why-you-might-want-to-create-static-class-members/en-US.mdx -->
<br>
> 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.
[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)
<br>
### What are `Symbol`s used for in JavaScript?
<!-- Update here: /questions/what-are-symbols-used-for/en-US.mdx -->
`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.
```js live
let sym1 = Symbol();
let sym2 = Symbol('myKey');
console.log(typeof sym1); // "symbol"
console.log(sym1 === sym2); // false, because each symbol is unique
let obj = {};
let sym = Symbol('uniqueKey');
obj[sym] = 'value';
console.log(obj[sym]); // "value"
```
**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()`.
<!-- Update here: /questions/what-are-symbols-used-for/en-US.mdx -->
<br>
> 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.
[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)
<br>
### What are server-sent events?
<!-- Update here: /questions/what-are-server-sent-events/en-US.mdx -->
[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:
| Property | `WebSocket` | `EventSource` |
| --- | --- | --- |
| Direction | Bi-directional – both client and server can exchange messages | Unidirectional – only server sends data |
| Data type | Binary and text data | Only text |
| Protocol | WebSocket protocol (`ws://`) | Regular HTTP (`http://`) |
**Creating an event source**
```js
const eventSource = new EventSource('/sse-stream');
```
**Listening for events**
```js
// Fired when the connection is established.
eventSource.addEventListener('open', () => {
console.log('Connection opened');
});
// Fired when a message is received from the server.
eventSource.addEventListener('message', (event) => {
console.log('Received message:', event.data);
});
// Fired when an error occurs.
eventSource.addEventListener('error', (error) => {
console.error('Error occurred:', error);
});
```
**Sending events from server**
```js
const express = require('express');
const app = express();
app.get('/sse-stream', (req, res) => {
// `Content-Type` need to be set to `text/event-stream`.
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// Each message should be prefixed with data.
const sendEvent = (data) => res.write(`data: ${data}\n\n`);
sendEvent('Hello from server');
const intervalId = setInterval(() => sendEvent(new Date().toString()), 1000);
res.on('close', () => {
console.log('Client closed connection');
clearInterval(intervalId);
});
});
app.listen(3000, () => console.log('Server started on port 3000'));
```
In 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
<!-- Update here: /questions/what-are-server-sent-events/en-US.mdx -->
<br>
> 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.
[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)
<br>
### What are JavaScript object property flags and descriptors?
<!-- Update here: /questions/what-are-javascript-object-property-flags-and-descriptors/en-US.mdx -->
In JavaScript, property flags and descriptors manage the behavior and attributes of object properties.
**Property flags**
Property flags are used to specify the behavior of a property on an object. Here are the available flags:
- `writable`: Specifies whether the property can be written to. Defaults to `true`.
- `enumerable`: Specifies whether the property is enumerable. Defaults to `true`.
- `configurable`: Specifies whether the property can be deleted or its attributes changed. Default is `true`.
**Property descriptors**
These provide detailed information about an object's property, including its value and flags. They are retrieved using `Object.getOwnPropertyDescriptor()` and set using `Object.defineProperty()`.
The use cases of property descriptors are as follows:
- Making a property non-writable by setting `writable: false` to ensure data consistency.
- Hiding a property from enumeration by setting `enumerable: false`.
- Preventing property deletion and modification by setting `configurable: false`.
- Freezing or sealing objects to prevent modifications globally.
<!-- Update here: /questions/what-are-javascript-object-property-flags-and-descriptors/en-US.mdx -->
<br>
> 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.
[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)
<br>
### What are JavaScript object getters and setters for?
<!-- Update here: /questions/what-are-javascript-object-getters-and-setters-for/en-US.mdx -->
JavaScript 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.
Getters 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.
Here's a code example demonstrating the use of getters and setters:
```js live
const person = {
_name: 'John Doe', // Private property
get name() {
// Getter
return this._name;
},
set name(newName) {
// Setter
if (newName.trim().length > 0) {
this._name = newName;
} else {
console.log('Invalid name');
}
},
};
// Accessing the name property using the getter
console.log(person.name); // Output: 'John Doe'
// Setting the name property using the setter
person.name = 'Jane Smith'; // Setter is called
console.log(person.name); // Output: 'Jane Smith'
person.name = ''; // Setter is called, but the value is not set due to validation
console.log(person.name); // Output: 'Jane Smith'
```
<!-- Update here: /questions/what-are-javascript-object-getters-and-setters-for/en-US.mdx -->
<br>
> 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.
[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)
<br>
### What are proxies in JavaScript used for?
<!-- Update here: /questions/what-are-proxies-in-javascript-used-for/en-US.mdx -->
In 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.
Here's a basic example of using a `Proxy` to log every property access:
```js live
const myObject = {
name: 'John',
age: 42,
};
const handler = {
get: function (target, prop, receiver) {
console.log(`Someone accessed property "${prop}"`);
return target[prop];
},
};
const proxiedObject = new Proxy(myObject, handler);
console.log(proxiedObject.name);
// Someone accessed property "name"
// 'John'
console.log(proxiedObject.age);
// Someone accessed property "age"
// 42
```
Use cases include:
- **Property access interception**: Intercept and customize property access on an object.
- **Property assignment validation**: Validate property values before they are set on the target object.
- **Logging and debugging**: Create wrappers for logging and debugging interactions with an object
- **Creating reactive systems**: Trigger updates in other parts of your application when object properties change (data binding).
- **Data transformation**: Transforming data being set or retrieved from an object.
- **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
- **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
- **Dynamic property creation**: Useful for defining properties on-the-fly with default values and avoid storing redundant data in objects.
<!-- Update here: /questions/what-are-proxies-in-javascript-used-for/en-US.mdx -->
<br>
> 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.
[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)
<br>
### What tools and techniques do you use for debugging JavaScript code?
<!-- Update here: /questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.mdx -->
Some of the most commonly used tools and techniques for debugging JavaScript:
- JavaScript language
- `console` methods (e.g. `console.log()`, `console.error()`, `console.warn()`, `console.table()`)
- `debugger` statement
- Breakpoints (browser or IDE)
- JavaScript frameworks
- [React Devtools](https://github.com/facebook/react-devtools)
- [Redux Devtools](https://github.com/gaearon/redux-devtools)
- [Vue Devtools](https://github.com/vuejs/vue-devtools)
- Browser developer tools
- **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.
- **Firefox Developer Tools**: Similar to Chrome DevTools with its own set of features for debugging.
- **Safari Web Inspector**: Provides tools for debugging on Safari.
- **Edge Developer Tools**: Similar to Chrome DevTools, as Edge is now Chromium-based.
- Network requests
- **Postman**: Useful for debugging API calls.
- **Fiddler**: Helps capture and inspect HTTP/HTTPS traffic.
- **Charles Proxy**: Another tool for intercepting and debugging network calls.
<!-- Update here: /questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.mdx -->
<br>
> 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.
[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)
<br>
### What are workers in JavaScript used for?
<!-- Update here: /questions/what-are-workers-in-javascript-used-for/en-US.mdx -->
Workers 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:
- **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.
- **Communication**: Uses `postMessage()` and `onmessage`/ `'message'` event for messaging.
- **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.
- **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.
There are three main types of workers in JavaScript:
- **Web workers / Dedicated workers**
- Run scripts in background threads, separate from the main UI thread.
- Useful for CPU-intensive tasks like data processing, calculations, etc.
- Cannot directly access or manipulate the DOM.
- **Service workers**
- Act as network proxies, handling requests between the app and network.
- Enable offline functionality, caching, and push notifications.
- Runs independently of the web page, even when it's closed.
- **Shared workers**
- Can be shared by multiple scripts running in different windows or frames, as long as they're in the same domain.
- Scripts communicate with the shared worker by sending and receiving messages.
- Useful for coordinating tasks across different parts of a web page.
<!-- Update here: /questions/what-are-workers-in-javascript-used-for/en-US.mdx -->
<br>
> 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.
[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)
<br>
### How does JavaScript garbage collection work?
<!-- Update here: /questions/how-does-javascript-garbage-collection-work/en-US.mdx -->
Garbage 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.
**Mark-and-sweep**
The most common garbage collection algorithm used in JavaScript is the Mark-and-sweep algorithm. It operates in two phases:
- **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".
- **Sweeping phase**: The garbage collector sweeps through memory, removing all unmarked objects, as they are considered unreachable and no longer needed.
This algorithm effectively identifies and removes objects that have become unreachable, freeing up memory for new allocations.
**Generational garbage collection**
Leveraged 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.
Different JavaScript engines (differs according to browsers) implement different garbage collection algorithms and there's no standard way of doing garbage collection.
<!-- Update here: /questions/how-does-javascript-garbage-collection-work/en-US.mdx -->
<br>
> 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.
[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)
<br>
<!-- QUESTIONS:TOP:END -->
## All Questions with Answers
<!-- QUESTIONS:ALL:START -->
### What are the various data types in JavaScript?
<!-- Update here: /questions/what-are-the-various-data-types-in-javascript/en-US.mdx -->
In JavaScript, data types can be categorized into `primitive` and `non-primitive` types:
**Primitive data types**
- **Number**: Represents both integers and floating-point numbers.
- **String**: Represents sequences of characters.
- **Boolean**: Represents `true` or `false` values.
- **Undefined**: A variable that has been declared but not assigned a value.
- **Null**: Represents the intentional absence of any object value.
- **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)
- **BigInt**: Represents integers with arbitrary precision.
**Non-primitive (Reference) data types**
- **Object**: Used to store collections of data.
- **Array**: An ordered collection of data.
- **Function**: A callable object.
- **Date**: Represents dates and times.
- **RegExp**: Represents regular expressions.
- **Map**: A collection of keyed data items.
- **Set**: A collection of unique values.
The primitive types store a single value, while non-primitive types can store collections of data or complex entities.
<!-- Update here: /questions/what-are-the-various-data-types-in-javascript/en-US.mdx -->
<br>
[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)
<br>
### How do you check the data type of a variable?
<!-- Update here: /questions/how-do-you-check-the-data-type-of-a-variable/en-US.mdx -->
To 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.
<!-- Update here: /questions/how-do-you-check-the-data-type-of-a-variable/en-US.mdx -->
<br>
[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)
<br>
### What's the difference between a JavaScript variable that is: `null`, `undefined` or undeclared?
<!-- Update here: /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 -->
| Trait | `null` | `undefined` | Undeclared |
| --- | --- | --- | --- |
| 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 |
| Type (via `typeof` operator) | `'object'` | `'undefined'` | `'undefined'` |
| Equality Comparison | `null == undefined` is `true` | `undefined == null` is `true` | Throws a `ReferenceError` |
<!-- Update here: /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 -->
<br>
[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)
<br>
### What are the differences between JavaScript variables created using `let`, `var` or `const`?
<!-- Update here: /questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx -->
In 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:
| Behavior | `var` | `let` | `const` |
| --- | --- | --- | --- |
| Scope | Function or Global | Block | Block |
| Initialization | Optional | Optional | Required |
| Redeclaration | Yes | No | No |
| Reassignment | Yes | Yes | No |
| Accessing before declaration | `undefined` | `ReferenceError` | `ReferenceError` |
<!-- Update here: /questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx -->
<br>
[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)
<br>
### Why is it, in general, a good idea to leave the global JavaScript scope of a website as-is and never touch it?
<!-- Update here: /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 -->
JavaScript 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:
- **Naming conflicts**: Sharing the global scope across scripts can cause conflicts and bugs when new global variables or changes are introduced.
- **Cluttered global namespace**: Keeping the global namespace minimal avoids making the codebase hard to manage and maintain.
- **Scope leaks**: Unintentional references to global variables in closures or event handlers can cause memory leaks and performance issues.
- **Modularity and encapsulation**: Good design promotes keeping variables and functions within their specific scopes, enhancing organization, reusability, and maintainability.
- **Security concerns**: Global variables are accessible by all scripts, including potentially malicious ones, posing security risks, especially if sensitive data is stored there.
- **Compatibility and portability**: Heavy reliance on global variables reduces code portability and integration ease with other libraries or frameworks.
Follow these best practices to avoid global scope pollution:
- **Use local variables**: Declare variables within functions or blocks using `var`, `let`, or `const` to limit their scope.
- **Pass variables as function parameters**: Maintain encapsulation by passing variables as parameters instead of accessing them globally.
- **Use immediately invoked function expressions (IIFE)**: Create new scopes with IIFEs to prevent adding variables to the global scope.
- **Use modules**: Encapsulate code with module systems to maintain separate scopes and manageability.
<!-- Update here: /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 -->
<br>
[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)
<br>
### How do you convert a string to a number in JavaScript?
<!-- Update here: /questions/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.mdx -->
In 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`.
<!-- Update here: /questions/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.mdx -->
<br>
[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)
<br>
### What are template literals and how are they used?
<!-- Update here: /questions/what-are-template-literals-and-how-are-they-used/en-US.mdx -->
Template 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.
Example:
```js live
const myName = 'John';
const greeting = `Hello, ${myName}!`;
console.log(greeting); // Output: Hello, John!
```
<!-- Update here: /questions/what-are-template-literals-and-how-are-they-used/en-US.mdx -->
<br>
[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)
<br>
### Explain the concept of tagged templates
<!-- Update here: /questions/explain-the-concept-of-tagged-templates/en-US.mdx -->
Tagged 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:
```js live
function tag(strings, ...values) {
return strings[0] + values[0] + strings[1] + values[1] + strings[2];
}
const result = tag`Hello ${'world'}! How are ${'you'}?`;
console.log(result); // "Hello world! How are you?"
```
<!-- Update here: /questions/explain-the-concept-of-tagged-templates/en-US.mdx -->
<br>
[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)
<br>
### What is the spread operator and how is it used?
<!-- Update here: /questions/what-is-the-spread-operator-and-how-is-it-used/en-US.mdx -->
The 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.
```js live
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }
```
<!-- Update here: /questions/what-is-the-spread-operator-and-how-is-it-used/en-US.mdx -->
<br>
[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)
<br>
### What are `Symbol`s used for in JavaScript?
<!-- Update here: /questions/what-are-symbols-used-for/en-US.mdx -->
`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.
```js live
let sym1 = Symbol();
let sym2 = Symbol('myKey');
console.log(typeof sym1); // "symbol"
console.log(sym1 === sym2); // false, because each symbol is unique
let obj = {};
let sym = Symbol('uniqueKey');
obj[sym] = 'value';
console.log(obj[sym]); // "value"
```
**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()`.
<!-- Update here: /questions/what-are-symbols-used-for/en-US.mdx -->
<br>
[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)
<br>
### What are proxies in JavaScript used for?
<!-- Update here: /questions/what-are-proxies-in-javascript-used-for/en-US.mdx -->
In 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.
Here's a basic example of using a `Proxy` to log every property access:
```js live
const myObject = {
name: 'John',
age: 42,
};
const handler = {
get: function (target, prop, receiver) {
console.log(`Someone accessed property "${prop}"`);
return target[prop];
},
};
const proxiedObject = new Proxy(myObject, handler);
console.log(proxiedObject.name);
// Someone accessed property "name"
// 'John'
console.log(proxiedObject.age);
// Someone accessed property "age"
// 42
```
Use cases include:
- **Property access interception**: Intercept and customize property access on an object.
- **Property assignment validation**: Validate property values before they are set on the target object.
- **Logging and debugging**: Create wrappers for logging and debugging interactions with an object
- **Creating reactive systems**: Trigger updates in other parts of your application when object properties change (data binding).
- **Data transformation**: Transforming data being set or retrieved from an object.
- **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
- **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
- **Dynamic property creation**: Useful for defining properties on-the-fly with default values and avoid storing redundant data in objects.
<!-- Update here: /questions/what-are-proxies-in-javascript-used-for/en-US.mdx -->
<br>
[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)
<br>
### Explain the concept of "hoisting" in JavaScript
<!-- Update here: /questions/explain-hoisting/en-US.mdx -->
Hoisting is a JavaScript mechanism where variable and function declarations are moved ("hoisted") to the top of their containing scope during the compile phase.
- **Variable declarations (`var`)**: Declarations are hoisted, but not initializations. The value of the variable is `undefined` if accessed before initialization.
- **Variable declarations (`let` and `const`)**: Declarations are hoisted, but not initialized. Accessing them results in `ReferenceError` until the actual declaration is encountered.
- **Function expressions (`var`)**: Declarations are hoisted, but not initializations. The value of the variable is `undefined` if accessed before initialization.
- **Function declarations (`function`)**: Both declaration and definition are fully hoisted.
- **Class declarations (`class`)**: Declarations are hoisted, but not initialized. Accessing them results in `ReferenceError` until the actual declaration is encountered.
- **Import declarations (`import`)**: Declarations are hoisted, and side effects of importing the module are executed before the rest of the code.
The following behavior summarizes the result of accessing the variables before they are declared.
| Declaration | Accessing before declaration |
| ------------------------------ | ---------------------------- |
| `var foo` | `undefined` |
| `let foo` | `ReferenceError` |
| `const foo` | `ReferenceError` |
| `class Foo` | `ReferenceError` |
| `var foo = function() { ... }` | `undefined` |
| `function foo() { ... }` | Normal |
| `import` | Normal |
<!-- Update here: /questions/explain-hoisting/en-US.mdx -->
<br>
[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)
<br>
### Explain the difference in hoisting between `var`, `let`, and `const`
<!-- Update here: /questions/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.mdx -->
`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.
<!-- Update here: /questions/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.mdx -->
<br>
[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)
<br>
### How does hoisting affect function declarations and expressions?
<!-- Update here: /questions/how-does-hoisting-affect-function-declarations-and-expressions/en-US.mdx -->
Hoisting 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.
```js live
// Function declaration
console.log(foo()); // Works fine
function foo() {
return 'Hello';
}
// Function expression
console.log(bar()); // Throws TypeError: bar is not a function
var bar = function () {
return 'Hello';
};
```
<!-- Update here: /questions/how-does-hoisting-affect-function-declarations-and-expressions/en-US.mdx -->
<br>
[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)
<br>
### What are the potential issues caused by hoisting?
<!-- Update here: /questions/what-are-the-potential-issues-caused-by-hoisting/en-US.mdx -->
Hoisting 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:
```js live
console.log(a); // undefined
var a = 5;
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;
```
<!-- Update here: /questions/what-are-the-potential-issues-caused-by-hoisting/en-US.mdx -->
<br>
[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)
<br>
### How can you avoid problems related to hoisting?
<!-- Update here: /questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx -->
To 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.
```js live
// Use let or const
let x = 10;
const y = 20;
console.log(x, y); // Output: 10 20
// Declare functions before calling them
function myFunction() {
console.log('Hello, world!');
}
myFunction(); // Output: 'Hello, world!'
```
<!-- Update here: /questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx -->
<br>
[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)
<br>
### What is the difference between `==` and `===` in JavaScript?
<!-- Update here: /questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx -->
`==` 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`.
| Operator | `==` | `===` |
| --- | --- | --- |
| Name | (Loose) Equality operator | Strict equality operator |
| Type coercion | Yes | No |
| Compares value and type | No | Yes |
<!-- Update here: /questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx -->
<br>
[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)
<br>
### What language constructs do you use for iterating over object properties and array items in JavaScript?
<!-- Update here: /questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx -->
There are multiple ways to iterate over object properties as well as arrays in JavaScript:
**`for...in` loop**
The `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
```js live
const obj = {
a: 1,
b: 2,
c: 3,
};
for (const key in obj) {
// To avoid iterating over inherited properties
if (Object.hasOwn(obj, key)) {
console.log(`${key}: ${obj[key]}`);
}
}
```
**`Object.keys()`**
`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.
```js live
const obj = {
a: 1,
b: 2,
c: 3,
};
Object.keys(obj).forEach((key) => {
console.log(`${key}: ${obj[key]}`);
});
```
Most common ways to iterate over array are using `for` loop and `Array.prototype.forEach` method.
**Using `for` loop**
```js live
let array = [1, 2, 3, 4, 5, 6];
for (let index = 0; index < array.length; index++) {
console.log(array[index]);
}
```
**Using `Array.prototype.forEach` method**
```js live
let array = [1, 2, 3, 4, 5, 6];
array.forEach((number, index) => {
console.log(`${number} at index ${index}`);
});
```
**Using `for...of`**
This 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.
```js live
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
console.log(number);
}
```
There are also other inbuilt methods available which are suitable for specific scenarios for example:
- `Array.prototype.filter`: You can use the `filter` method to create a new array containing only the elements that satisfy a certain condition.
- `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.
- `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.
<!-- Update here: /questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx -->
<br>
[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)
<br>
### What is the purpose of the `break` and `continue` statements?
<!-- Update here: /questions/what-is-the-purpose-of-the-break-and-continue-statements/en-US.mdx -->
The `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.
```js live
for (let i = 0; i < 10; i++) {
if (i === 5) break; // exits the loop when i is 5
console.log(i);
}
for (let i = 0; i < 10; i++) {
if (i === 5) continue; // skips the iteration when i is 5
console.log(i);
}
```
<!-- Update here: /questions/what-is-the-purpose-of-the-break-and-continue-statements/en-US.mdx -->
<br>
[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)
<br>
### What is the ternary operator and how is it used?
<!-- Update here: /questions/what-is-the-ternary-operator-and-how-is-it-used/en-US.mdx -->
The 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'`.
<!-- Update here: /questions/what-is-the-ternary-operator-and-how-is-it-used/en-US.mdx -->
<br>
[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)
<br>
### How do you access the index of an element in an array during iteration?
<!-- Update here: /questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.mdx -->
To 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`:
```js live
const array = ['a', 'b', 'c'];
array.forEach((element, index) => {
console.log(index, element);
});
```
<!-- Update here: /questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.mdx -->
<br>
[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)
<br>
### What is the purpose of the `switch` statement?
<!-- Update here: /questions/what-is-the-purpose-of-the-switch-statement/en-US.mdx -->
The `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.
```js
switch (expression) {
case value1:
// code to be executed if expression === value1
break;
case value2:
// code to be executed if expression === value2
break;
default:
// code to be executed if no case matches
}
```
<!-- Update here: /questions/what-is-the-purpose-of-the-switch-statement/en-US.mdx -->
<br>
[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)
<br>
### What are rest parameters and how are they used?
<!-- Update here: /questions/what-are-rest-parameters-and-how-are-they-used/en-US.mdx -->
Rest 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.
```js live
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10
```
<!-- Update here: /questions/what-are-rest-parameters-and-how-are-they-used/en-US.mdx -->
<br>
[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)
<br>
### Explain the concept of the spread operator and its uses
<!-- Update here: /questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.mdx -->
The 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.
```js live
// Copying an array
const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // Output: [1, 2, 3]
// Merging arrays
const arr3 = [4, 5, 6];
const mergedArray = [...arr1, ...arr3];
console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]
// Copying an object
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // Output: { a: 1, b: 2 }
// Merging objects
const obj3 = { c: 3, d: 4 };
const mergedObject = { ...obj1, ...obj3 };
console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }
// Passing array elements as function arguments
const sum = (x, y, z) => x + y + z;
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // Output: 6
```
<!-- Update here: /questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.mdx -->
<br>
[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)
<br>
### What are the benefits of using spread syntax in JavaScript and how is it different from rest syntax?
<!-- Update here: /questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx -->
**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.
| Operation | Traditional | Spread |
| -------------- | ------------------------------- | ---------------------- |
| Array cloning | `arr.slice()` | `[...arr]` |
| Array merging | `arr1.concat(arr2)` | `[...arr1, ...arr2]` |
| Object cloning | `Object.assign({}, obj)` | `{ ...obj }` |
| Object merging | `Object.assign({}, obj1, obj2)` | `{ ...obj1, ...obj2 }` |
**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.
```js live
// Using rest syntax in a function
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // Output: 6
```
<!-- Update here: /questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx -->
<br>
[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)
<br>
### What are iterators and generators in JavaScript and what are they used for?
<!-- Update here: /questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx -->
In JavaScript, iterators and generators are powerful tools for managing sequences of data and controlling the flow of execution in a more flexible way.
**Iterators** are objects that define a sequence and potentially a return value upon its termination. It adheres to a specific interface:
- An iterator object must implement a `next()` method.
- The `next()` method returns an object with two properties:
- `value`: The next value in the sequence.
- `done`: A boolean that is `true` if the iterator has finished its sequence, otherwise `false`.
Here's an example of an object implementing the iterator interface.
```js live
const iterator = {
current: 0,
last: 5,
next() {
if (this.current <= this.last) {
return { value: this.current++, done: false };
} else {
return { value: undefined, done: true };
}
},
};
let result = iterator.next();
while (!result.done) {
console.log(result.value); // Logs 0, 1, 2, 3, 4, 5
result = iterator.next();
}
```
**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()`.
```js live
function* numberGenerator() {
let num = 0;
while (num <= 5) {
yield num++;
}
}
const gen = numberGenerator();
console.log(gen.next()); // { value: 0, done: false }
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: 4, done: false }
console.log(gen.next()); // { value: 5, done: false }
console.log(gen.next()); // { value: undefined, done: true }
```
Generators are powerful for creating iterators on-demand, especially for infinite sequences or complex iteration logic. They can be used for:
- Lazy evaluation – processing elements only when needed, improving memory efficiency for large datasets.
- Implementing iterators for custom data structures.
- Creating asynchronous iterators for handling data streams.
<!-- Update here: /questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx -->
<br>
[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)
<br>
### Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}` in JavaScript
<!-- Update here: /questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx -->
`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).
If you try to invoke a function expression before it is declared, you will get an `Uncaught TypeError: XXX is not a function` error.
Function declarations can be called in the enclosing scope even before they are declared.
```js live
foo(); // 'FOOOOO'
function foo() {
console.log('FOOOOO');
}
```
Function expressions if called before they are declared will result in an error.
```js live
foo(); // Uncaught TypeError: foo is not a function
var foo = function () {
console.log('FOOOOO');
};
```
Another 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`.
```js live
const myFunc = function namedFunc() {
console.log(namedFunc); // Works
};
myFunc(); // Runs the function and logs the function reference
console.log(namedFunc); // ReferenceError: namedFunc is not defined
```
**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.
<!-- Update here: /questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx -->
<br>
[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)
<br>
### What is the difference between a parameter and an argument?
<!-- Update here: /questions/what-is-the-difference-between-a-parameter-and-an-argument/en-US.mdx -->
A 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.
<!-- Update here: /questions/what-is-the-difference-between-a-parameter-and-an-argument/en-US.mdx -->
<br>
[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)
<br>
### Explain the concept of hoisting with regards to functions
<!-- Update here: /questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.mdx -->
Hoisting 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.
```js live
// Function declaration
hoistedFunction(); // Works fine
function hoistedFunction() {
console.log('This function is hoisted');
}
// Function expression
nonHoistedFunction(); // Throws an error
var nonHoistedFunction = function () {
console.log('This function is not hoisted');
};
```
<!-- Update here: /questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.mdx -->
<br>
[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)
<br>
### What's the difference between `.call` and `.apply` in JavaScript?
<!-- Update here: /questions/whats-the-difference-between-call-and-apply/en-US.mdx -->
`.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:
- `.call(thisArg, arg1, arg2, ...)`: Takes arguments individually.
- `.apply(thisArg, [argsArray])`: Takes arguments as an array.
Assuming we have a function `add`, the function can be invoked using `.call` and `.apply` in the following manner:
```js live
function add(a, b) {
return a + b;
}
console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3
```
<!-- Update here: /questions/whats-the-difference-between-call-and-apply/en-US.mdx -->
<br>
[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)
<br>
### Can you offer a use case for the new arrow => function syntax?
<!-- Update here: /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 -->
Arrow 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.
```js live
const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6]
```
<!-- Update here: /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 -->
<br>
[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)
<br>
### Difference between: `function Person(){}`, `const person = Person()`, and `const person = new Person()` in JavaScript?
<!-- Update here: /questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.mdx -->
- `function Person(){}`: A function declaration in JavaScript. It can be used as a regular function or as a constructor.
- `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.
- `const person = new Person()`: Creates a new instance of `Person`, correctly utilizing the constructor function to initialize the new object.
| Aspect | `function Person(){}` | `const person = Person()` | `const person = new Person()` |
| --- | --- | --- | --- |
| Type | Function declaration | Function call | Constructor call |
| Usage | Defines a function | Invokes `Person` as a regular function | Creates a new instance of `Person` |
| Instance Creation | No instance created | No instance created | New instance created |
| Common Mistake | N/A | Misusing as constructor leading to `undefined` | None (when used correctly) |
<!-- Update here: /questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.mdx -->
<br>
[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)
<br>
### What is the definition of a higher-order function in JavaScript?
<!-- Update here: /questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx -->
A 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.
Higher-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.
Imagine a scenario where we have an array of names that we need to transform to uppercase. The imperative way will be as such:
```js live
const names = ['irish', 'daisy', 'anna'];
function transformNamesToUppercase(names) {
const results = [];
for (let i = 0; i < names.length; i++) {
results.push(names[i].toUpperCase());
}
return results;
}
console.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']
```
Using `Array.prototype.map(transformerFn)` makes the code shorter and more declarative.
```js live
const names = ['irish', 'daisy', 'anna'];
function transformNamesToUppercase(names) {
return names.map((name) => name.toUpperCase());
}
console.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']
```
<!-- Update here: /questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx -->
<br>
[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)
<br>
### What are callback functions and how are they used?
<!-- Update here: /questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx -->
A 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:
```js live
function fetchData(callback) {
// assume an asynchronous operation to fetch data
const data = { name: 'John Doe' };
callback(data);
}
function handleData(data) {
console.log(data);
}
fetchData(handleData);
```
<!-- Update here: /questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx -->
<br>
[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)
<br>
### What's a typical use case for anonymous functions in JavaScript?
<!-- Update here: /questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx -->
Anonymous 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.
```js live
const arr = [-1, 0, 5, 6];
// The filter method is passed an anonymous function.
arr.filter((x) => x > 1); // [5, 6]
```
They 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.
```js live
// Encapsulating Code
(function () {
// Some code here.
})();
// Callbacks
setTimeout(function () {
console.log('Hello world!');
}, 1000);
// Functional programming constructs
const arr = [1, 2, 3];
const double = arr.map(function (el) {
return el * 2;
});
console.log(double); // [2, 4, 6]
```
<!-- Update here: /questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx -->
<br>
[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)
<br>
### What is recursion and how is it used in JavaScript?
<!-- Update here: /questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.mdx -->
Recursion 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, ca
gitextract_d8pnkcyw/
├── .github/
│ └── workflows/
│ └── gen-toc.yml
├── .gitignore
├── .prettierignore
├── .prettierrc
├── README.md
├── __template__/
│ ├── concise/
│ │ ├── en-US.mdx
│ │ └── metadata.json
│ └── detailed/
│ ├── en-US.mdx
│ └── metadata.json
├── data/
│ └── questions.json
├── langnostic.config.ts
├── package.json
├── pnpm-workspace.yaml
├── questions/
│ ├── can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── describe-event-bubbling/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── describe-event-capturing/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── describe-the-difference-between-script-async-and-script-defer/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── difference-between-document-load-event-and-document-domcontentloaded-event/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── difference-between-function-person-var-person-person-and-var-person-new-person/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-ajax-in-as-much-detail-as-possible/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-event-delegation/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-function-prototype-bind/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-hoisting/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-how-jsonp-works-and-how-its-not-really-ajax/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-how-prototypal-inheritance-works/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-how-this-works-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-a-callback-function-in-asynchronous-operations/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-a-microtask-queue/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-debouncing-and-throttling/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-error-propagation-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-hoisting-with-regards-to-functions/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-inheritance-in-es2015-classes/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-input-validation-and-its-importance-in-security/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-lexical-scoping/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-partial-application/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-scope-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-tagged-templates/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-test-driven-development-tdd/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-the-prototype-pattern/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-the-singleton-pattern/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-the-spread-operator-and-its-uses/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-the-strategy-pattern/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-the-web-socket-api/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-this-binding-in-event-handlers/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-concept-of-tree-shaking-in-module-bundling/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-global-scope-function-scope-and-block-scope/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-mutable-and-immutable-objects/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-shallow-copy-and-deep-copy/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-synchronous-and-asynchronous-functions/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-difference-in-hoisting-between-var-let-and-const/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-differences-between-commonjs-modules-and-es-modules/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-the-different-states-of-a-promise/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-different-ways-the-this-keyword-can-be-bound/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-event-phases-in-a-browser/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-observer-pattern-and-its-use-cases/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── explain-the-same-origin-policy-with-regards-to-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── how-can-closures-be-used-to-create-private-variables/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-avoid-problems-related-to-hoisting/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-create-custom-error-objects/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-optimize-dom-manipulation-for-better-performance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-optimize-network-requests-for-better-performance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-prevent-clickjacking-attacks/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-can-you-share-code-between-files/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── how-can-you-test-asynchronous-code-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-currying-and-partial-application-differ-from-each-other/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-iframe-on-a-page-communicate/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-sets-and-maps-handle-equality-checks-for-objects/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-abort-a-web-request-using-abortcontrollers/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-add-remove-and-modify-html-elements-using-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-add-remove-and-update-elements-in-an-array/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-check-if-an-object-has-a-specific-property/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-check-the-data-type-of-a-variable/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-convert-a-set-to-an-array-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-convert-a-string-to-a-number-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-create-a-constructor-function/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-detect-if-javascript-is-disabled-on-a-page/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-handle-errors-in-asynchronous-operations/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-handle-errors-using-trycatch-blocks/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-import-and-export-modules-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-make-an-http-request-using-the-fetch-api/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-manipulate-css-styles-using-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-organize-your-code-module-pattern-classical-inheritance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── how-do-you-prevent-the-default-behavior-of-an-event/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-redirect-to-a-new-page-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-reliably-determine-whether-an-object-is-empty/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-use-windowhistory-api/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-validate-form-elements-using-the-constraint-validation-api/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-do-you-write-unit-tests-for-javascript-code/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-does-hoisting-affect-function-declarations-and-expressions/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-does-javascript-garbage-collection-work/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── how-is-promiseall-different-from-promiseallsettled/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── provide-some-examples-of-how-currying-and-partial-application-can-be-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-are-callback-functions-and-how-are-they-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-default-parameters-and-how-are-they-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-design-patterns-and-why-are-they-useful/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-event-listeners-and-how-are-they-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-iterators-and-generators-and-what-are-they-used-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-javascript-object-getters-and-setters-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-javascript-object-property-flags-and-descriptors/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-javascript-polyfills-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-mocks-and-stubs-and-how-are-they-used-in-testing/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-modules-and-why-are-they-useful/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-progressive-web-applications-pwas/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-promises-and-how-do-they-work/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-proxies-in-javascript-used-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-rest-parameters-and-how-are-they-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-server-sent-events/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-sets-and-maps-and-how-are-they-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-best-practices-for-handling-sensitive-data-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-best-practices-for-writing-maintainable-and-effective-tests/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-common-performance-bottlenecks-in-javascript-applications/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-common-security-headers-and-their-purpose/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-are-some-popular-javascript-testing-frameworks/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-techniques-for-reducing-reflows-and-repaints/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-tools-that-can-be-used-for-javascript-testing/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-symbols-used-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-template-literals-and-how-are-they-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-advantages-and-disadvantages-of-using-ajax/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-benefits-of-using-a-module-bundler/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-benefits-of-using-currying-and-partial-application/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-are-the-common-pitfalls-of-using-the-this-keyword/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-differences-between-es6-class-and-es5-function-constructors/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-are-the-differences-between-map-set-and-weakmap-weakset/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-differences-between-variables-created-using-let-var-or-const/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-are-the-differences-between-xmlhttprequest-and-fetch/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-different-methods-for-iterating-over-an-array/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-different-types-of-errors-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-different-types-of-testing-in-software-development/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-different-ways-to-copy-an-object-or-an-array/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-different-ways-to-make-an-api-call-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-metadata-fields-of-a-module/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-potential-issues-caused-by-hoisting/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-potential-pitfalls-of-using-closures/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-are-the-various-data-types-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-the-various-ways-to-create-objects-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-web-workers-and-how-can-they-be-used-to-improve-performance/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-are-workers-in-javascript-used-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-do-you-think-of-amd-vs-commonjs/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-is-a-closure-and-how-why-would-you-use-one/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-currying-and-how-does-it-work/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-is-objectfreeze-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-objectpreventextensions-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-objectseal-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-recursion-and-how-is-it-used-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-command-pattern-and-how-is-it-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-decorator-pattern-and-how-is-it-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-definition-of-a-higher-order-function/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-a-parameter-and-an-argument/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-double-equal-and-triple-equal/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-innerhtml-and-textcontent/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-mouseenter-and-mouseover-event/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-difference-between-the-window-object-and-the-document-object/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-dom-and-how-is-it-structured/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-factory-pattern-and-how-is-it-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-intl-namespace-object-for/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-prototype-chain-and-how-does-it-work/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-purpose-of-the-break-and-continue-statements/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-purpose-of-the-finally-block/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-purpose-of-the-new-keyword/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-purpose-of-the-switch-statement/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-spread-operator-and-how-is-it-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-ternary-operator-and-how-is-it-used/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-the-use-of-promiseall/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ └── zh-CN.mdx
│ ├── what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── what-tools-and-techniques-do-you-use-for-debugging-javascript-code/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── whats-a-typical-use-case-for-anonymous-functions/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── 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.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── whats-the-difference-between-an-attribute-and-a-property/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── whats-the-difference-between-call-and-apply/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── when-would-you-use-document-write/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── why-is-extending-built-in-javascript-objects-not-a-good-idea/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ ├── why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/
│ │ ├── en-US.langnostic.json
│ │ ├── en-US.mdx
│ │ ├── metadata.json
│ │ ├── pt-BR.mdx
│ │ └── zh-CN.mdx
│ └── why-you-might-want-to-create-static-class-members/
│ ├── en-US.langnostic.json
│ ├── en-US.mdx
│ ├── metadata.json
│ ├── pt-BR.mdx
│ └── zh-CN.mdx
└── scripts/
├── constants.ts
├── gen.ts
├── rank.ts
└── types.ts
SYMBOL INDEX (19 symbols across 4 files)
FILE: scripts/constants.ts
constant GITHUB_ORG (line 1) | const GITHUB_ORG = 'yangshun';
constant GITHUB_REPO (line 2) | const GITHUB_REPO = 'top-javascript-interview-questions';
FILE: scripts/gen.ts
constant README_PATH_EN (line 12) | const README_PATH_EN = 'README.md';
function processQuestion (line 16) | async function processQuestion(
function readQuestionsList (line 74) | async function readQuestionsList() {
function processQuestionList (line 97) | async function processQuestionList(qns: string[]) {
function formatTableOfContents (line 107) | function formatTableOfContents(qnList: QuestionItem[]) {
function formatQuestion (line 124) | function formatQuestion(
type Options (line 158) | type Options = Readonly<{
function generateList (line 168) | async function generateList(qns: string[], options: Options) {
function generateBulletList (line 207) | async function generateBulletList(
function generateAll (line 238) | async function generateAll() {
FILE: scripts/rank.ts
function rankQuestion (line 61) | async function rankQuestion(dirName: string, locale: string = 'en-US') {
function readQuestionsList (line 78) | async function readQuestionsList() {
function rankQuestionList (line 88) | async function rankQuestionList(qns: string[]) {
function generate (line 92) | async function generate() {
FILE: scripts/types.ts
type QuestionMetadata (line 1) | type QuestionMetadata = Readonly<{
type QuestionFrontmatter (line 10) | type QuestionFrontmatter = Readonly<{
type QuestionItem (line 14) | type QuestionItem = Readonly<{
Condensed preview — 833 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (2,200K chars).
[
{
"path": ".github/workflows/gen-toc.yml",
"chars": 1005,
"preview": "name: Generate table of contents\n\non:\n pull_request:\n push:\n branches:\n - main\n\njobs:\n gen-toc:\n runs-on: "
},
{
"path": ".gitignore",
"chars": 2075,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\n.pnpm-debug.log*\n\n# Diagnostic reports"
},
{
"path": ".prettierignore",
"chars": 10,
"preview": "README.md\n"
},
{
"path": ".prettierrc",
"chars": 123,
"preview": "{\n \"bracketSameLine\": true,\n \"printWidth\": 80,\n \"proseWrap\": \"never\",\n \"singleQuote\": true,\n \"trailingComma\": \"all\""
},
{
"path": "README.md",
"chars": 415434,
"preview": "# Top JavaScript Interview Questions (Updated for 2025)\n\n**Updated for 2025!** This repository contains a few hundred cu"
},
{
"path": "__template__/concise/en-US.mdx",
"chars": 53,
"preview": "---\ntitle: TODO_REPLACE_TITLE\n---\n\nTODO_REPLACE_BODY\n"
},
{
"path": "__template__/concise/metadata.json",
"chars": 242,
"preview": "{\n \"slug\": \"todo-change-me\",\n \"languages\": [],\n \"companies\": [],\n \"premium\": false,\n \"duration\": 5,\n \"published\": "
},
{
"path": "__template__/detailed/en-US.mdx",
"chars": 182,
"preview": "---\ntitle: TODO_REPLACE_TITLE\n---\n\n## TL;DR\n\n<!-- Do not use any headings within the TL;DR section. -->\n\n---\n\n## Some h"
},
{
"path": "__template__/detailed/metadata.json",
"chars": 241,
"preview": "{\n \"slug\": \"todo-change-me\",\n \"languages\": [],\n \"companies\": [],\n \"premium\": false,\n \"duration\": 5,\n \"published\": "
},
{
"path": "data/questions.json",
"chars": 12907,
"preview": "{\n \"Data Types & Variables\": [\n \"what-are-the-various-data-types-in-javascript\",\n \"how-do-you-check-the-data-type"
},
{
"path": "langnostic.config.ts",
"chars": 399,
"preview": "import { ConfigType } from 'langnostic';\n\nexport default {\n ai: {\n provider: 'google',\n },\n localeConfig: {\n so"
},
{
"path": "package.json",
"chars": 752,
"preview": "{\n \"name\": \"top-javascript-interview-questions\",\n \"version\": \"1.0.0\",\n \"description\": \"List of top JavaScript intervi"
},
{
"path": "pnpm-workspace.yaml",
"chars": 79,
"preview": "# To let pnpm know this is the repo root as it's also installed as a submodule\n"
},
{
"path": "questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.langnostic.json",
"chars": 1012,
"preview": "{\n \"frontmatter\": {\n \"title\": \"5ba0d4da\",\n \"subtitle\": \"4d47ead\"\n },\n \"content\": {\n \"source\": {\n \"local"
},
{
"path": "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",
"chars": 2953,
"preview": "---\ntitle: Can you offer a use case for the new arrow => function syntax?\nsubtitle: How does this new syntax differ from"
},
{
"path": "questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/metadata.json",
"chars": 363,
"preview": "{\n \"slug\": \"can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-funct"
},
{
"path": "questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/pt-BR.mdx",
"chars": 2812,
"preview": "---\ntitle: Você pode oferecer um caso de uso para a nova sintaxe de arrow function =>?\nsubtitle: Como essa nova sintaxe "
},
{
"path": "questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/zh-CN.mdx",
"chars": 2145,
"preview": "---\ntitle: 箭头 => 函数语法有什么用例？\nsubtitle: 这种新语法与其他函数有何不同？\n---\n\n## TL;DR\n\n箭头函数为用 JavaScript 编写函数提供了一种简洁的语法。它们对于在方法和回调中维护 `thi"
},
{
"path": "questions/describe-event-bubbling/en-US.langnostic.json",
"chars": 1789,
"preview": "{\n \"frontmatter\": {\n \"title\": \"e76fac09\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/describe-event-bubbling/en-US.mdx",
"chars": 8776,
"preview": "---\ntitle: Describe event bubbling in JavaScript and browsers\n---\n\n## TL;DR\n\nEvent bubbling is a DOM event propagation m"
},
{
"path": "questions/describe-event-bubbling/metadata.json",
"chars": 283,
"preview": "{\n \"slug\": \"describe-event-bubbling\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"free\",\n \"duration\": 5,\n \"pub"
},
{
"path": "questions/describe-event-bubbling/pt-BR.mdx",
"chars": 2392,
"preview": "---\ntitle: Descreva a propagação de eventos\n---\n\nA propagação de eventos é um mecanismo na DOM (Modelo de Objetos do Doc"
},
{
"path": "questions/describe-event-bubbling/zh-CN.mdx",
"chars": 5534,
"preview": "---\ntitle: 描述 JavaScript 和浏览器的事件冒泡\n---\n\n## TL;DR\n\n事件冒泡是一种 DOM 事件传播机制，其中一个事件（例如点击）从目标元素开始，冒泡到文档的根。这允许祖先元素也响应事件。\n\n事件冒泡对于事件"
},
{
"path": "questions/describe-event-capturing/en-US.langnostic.json",
"chars": 1111,
"preview": "{\n \"frontmatter\": {\n \"title\": \"b0183641\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/describe-event-capturing/en-US.mdx",
"chars": 4926,
"preview": "---\ntitle: Describe event capturing in JavaScript and browsers\n---\n\n## TL;DR\n\nEvent capturing is a lesser-used counterpa"
},
{
"path": "questions/describe-event-capturing/metadata.json",
"chars": 284,
"preview": "{\n \"slug\": \"describe-event-capturing\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"free\",\n \"duration\": 5,\n \"pu"
},
{
"path": "questions/describe-event-capturing/zh-CN.mdx",
"chars": 2514,
"preview": "---\ntitle: 描述 JavaScript 和浏览器中的事件捕获\n---\n\n## TL;DR\n\n事件捕获是 DOM 事件传播机制中较少使用的 [事件冒泡](/questions/quiz/describe-event-bubbling"
},
{
"path": "questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.langnostic.json",
"chars": 1625,
"preview": "{\n \"frontmatter\": {\n \"title\": \"cd74bf50\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx",
"chars": 9140,
"preview": "---\ntitle: Describe the difference between a cookie, `sessionStorage` and `localStorage` in browsers\n---\n\n## TL;DR\n\nAll "
},
{
"path": "questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/metadata.json",
"chars": 371,
"preview": "{\n \"slug\": \"describe-the-difference-between-a-cookie-sessionstorage-and-localstorage\",\n \"languages\": [],\n \"companies\""
},
{
"path": "questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/pt-BR.mdx",
"chars": 2280,
"preview": "---\ntitle: Descreva a diferença entre cookie, `sessionStorage` e `localStorage`.\n---\n\nLocal storage is useful for storin"
},
{
"path": "questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.mdx",
"chars": 5260,
"preview": "---\ntitle: 描述浏览器中 cookie、`sessionStorage` 和 `localStorage` 之间的区别\n---\n\n## 总结\n\n以下都是在客户端（本例中为用户的浏览器）上存储数据的机制。`localStorage`"
},
{
"path": "questions/describe-the-difference-between-script-async-and-script-defer/en-US.langnostic.json",
"chars": 1227,
"preview": "{\n \"frontmatter\": {\n \"title\": \"d7ae8e9e\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/describe-the-difference-between-script-async-and-script-defer/en-US.mdx",
"chars": 6062,
"preview": "---\ntitle: Describe the difference between `<script>`, `<script async>` and `<script defer>`\n---\n\n## TL;DR\n\nAll of these"
},
{
"path": "questions/describe-the-difference-between-script-async-and-script-defer/metadata.json",
"chars": 317,
"preview": "{\n \"slug\": \"describe-the-difference-between-script-async-and-script-defer\",\n \"languages\": [],\n \"companies\": [],\n \"ac"
},
{
"path": "questions/describe-the-difference-between-script-async-and-script-defer/pt-BR.mdx",
"chars": 2159,
"preview": "---\ntitle: Descreva a diferença entre `<script>`, `<script async>` e `<script defer>`\n---\n\ntags `<script>` são usadas pa"
},
{
"path": "questions/describe-the-difference-between-script-async-and-script-defer/zh-CN.mdx",
"chars": 3767,
"preview": "---\ntitle: 描述 `<script>`、`<script async>` 和 `<script defer>` 之间的区别\n---\n\n## TL;DR\n\n所有这些方式（`<script>`、`<script async>` 和 `"
},
{
"path": "questions/difference-between-document-load-event-and-document-domcontentloaded-event/en-US.langnostic.json",
"chars": 789,
"preview": "{\n \"frontmatter\": {\n \"title\": \"81ee2f0a\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/difference-between-document-load-event-and-document-domcontentloaded-event/en-US.mdx",
"chars": 2503,
"preview": "---\ntitle: Difference between document `load` event and document `DOMContentLoaded` event?\n---\n\n## TL;DR\n\nThe `DOMConten"
},
{
"path": "questions/difference-between-document-load-event-and-document-domcontentloaded-event/metadata.json",
"chars": 349,
"preview": "{\n \"slug\": \"difference-between-document-load-event-and-document-domcontentloaded-event\",\n \"languages\": [],\n \"companie"
},
{
"path": "questions/difference-between-document-load-event-and-document-domcontentloaded-event/pt-BR.mdx",
"chars": 420,
"preview": "---\ntitle: Qual a diferença entre o evento `load` do documento e o evento `DOMContentLoaded` do documento?\n---\n\nO evento"
},
{
"path": "questions/difference-between-document-load-event-and-document-domcontentloaded-event/zh-CN.mdx",
"chars": 1527,
"preview": "---\ntitle: document `load` 事件和 document `DOMContentLoaded` 事件的区别？\n---\n\n## TL;DR\n\n`DOMContentLoaded` 事件在初始 HTML 文档完全加载和解析"
},
{
"path": "questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.langnostic.json",
"chars": 991,
"preview": "{\n \"frontmatter\": {\n \"title\": \"a53864cf\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.mdx",
"chars": 4345,
"preview": "---\ntitle: 'Difference between: `function Person(){}`, `const person = Person()`, and `const person = new Person()` in J"
},
{
"path": "questions/difference-between-function-person-var-person-person-and-var-person-new-person/metadata.json",
"chars": 334,
"preview": "{\n \"slug\": \"difference-between-function-person-var-person-person-and-var-person-new-person\",\n \"languages\": [],\n \"comp"
},
{
"path": "questions/difference-between-function-person-var-person-person-and-var-person-new-person/pt-BR.mdx",
"chars": 1329,
"preview": "---\ntitle: 'Diferença entre: `function Person(){}`, `var person = Person()`, e `var person = new Person()`?'\n---\n\nEsta p"
},
{
"path": "questions/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.mdx",
"chars": 2804,
"preview": "---\ntitle: >-\n JavaScript 中：`function Person(){}`、`const person = Person()` 和 `const person =\n new Person()` 的区别？\n---\n"
},
{
"path": "questions/explain-ajax-in-as-much-detail-as-possible/en-US.langnostic.json",
"chars": 1189,
"preview": "{\n \"frontmatter\": {\n \"title\": \"74a06a67\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-ajax-in-as-much-detail-as-possible/en-US.mdx",
"chars": 6210,
"preview": "---\ntitle: Explain AJAX in as much detail as possible\n---\n\n## TL;DR\n\nAJAX (Asynchronous JavaScript and XML) facilitates "
},
{
"path": "questions/explain-ajax-in-as-much-detail-as-possible/metadata.json",
"chars": 305,
"preview": "{\n \"slug\": \"explain-ajax-in-as-much-detail-as-possible\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"free\",\n \"d"
},
{
"path": "questions/explain-ajax-in-as-much-detail-as-possible/pt-BR.mdx",
"chars": 870,
"preview": "---\ntitle: Explique o Ajax com o máximo de detalhes possível.\n---\n\nAjax (asynchronous JavaScript and XML) é um conjunto "
},
{
"path": "questions/explain-ajax-in-as-much-detail-as-possible/zh-CN.mdx",
"chars": 4048,
"preview": "---\ntitle: 尽可能详细地解释 AJAX\n---\n\n## TL;DR\n\nAJAX（异步 JavaScript 和 XML）促进客户端和服务器之间的异步通信，无需重新加载即可实现对网页的动态更新。它使用 `XMLHttpRequest"
},
{
"path": "questions/explain-event-delegation/en-US.langnostic.json",
"chars": 1551,
"preview": "{\n \"frontmatter\": {\n \"title\": \"36f29cf7\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-event-delegation/en-US.mdx",
"chars": 7803,
"preview": "---\ntitle: Explain event delegation in JavaScript\n---\n\n## TL;DR\n\nEvent delegation is a technique in JavaScript where a s"
},
{
"path": "questions/explain-event-delegation/metadata.json",
"chars": 293,
"preview": "{\n \"slug\": \"explain-event-delegation\",\n \"languages\": [],\n \"companies\": [\"linkedin\"],\n \"access\": \"free\",\n \"duration\""
},
{
"path": "questions/explain-event-delegation/pt-BR.mdx",
"chars": 2488,
"preview": "---\ntitle: Explique delegação do evento\n---\n\nA delegação de eventos é um conceito fundamental no desenvolvimento web que"
},
{
"path": "questions/explain-event-delegation/zh-CN.mdx",
"chars": 3824,
"preview": "---\ntitle: 解释 JavaScript 中的事件委托\n---\n\n## TL;DR\n\n事件委托是 JavaScript 中的一种技术，它将单个事件监听器附加到父元素，而不是将事件监听器附加到多个子元素。当子元素上发生事件时，该事件会"
},
{
"path": "questions/explain-function-prototype-bind/en-US.langnostic.json",
"chars": 1305,
"preview": "{\n \"frontmatter\": {\n \"title\": \"9152cbf3\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-function-prototype-bind/en-US.mdx",
"chars": 4947,
"preview": "---\ntitle: Explain `Function.prototype.bind` in JavaScript\n---\n\n## TL;DR\n\n`Function.prototype.bind` is a method in JavaS"
},
{
"path": "questions/explain-function-prototype-bind/metadata.json",
"chars": 298,
"preview": "{\n \"slug\": \"explain-function-prototype-bind\",\n \"languages\": [],\n \"companies\": [\"atlassian\"],\n \"access\": \"free\",\n \"d"
},
{
"path": "questions/explain-function-prototype-bind/pt-BR.mdx",
"chars": 1759,
"preview": "---\ntitle: Explique `Function.prototype.bind`\n---\n\n> O método `bind()` cria uma nova função que, quando chamada, tem sua"
},
{
"path": "questions/explain-function-prototype-bind/zh-CN.mdx",
"chars": 3240,
"preview": "---\ntitle: 解释 JavaScript 中的 `Function.prototype.bind`\n---\n\n## TL;DR\n\n`Function.prototype.bind` 是 JavaScript 中的一个方法，它允许你创"
},
{
"path": "questions/explain-hoisting/en-US.langnostic.json",
"chars": 1907,
"preview": "{\n \"frontmatter\": {\n \"title\": \"aeb58a5c\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-hoisting/en-US.mdx",
"chars": 6977,
"preview": "---\ntitle: Explain the concept of \"hoisting\" in JavaScript\n---\n\n## TL;DR\n\nHoisting is a JavaScript mechanism where varia"
},
{
"path": "questions/explain-hoisting/metadata.json",
"chars": 262,
"preview": "{\n \"slug\": \"explain-hoisting\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"free\",\n \"duration\": 5,\n \"published\""
},
{
"path": "questions/explain-hoisting/pt-BR.mdx",
"chars": 1769,
"preview": "---\ntitle: Explique \"hoisting\"\n---\n\nHoisting é um termo usado para explicar o comportamento de declarações variáveis em "
},
{
"path": "questions/explain-hoisting/zh-CN.mdx",
"chars": 3659,
"preview": "---\ntitle: 解释 JavaScript 中的“hoisting”（变量提升）概念\n---\n\n## TL;DR\n\nHoisting（变量提升）是一种 JavaScript 机制，在编译阶段，变量和函数声明会被“提升”到其包含作用域的"
},
{
"path": "questions/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.langnostic.json",
"chars": 909,
"preview": "{\n \"content\": {\n \"source\": {\n \"hashes\": [\n \"77da26a5\",\n \"4c1c525c\",\n \"2a7816d0\",\n \""
},
{
"path": "questions/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.mdx",
"chars": 3252,
"preview": "---\ntitle: Explain how JSONP works (and how it's not really Ajax)\n---\n\n## TL;DR\n\nJSONP (JSON with Padding) is a techniqu"
},
{
"path": "questions/explain-how-jsonp-works-and-how-its-not-really-ajax/metadata.json",
"chars": 331,
"preview": "{\n \"slug\": \"explain-how-jsonp-works-and-how-its-not-really-ajax\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"fr"
},
{
"path": "questions/explain-how-jsonp-works-and-how-its-not-really-ajax/pt-BR.mdx",
"chars": 1418,
"preview": "---\ntitle: Explique como o JSONP funciona (e como ele não é Ajax)\n---\n\nO JSONP (JSON com padding) é um método comumente "
},
{
"path": "questions/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.mdx",
"chars": 1948,
"preview": "---\ntitle: 解释 JSONP 的工作原理（以及它实际上并非 Ajax）\n---\n\n## TL;DR\n\nJSONP（带填充的 JSON）是一种用于克服 Web 浏览器中的同源策略的技术，允许您从不同域的服务器请求数据。它的工作原理是"
},
{
"path": "questions/explain-how-prototypal-inheritance-works/en-US.langnostic.json",
"chars": 985,
"preview": "{\n \"frontmatter\": {\n \"title\": \"e48dcbd3\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-how-prototypal-inheritance-works/en-US.mdx",
"chars": 7390,
"preview": "---\ntitle: Explain how prototypal inheritance works in JavaScript\n---\n\n## TL;DR\n\nPrototypical inheritance in JavaScript "
},
{
"path": "questions/explain-how-prototypal-inheritance-works/metadata.json",
"chars": 328,
"preview": "{\n \"slug\": \"explain-how-prototypal-inheritance-works\",\n \"languages\": [],\n \"companies\": [\"apple\", \"microsoft\", \"linked"
},
{
"path": "questions/explain-how-prototypal-inheritance-works/pt-BR.mdx",
"chars": 2057,
"preview": "---\ntitle: Explique como funciona a herança de protótipos\n---\n\nEssa é uma pergunta extremamente comum em entrevistas de "
},
{
"path": "questions/explain-how-prototypal-inheritance-works/zh-CN.mdx",
"chars": 5344,
"preview": "---\ntitle: 解释 JavaScript 中原型继承的工作原理\n---\n\n## TL;DR\n\nJavaScript 中的原型继承是对象从其他对象继承属性和方法的一种方式。每个 JavaScript 对象都有一个名为 `[[Proto"
},
{
"path": "questions/explain-how-this-works-in-javascript/en-US.langnostic.json",
"chars": 2149,
"preview": "{\n \"frontmatter\": {\n \"title\": \"609c51e2\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-how-this-works-in-javascript/en-US.mdx",
"chars": 9106,
"preview": "---\ntitle: Explain how `this` works in JavaScript\n---\n\n## TL;DR\n\nThere's no simple explanation for `this`; it is one of "
},
{
"path": "questions/explain-how-this-works-in-javascript/metadata.json",
"chars": 299,
"preview": "{\n \"slug\": \"explain-how-this-works-in-javascript\",\n \"languages\": [],\n \"companies\": [\"linkedin\"],\n \"access\": \"free\",\n"
},
{
"path": "questions/explain-how-this-works-in-javascript/pt-BR.mdx",
"chars": 2148,
"preview": "---\ntitle: Explique como `this` funciona em JavaScript\n---\n\nNão há uma explicação simples para `this`; ela é um dos conc"
},
{
"path": "questions/explain-how-this-works-in-javascript/zh-CN.mdx",
"chars": 6050,
"preview": "---\ntitle: 解释 JavaScript 中 `this` 的工作原理\n---\n\n## TL;DR\n\n`this` 没有简单的解释；它是 JavaScript 中最令人困惑的概念之一，因为它的行为与其他许多编程语言不同。`this`"
},
{
"path": "questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.langnostic.json",
"chars": 951,
"preview": "{\n \"frontmatter\": {\n \"title\": \"eeba62ba\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx",
"chars": 3132,
"preview": "---\ntitle: Explain the concept of a callback function in asynchronous operations\n---\n\n## TL;DR\n\nA callback function is a"
},
{
"path": "questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/metadata.json",
"chars": 365,
"preview": "{\n \"slug\": \"explain-the-concept-of-a-callback-function-in-asynchronous-operations\",\n \"languages\": [],\n \"companies\": ["
},
{
"path": "questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.mdx",
"chars": 1903,
"preview": "---\ntitle: 解释异步操作中回调函数的概念\n---\n\n## TL;DR\n\n回调函数是作为参数传递给另一个函数的函数，然后在外部函数中调用该函数以完成某种例程或操作。在异步操作中，回调用于处理需要时间才能完成的任务，例如网络请求或文件"
},
{
"path": "questions/explain-the-concept-of-a-microtask-queue/en-US.langnostic.json",
"chars": 951,
"preview": "{\n \"frontmatter\": {\n \"title\": \"6e9360d9\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-a-microtask-queue/en-US.mdx",
"chars": 2762,
"preview": "---\ntitle: Explain the concept of a microtask queue\n---\n\n## TL;DR\n\nThe microtask queue is a queue of tasks that need to "
},
{
"path": "questions/explain-the-concept-of-a-microtask-queue/metadata.json",
"chars": 343,
"preview": "{\n \"slug\": \"explain-the-concept-of-a-microtask-queue\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"free\",\n \"dur"
},
{
"path": "questions/explain-the-concept-of-a-microtask-queue/zh-CN.mdx",
"chars": 1442,
"preview": "---\ntitle: 解释微任务队列的概念\n---\n\n## TL;DR\n\n微任务队列是一个任务队列，需要在当前执行的脚本之后和任何其他任务之前执行。微任务通常用于需要紧接在当前操作之后执行的任务，例如 promise 回调。微任务队列在宏任"
},
{
"path": "questions/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/en-US.langnostic.json",
"chars": 1351,
"preview": "{\n \"frontmatter\": {\n \"title\": \"c319828f\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/en-US.mdx",
"chars": 3135,
"preview": "---\ntitle: Explain the concept of caching and how it can be used to improve performance\n---\n\n## TL;DR\n\nCaching is a tech"
},
{
"path": "questions/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/metadata.json",
"chars": 379,
"preview": "{\n \"slug\": \"explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance\",\n \"languages\": [],\n \"compan"
},
{
"path": "questions/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/zh-CN.mdx",
"chars": 1523,
"preview": "---\ntitle: 解释缓存的概念以及如何使用它来提高性能\n---\n\n## TL;DR\n\n缓存是一种用于存储文件或数据的副本的临时存储技术，以减少访问它们所需的时间。它通过减少重复从原始来源获取数据的需要来提高性能。在前端开发中，可以使用"
},
{
"path": "questions/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/en-US.langnostic.json",
"chars": 1267,
"preview": "{\n \"frontmatter\": {\n \"title\": \"5b42839e\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/en-US.mdx",
"chars": 3115,
"preview": "---\ntitle: Explain the concept of code coverage and how it can be used to assess test quality\n---\n\n## TL;DR\n\nCode covera"
},
{
"path": "questions/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/metadata.json",
"chars": 371,
"preview": "{\n \"slug\": \"explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality\",\n \"languages\": [],\n \""
},
{
"path": "questions/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/zh-CN.mdx",
"chars": 1510,
"preview": "---\ntitle: 解释代码覆盖率的概念以及如何使用它来评估测试质量\n---\n\n## TL;DR\n\n代码覆盖率是一个衡量测试套件运行时执行代码百分比的指标。它通过识别代码库中未测试的部分来帮助评估测试的质量。较高的代码覆盖率通常表明测试更"
},
{
"path": "questions/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/en-US.langnostic.json",
"chars": 1141,
"preview": "{\n \"frontmatter\": {\n \"title\": \"448c8185\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/en-US.mdx",
"chars": 3489,
"preview": "---\ntitle: Explain the concept of Content Security Policy (CSP) and how it enhances security\n---\n\n## TL;DR\n\nContent Secu"
},
{
"path": "questions/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/metadata.json",
"chars": 370,
"preview": "{\n \"slug\": \"explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security\",\n \"languages\": [],\n \"com"
},
{
"path": "questions/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/zh-CN.mdx",
"chars": 1283,
"preview": "---\ntitle: 解释内容安全策略 (CSP) 的概念以及它如何增强安全性\n---\n\n## 总结\n\n内容安全策略 (CSP) 是一项安全功能，通过指定受信任的内容来源，帮助防止各种类型的攻击，例如跨站点脚本 (XSS) 和数据注入攻击。"
},
{
"path": "questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/en-US.langnostic.json",
"chars": 1071,
"preview": "{\n \"frontmatter\": {\n \"title\": \"263ed28c\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/en-US.mdx",
"chars": 3378,
"preview": "---\ntitle: Explain the concept of Cross-Site Request Forgery (CSRF) and its mitigation techniques\n---\n\n## TL;DR\n\nCross-S"
},
{
"path": "questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/metadata.json",
"chars": 389,
"preview": "{\n \"slug\": \"explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques\",\n \"languages\": [],\n "
},
{
"path": "questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/zh-CN.mdx",
"chars": 1700,
"preview": "---\ntitle: 解释跨站点请求伪造 (CSRF) 的概念及其缓解技术\n---\n\n## TL;DR\n\n跨站点请求伪造 (CSRF) 是一种攻击，恶意网站会诱骗用户的浏览器向用户已通过身份验证的另一个站点发出不需要的请求。这可能导致代表用"
},
{
"path": "questions/explain-the-concept-of-debouncing-and-throttling/en-US.langnostic.json",
"chars": 1071,
"preview": "{\n \"frontmatter\": {\n \"title\": \"bdb54e0f\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-debouncing-and-throttling/en-US.mdx",
"chars": 4415,
"preview": "---\ntitle: Explain the concept of debouncing and throttling\n---\n\n## TL;DR\n\nDebouncing and throttling are techniques used"
},
{
"path": "questions/explain-the-concept-of-debouncing-and-throttling/metadata.json",
"chars": 360,
"preview": "{\n \"slug\": \"explain-the-concept-of-debouncing-and-throttling\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"free\""
},
{
"path": "questions/explain-the-concept-of-debouncing-and-throttling/zh-CN.mdx",
"chars": 2680,
"preview": "---\ntitle: 解释防抖和节流的概念\n---\n\n## 总结\n\n防抖和节流是用于控制函数执行速率的技术。防抖确保函数仅在自上次调用后经过指定的延迟后才被调用。节流确保函数在一个指定的时间间隔内最多被调用一次。\n\n防抖会延迟函数的执行，直"
},
{
"path": "questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.langnostic.json",
"chars": 1429,
"preview": "{\n \"content\": {\n \"source\": {\n \"hashes\": [\n \"77da26a5\",\n \"4343f7ff\",\n \"d65dad60\",\n \""
},
{
"path": "questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.mdx",
"chars": 2926,
"preview": "---\ntitle: Explain the concept of destructuring assignment for objects and arrays\n---\n\n## TL;DR\n\nDestructuring assignmen"
},
{
"path": "questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/metadata.json",
"chars": 350,
"preview": "{\n \"slug\": \"explain-the-concept-of-destructuring-assignment-for-objects-and-arrays\",\n \"languages\": [],\n \"companies\": "
},
{
"path": "questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/zh-CN.mdx",
"chars": 2022,
"preview": "---\ntitle: 解释对象和数组的解构赋值概念\n---\n\n## 总结\n\n解构赋值是 JavaScript 中的一种语法，它允许您将数组中的值或对象中的属性解包到不同的变量中。对于数组，您使用方括号，对于对象，您使用花括号。例如：\n\n``"
},
{
"path": "questions/explain-the-concept-of-error-propagation-in-javascript/en-US.langnostic.json",
"chars": 1028,
"preview": "{\n \"frontmatter\": {\n \"title\": \"37957fe\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\":"
},
{
"path": "questions/explain-the-concept-of-error-propagation-in-javascript/en-US.mdx",
"chars": 3072,
"preview": "---\ntitle: Explain the concept of error propagation in JavaScript\n---\n\n## TL;DR\n\nError propagation in JavaScript refers "
},
{
"path": "questions/explain-the-concept-of-error-propagation-in-javascript/metadata.json",
"chars": 339,
"preview": "{\n \"slug\": \"explain-the-concept-of-error-propagation-in-javascript\",\n \"languages\": [],\n \"companies\": [],\n \"access\": "
},
{
"path": "questions/explain-the-concept-of-error-propagation-in-javascript/zh-CN.mdx",
"chars": 1952,
"preview": "---\ntitle: 解释 JavaScript 中的错误传播概念\n---\n\n## TL;DR\n\nJavaScript 中的错误传播指的是错误如何通过调用堆栈传递。当函数中发生错误时，可以使用 `try...catch` 块捕获和处理它。如"
},
{
"path": "questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.langnostic.json",
"chars": 866,
"preview": "{\n \"content\": {\n \"source\": {\n \"hashes\": [\n \"77da26a5\",\n \"20406206\",\n \"aa51f1b9\",\n \""
},
{
"path": "questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.mdx",
"chars": 2247,
"preview": "---\ntitle: Explain the concept of hoisting with regards to functions\n---\n\n## TL;DR\n\nHoisting in JavaScript is a behavior"
},
{
"path": "questions/explain-the-concept-of-hoisting-with-regards-to-functions/metadata.json",
"chars": 330,
"preview": "{\n \"slug\": \"explain-the-concept-of-hoisting-with-regards-to-functions\",\n \"languages\": [],\n \"companies\": [],\n \"access"
},
{
"path": "questions/explain-the-concept-of-hoisting-with-regards-to-functions/zh-CN.mdx",
"chars": 1524,
"preview": "---\ntitle: 解释关于函数的提升概念\n---\n\n## TL;DR\n\nJavaScript 中的提升是一种行为，在编译阶段，函数声明会被移动到其包含作用域的顶部。这意味着你可以在代码中定义函数之前调用它。但是，这不适用于函数表达式或箭"
},
{
"path": "questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.langnostic.json",
"chars": 911,
"preview": "{\n \"frontmatter\": {\n \"title\": \"528b315e\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.mdx",
"chars": 3224,
"preview": "---\ntitle: Explain the concept of inheritance in ES2015 classes\n---\n\n## TL;DR\n\nInheritance in ES2015 classes allows one "
},
{
"path": "questions/explain-the-concept-of-inheritance-in-es2015-classes/metadata.json",
"chars": 347,
"preview": "{\n \"slug\": \"explain-the-concept-of-inheritance-in-es2015-classes\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"f"
},
{
"path": "questions/explain-the-concept-of-inheritance-in-es2015-classes/zh-CN.mdx",
"chars": 2355,
"preview": "---\ntitle: 解释 ES2015 类中的继承概念\n---\n\n## TL;DR\n\nES2015 类中的继承允许一个类扩展另一个类，使子类能够从父类继承属性和方法。这是使用 `extends` 关键字完成的。`super` 关键字用于调"
},
{
"path": "questions/explain-the-concept-of-input-validation-and-its-importance-in-security/en-US.langnostic.json",
"chars": 791,
"preview": "{\n \"frontmatter\": {\n \"title\": \"a0797bc2\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-input-validation-and-its-importance-in-security/en-US.mdx",
"chars": 3893,
"preview": "---\ntitle: Explain the concept of input validation and its importance in security\n---\n\n## TL;DR\n\nInput validation is the"
},
{
"path": "questions/explain-the-concept-of-input-validation-and-its-importance-in-security/metadata.json",
"chars": 361,
"preview": "{\n \"slug\": \"explain-the-concept-of-input-validation-and-its-importance-in-security\",\n \"languages\": [],\n \"companies\": "
},
{
"path": "questions/explain-the-concept-of-input-validation-and-its-importance-in-security/zh-CN.mdx",
"chars": 2016,
"preview": "---\ntitle: 解释输入验证的概念及其在安全中的重要性\n---\n\n## TL;DR\n\n输入验证是确保用户输入正确、安全并满足应用程序要求的过程。它对安全至关重要，因为它有助于防止 SQL 注入、跨站点脚本 (XSS) 和其他形式的数据"
},
{
"path": "questions/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/en-US.langnostic.json",
"chars": 1027,
"preview": "{\n \"frontmatter\": {\n \"title\": \"36eddc8b\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/en-US.mdx",
"chars": 3088,
"preview": "---\ntitle: Explain the concept of lazy loading and how it can improve performance\n---\n\n## TL;DR\n\nLazy loading is a desig"
},
{
"path": "questions/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/metadata.json",
"chars": 373,
"preview": "{\n \"slug\": \"explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance\",\n \"languages\": [],\n \"companies\": "
},
{
"path": "questions/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/zh-CN.mdx",
"chars": 1818,
"preview": "---\ntitle: 解释惰性加载的概念以及它如何提高性能\n---\n\n## TL;DR\n\n惰性加载是一种设计模式，它将资源的加载延迟到实际需要时。这可以通过减少初始加载时间和节省带宽来显着提高性能。例如，网页上的图像可以进行惰性加载，以便它"
},
{
"path": "questions/explain-the-concept-of-lexical-scoping/en-US.langnostic.json",
"chars": 1021,
"preview": "{\n \"frontmatter\": {\n \"title\": \"af91d864\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-lexical-scoping/en-US.mdx",
"chars": 2673,
"preview": "---\ntitle: Explain the concept of lexical scoping\n---\n\n## TL;DR\n\nLexical scoping means that the scope of a variable is d"
},
{
"path": "questions/explain-the-concept-of-lexical-scoping/metadata.json",
"chars": 318,
"preview": "{\n \"slug\": \"explain-the-concept-of-lexical-scoping\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"free\",\n \"durat"
},
{
"path": "questions/explain-the-concept-of-lexical-scoping/zh-CN.mdx",
"chars": 1733,
"preview": "---\ntitle: 解释词法作用域的概念\n---\n\n## TL;DR\n\n词法作用域意味着变量的作用域由其在源代码中的位置决定，嵌套函数可以访问在其外部作用域中声明的变量。例如：\n\n```js live\nfunction outerFunc"
},
{
"path": "questions/explain-the-concept-of-partial-application/en-US.langnostic.json",
"chars": 989,
"preview": "{\n \"frontmatter\": {\n \"title\": \"bdd76e95\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-partial-application/en-US.mdx",
"chars": 2447,
"preview": "---\ntitle: Explain the concept of partial application\n---\n\n## TL;DR\n\nPartial application is a technique in functional pr"
},
{
"path": "questions/explain-the-concept-of-partial-application/metadata.json",
"chars": 354,
"preview": "{\n \"slug\": \"explain-the-concept-of-partial-application\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"free\",\n \"d"
},
{
"path": "questions/explain-the-concept-of-partial-application/zh-CN.mdx",
"chars": 1381,
"preview": "---\ntitle: 解释部分应用的理念\n---\n\n## 总结\n\n部分应用是函数式编程中的一种技术，它将一个函数应用于其部分参数，从而产生一个接受剩余参数的新函数。这允许你从通用函数中创建更具体的函数。例如，如果你有一个函数 `add(a,"
},
{
"path": "questions/explain-the-concept-of-scope-in-javascript/en-US.langnostic.json",
"chars": 951,
"preview": "{\n \"frontmatter\": {\n \"title\": \"f1d5c987\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-scope-in-javascript/en-US.mdx",
"chars": 3018,
"preview": "---\ntitle: Explain the concept of scope in JavaScript\n---\n\n## TL;DR\n\nIn JavaScript, scope determines the accessibility o"
},
{
"path": "questions/explain-the-concept-of-scope-in-javascript/metadata.json",
"chars": 315,
"preview": "{\n \"slug\": \"explain-the-concept-of-scope-in-javascript\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"free\",\n \"d"
},
{
"path": "questions/explain-the-concept-of-scope-in-javascript/zh-CN.mdx",
"chars": 2256,
"preview": "---\ntitle: 解释 JavaScript 中的作用域概念\n---\n\n## TL;DR\n\n在 JavaScript 中，作用域决定了变量和函数在代码不同部分的可访问性。主要有三种作用域：全局作用域、函数作用域和块级作用域。全局作用域意"
},
{
"path": "questions/explain-the-concept-of-tagged-templates/en-US.langnostic.json",
"chars": 1108,
"preview": "{\n \"content\": {\n \"source\": {\n \"hashes\": [\n \"77da26a5\",\n \"d92293fb\",\n \"cd3a5faf\",\n \""
},
{
"path": "questions/explain-the-concept-of-tagged-templates/en-US.mdx",
"chars": 2662,
"preview": "---\ntitle: Explain the concept of tagged templates\n---\n\n## TL;DR\n\nTagged templates in JavaScript allow you to parse temp"
},
{
"path": "questions/explain-the-concept-of-tagged-templates/metadata.json",
"chars": 332,
"preview": "{\n \"slug\": \"explain-the-concept-of-tagged-templates\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"free\",\n \"dura"
},
{
"path": "questions/explain-the-concept-of-tagged-templates/zh-CN.mdx",
"chars": 1831,
"preview": "---\ntitle: 解释带标签的模板的概念\n---\n\n## TL;DR\n\nJavaScript 中的带标签的模板允许您使用函数解析模板字面量。该函数将字面量字符串和值作为参数接收，从而可以自定义处理模板。例如：\n\n```js live\nf"
},
{
"path": "questions/explain-the-concept-of-test-driven-development-tdd/en-US.langnostic.json",
"chars": 1471,
"preview": "{\n \"frontmatter\": {\n \"title\": \"98f2e179\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-test-driven-development-tdd/en-US.mdx",
"chars": 2932,
"preview": "---\ntitle: Explain the concept of test-driven development (TDD)\n---\n\n## TL;DR\n\nTest-driven development (TDD) is a softwa"
},
{
"path": "questions/explain-the-concept-of-test-driven-development-tdd/metadata.json",
"chars": 339,
"preview": "{\n \"slug\": \"explain-the-concept-of-test-driven-development-tdd\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"fre"
},
{
"path": "questions/explain-the-concept-of-test-driven-development-tdd/zh-CN.mdx",
"chars": 1334,
"preview": "---\ntitle: 解释测试驱动开发 (TDD) 的概念\n---\n\n## TL;DR\n\n测试驱动开发 (TDD) 是一种软件开发方法，您在编写实际代码之前编写测试。该过程包括编写一个失败的测试，编写通过测试所需的最小代码，然后在保持测试通"
},
{
"path": "questions/explain-the-concept-of-the-prototype-pattern/en-US.langnostic.json",
"chars": 1145,
"preview": "{\n \"frontmatter\": {\n \"title\": \"9eec2bcf\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-the-prototype-pattern/en-US.mdx",
"chars": 3319,
"preview": "---\ntitle: Explain the concept of the Prototype pattern\n---\n\n## TL;DR\n\nThe Prototype pattern is a creational design patt"
},
{
"path": "questions/explain-the-concept-of-the-prototype-pattern/metadata.json",
"chars": 330,
"preview": "{\n \"slug\": \"explain-the-concept-of-the-prototype-pattern\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"free\",\n "
},
{
"path": "questions/explain-the-concept-of-the-prototype-pattern/zh-CN.mdx",
"chars": 1954,
"preview": "---\ntitle: 解释原型模式的概念\n---\n\n## TL;DR\n\n原型模式是一种创建型设计模式，用于通过复制现有对象（称为原型）来创建新对象。当创建新对象的成本高于克隆现有对象时，此模式非常有用。在 JavaScript 中，这可以使"
},
{
"path": "questions/explain-the-concept-of-the-singleton-pattern/en-US.langnostic.json",
"chars": 905,
"preview": "{\n \"frontmatter\": {\n \"title\": \"8d049ff2\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-the-singleton-pattern/en-US.mdx",
"chars": 2604,
"preview": "---\ntitle: Explain the concept of the Singleton pattern\n---\n\n## TL;DR\n\nThe Singleton pattern ensures that a class has on"
},
{
"path": "questions/explain-the-concept-of-the-singleton-pattern/metadata.json",
"chars": 323,
"preview": "{\n \"slug\": \"explain-the-concept-of-the-singleton-pattern\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"free\",\n "
},
{
"path": "questions/explain-the-concept-of-the-singleton-pattern/zh-CN.mdx",
"chars": 1739,
"preview": "---\ntitle: 解释单例模式的概念\n---\n\n## TL;DR\n\n单例模式确保一个类只有一个实例，并提供对该实例的全局访问点。当只需要一个对象来协调整个系统中的操作时，这非常有用。在 JavaScript 中，这可以使用闭包或 ES6"
},
{
"path": "questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.langnostic.json",
"chars": 1069,
"preview": "{\n \"content\": {\n \"source\": {\n \"hashes\": [\n \"77da26a5\",\n \"4cddec00\",\n \"18e2baf1\",\n \""
},
{
"path": "questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.mdx",
"chars": 3060,
"preview": "---\ntitle: Explain the concept of the spread operator and its uses\n---\n\n## TL;DR\n\nThe spread operator (`...`) in JavaScr"
},
{
"path": "questions/explain-the-concept-of-the-spread-operator-and-its-uses/metadata.json",
"chars": 343,
"preview": "{\n \"slug\": \"explain-the-concept-of-the-spread-operator-and-its-uses\",\n \"languages\": [],\n \"companies\": [],\n \"access\":"
},
{
"path": "questions/explain-the-concept-of-the-spread-operator-and-its-uses/zh-CN.mdx",
"chars": 2179,
"preview": "---\ntitle: 解释展开运算符的概念及其用途\n---\n\n## TL;DR\n\nJavaScript 中的展开运算符 (`...`) 允许你将可迭代对象（如数组或对象）的元素展开为单个元素。它通常用于复制数组或对象、合并数组或对象，以及将"
},
{
"path": "questions/explain-the-concept-of-the-strategy-pattern/en-US.langnostic.json",
"chars": 911,
"preview": "{\n \"frontmatter\": {\n \"title\": \"792ce120\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-the-strategy-pattern/en-US.mdx",
"chars": 3588,
"preview": "---\ntitle: Explain the concept of the Strategy pattern\n---\n\n## TL;DR\n\nThe Strategy pattern is a behavioral design patter"
},
{
"path": "questions/explain-the-concept-of-the-strategy-pattern/metadata.json",
"chars": 329,
"preview": "{\n \"slug\": \"explain-the-concept-of-the-strategy-pattern\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"free\",\n \""
},
{
"path": "questions/explain-the-concept-of-the-strategy-pattern/zh-CN.mdx",
"chars": 2493,
"preview": "---\ntitle: 解释策略模式的概念\n---\n\n## TL;DR\n\n策略模式是一种行为型设计模式，它允许您定义一系列算法，将每个算法封装成一个单独的类，并使它们可以互换。这种模式使算法可以独立于使用它的客户端而变化。例如，如果您有不同的"
},
{
"path": "questions/explain-the-concept-of-the-web-socket-api/en-US.langnostic.json",
"chars": 911,
"preview": "{\n \"frontmatter\": {\n \"title\": \"cc037bfb\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-the-web-socket-api/en-US.mdx",
"chars": 3863,
"preview": "---\ntitle: Explain the concept of the Web Socket API\n---\n\n## TL;DR\n\nThe WebSocket API provides a way to open a persisten"
},
{
"path": "questions/explain-the-concept-of-the-web-socket-api/metadata.json",
"chars": 349,
"preview": "{\n \"slug\": \"explain-the-concept-of-the-web-socket-api\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \"free\",\n \"du"
},
{
"path": "questions/explain-the-concept-of-the-web-socket-api/zh-CN.mdx",
"chars": 2521,
"preview": "---\ntitle: 解释 Web Socket API 的概念\n---\n\n## TL;DR\n\nWebSocket API 提供了一种在客户端和服务器之间打开持久连接的方式，允许进行实时的双向通信。与基于请求-响应的 HTTP 不同，Web"
},
{
"path": "questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.langnostic.json",
"chars": 1227,
"preview": "{\n \"frontmatter\": {\n \"title\": \"9d9ca7d4\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.mdx",
"chars": 3879,
"preview": "---\ntitle: Explain the concept of `this` binding in event handlers\n---\n\n## TL;DR\n\nIn JavaScript, the `this` keyword refe"
},
{
"path": "questions/explain-the-concept-of-this-binding-in-event-handlers/metadata.json",
"chars": 351,
"preview": "{\n \"slug\": \"explain-the-concept-of-this-binding-in-event-handlers\",\n \"languages\": [],\n \"companies\": [],\n \"access\": \""
},
{
"path": "questions/explain-the-concept-of-this-binding-in-event-handlers/zh-CN.mdx",
"chars": 2724,
"preview": "---\ntitle: 解释事件处理程序中 `this` 绑定的概念\n---\n\n## TL;DR\n\n在 JavaScript 中，`this` 关键字指的是当前正在执行代码的对象。在事件处理程序中，`this` 通常指的是触发事件的元素。但是"
},
{
"path": "questions/explain-the-concept-of-tree-shaking-in-module-bundling/en-US.langnostic.json",
"chars": 945,
"preview": "{\n \"frontmatter\": {\n \"title\": \"817d7afc\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-concept-of-tree-shaking-in-module-bundling/en-US.mdx",
"chars": 2900,
"preview": "---\ntitle: Explain the concept of tree shaking in module bundling\n---\n\n## TL;DR\n\nTree shaking is a technique used in mod"
},
{
"path": "questions/explain-the-concept-of-tree-shaking-in-module-bundling/metadata.json",
"chars": 332,
"preview": "{\n \"slug\": \"explain-the-concept-of-tree-shaking-in-module-bundling\",\n \"languages\": [],\n \"companies\": [],\n \"access\": "
},
{
"path": "questions/explain-the-concept-of-tree-shaking-in-module-bundling/zh-CN.mdx",
"chars": 1753,
"preview": "---\ntitle: 解释模块打包中的 Tree Shaking 概念\n---\n\n## TL;DR\n\nTree shaking 是一种用于模块打包的技术，用于消除死代码，即从未被使用或执行的代码。这有助于减小最终的 bundle 大小并提高"
},
{
"path": "questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.langnostic.json",
"chars": 911,
"preview": "{\n \"frontmatter\": {\n \"title\": \"7b24d351\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.mdx",
"chars": 2973,
"preview": "---\ntitle: Explain the difference between classical inheritance and prototypal inheritance\n---\n\n## TL;DR\n\nClassical inhe"
},
{
"path": "questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/metadata.json",
"chars": 374,
"preview": "{\n \"slug\": \"explain-the-difference-between-classical-inheritance-and-prototypal-inheritance\",\n \"languages\": [],\n \"com"
},
{
"path": "questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/zh-CN.mdx",
"chars": 1694,
"preview": "---\ntitle: 解释经典继承和原型继承的区别\n---\n\n## TL;DR\n\n经典继承是一种模型，其中类从其他类继承，通常在 Java 和 C++ 等语言中可见。原型继承（在 JavaScript 中使用）涉及对象直接从其他对象继承。在"
},
{
"path": "questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/en-US.langnostic.json",
"chars": 787,
"preview": "{\n \"frontmatter\": {\n \"title\": \"6e8251fa\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/en-US.mdx",
"chars": 2419,
"preview": "---\ntitle: Explain the difference between `document.querySelector()` and `document.getElementById()`\n---\n\n## TL;DR\n\n`doc"
},
{
"path": "questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/metadata.json",
"chars": 387,
"preview": "{\n \"slug\": \"explain-the-difference-between-documentqueryselector-and-documentgetelementbyid\",\n \"languages\": [],\n \"com"
},
{
"path": "questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/zh-CN.mdx",
"chars": 1654,
"preview": "---\ntitle: 解释 `document.querySelector()` 和 `document.getElementById()` 之间的区别\n---\n\n## TL;DR\n\n`document.querySelector()` 和"
},
{
"path": "questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.langnostic.json",
"chars": 1191,
"preview": "{\n \"frontmatter\": {\n \"title\": \"2ca0663e\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.mdx",
"chars": 2187,
"preview": "---\ntitle: Explain the difference between dot notation and bracket notation for accessing object properties\n---\n\n## TL;D"
},
{
"path": "questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/metadata.json",
"chars": 376,
"preview": "{\n \"slug\": \"explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties\",\n \"langu"
},
{
"path": "questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/zh-CN.mdx",
"chars": 1379,
"preview": "---\ntitle: 解释使用点符号和方括号符号访问对象属性的区别\n---\n\n## TL;DR\n\n点符号和方括号符号是 JavaScript 中访问对象属性的两种方式。点符号更简洁易读，但只能用于有效的 JavaScript 标识符。方括号"
},
{
"path": "questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.langnostic.json",
"chars": 829,
"preview": "{\n \"frontmatter\": {\n \"title\": \"33b69221\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.mdx",
"chars": 2690,
"preview": "---\ntitle: Explain the difference between global scope, function scope, and block scope\n---\n\n## TL;DR\n\nGlobal scope mean"
},
{
"path": "questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/metadata.json",
"chars": 354,
"preview": "{\n \"slug\": \"explain-the-difference-between-global-scope-function-scope-and-block-scope\",\n \"languages\": [],\n \"companie"
},
{
"path": "questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/zh-CN.mdx",
"chars": 2053,
"preview": "---\ntitle: 解释全局作用域、函数作用域和块级作用域的区别\n---\n\n## TL;DR\n\n全局作用域意味着变量可以在代码中的任何地方访问。函数作用域意味着变量只能在其声明的函数内部访问。块级作用域意味着变量只能在其声明的块（例如，在"
},
{
"path": "questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.langnostic.json",
"chars": 2311,
"preview": "{\n \"frontmatter\": {\n \"title\": \"9ee6afcc\"\n },\n \"content\": {\n \"source\": {\n \"locale\": \"en-US\",\n \"hashes\""
},
{
"path": "questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx",
"chars": 10867,
"preview": "---\ntitle: Explain the difference between mutable and immutable objects in JavaScript\n---\n\n## TL;DR\n\n**Mutable objects**"
}
]
// ... and 633 more files (download for full content)
About this extraction
This page contains the full source code of the greatfrontend/top-javascript-interview-questions GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 833 files (1.9 MB), approximately 555.4k tokens, and a symbol index with 19 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.