[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3462":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":21,"defaultBranch":22,"hasWiki":20,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":16,"starSnapshotCount":16,"syncStatus":38,"lastSyncTime":39,"discoverSource":40},3462,"30-seconds-of-interviews","Chalarangelo\u002F30-seconds-of-interviews","Chalarangelo","A curated collection of common interview questions to help you prepare for your next interview.","https:\u002F\u002F30secondsofinterviews.org",null,"JavaScript",12140,967,12139,3,0,5,43.96,"MIT License",true,false,"master",[24,25,26,27,28,29,30,31,32,33,34],"awesome-list","css","education","html","interview","interview-questions","javascript","learn-to-code","learning-resources","snippets","snippets-collection","2026-06-12 02:00:50","\u003Ca href=\"https:\u002F\u002F30secondsofinterviews.org\">\u003Cimg src=\"logo.jpg\" alt=\"30 Seconds of Interviews logo\">\u003C\u002Fa>\n\n\u003Ch1 align=\"center\">\n  30 Seconds of Interviews\n\u003C\u002Fh1>\n\n\u003Ch4 align=\"center\">A curated collection of common interview questions to help you prepare for your next interview.\u003C\u002Fh4>\n\n\u003Cbr>\n\n\u003Cp align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ffejes713\u002F30-seconds-of-interviews\u002Fblob\u002Fmaster\u002FCONTRIBUTING.md\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPRs-welcome-brightgreen.svg\" alt=\"PRs welcome\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Ftravis-ci.com\u002F30-seconds\u002F30-seconds-of-interviews\">\u003Cimg src=\"https:\u002F\u002Ftravis-ci.com\u002F30-seconds\u002F30-seconds-of-interviews.svg?token=uZrzJhwCxqfwx7TdXzc4&branch=master\" alt=\"travis\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.producthunt.com\u002Fposts\u002F30-seconds-of-interviews\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FProduct%20Hunt-vote-orange.svg\" alt=\"producthunt\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002F30-seconds\u002F30-seconds-of-interviews\u002Fblob\u002Fmaster\u002FLICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicence-MIT-blue.svg\" alt=\"licence\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cbr>\n\n> _This README is built using [markdown-builder](https:\u002F\u002Fgithub.com\u002F30-seconds\u002Fmarkdown-builder)._\n\n## Foreword\n\nInterviews are daunting and can make even the most seasoned expert forget things under pressure. Review and learn what questions are commonly encountered in interviews curated by the community that's answered them and go prepared for anything they'll ask. By bringing together experience and real-world examples, you can go from being nervous to being prepared for that next big opportunity.\n\n## [View online](https:\u002F\u002F30secondsofinterviews.org\u002F)\n\n\u003Ca href=\"https:\u002F\u002F30secondsofinterviews.org\">\u003Cimg src=\"promo.jpg\" alt=\"30 Seconds of Interviews promo\">\u003C\u002Fa>\n\n\u003Cbr>\n\n## Contributing\n\n> 30 seconds of interviews is a community effort, so feel free to contribute in any way you can. Every contribution helps!\n\nDo you have an excellent idea or know some cool questions that aren't on the list? Read the [contribution guidelines](https:\u002F\u002Fgithub.com\u002F30-seconds\u002F30-seconds-of-interviews\u002Fblob\u002Fmaster\u002FCONTRIBUTING.md) and submit a pull request.\n\nJoin our [Gitter channel](https:\u002F\u002Fgitter.im\u002F30-seconds-of-interviews\u002FLobby) to help with the development of the project.\n\n#### Related projects\n\n- [30 Seconds of Code](https:\u002F\u002F30secondsofcode.org)\n- [30 Seconds of CSS](https:\u002F\u002Fgithub.com\u002F30-seconds\u002F30-seconds-of-css)\n- [30 Seconds of React](https:\u002F\u002Fgithub.com\u002F30-seconds\u002F30-seconds-of-react)\n- [30 Seconds of Knowledge](https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002F30-seconds-of-knowledge\u002Fmmgplondnjekobonklacmemikcnhklla)\n\n## Table of Contents\n\n\n### JavaScript\n\n\u003Cdetails>\n\u003Csummary>View contents\u003C\u002Fsummary>\n\n* [Create a function `batches` that returns the maximum number of whole batches that can be cooked from a recipe.](#create-a-function-batches-that-returns-the-maximum-number-of-whole-batches-that-can-be-cooked-from-a-recipe)\n* [What is Big O Notation?](#what-is-big-o-notation)\n* [Create a standalone function `bind` that is functionally equivalent to the method `Function.prototype.bind`.](#create-a-standalone-function-bind-that-is-functionally-equivalent-to-the-method-functionprototypebind)\n* [How can you avoid callback hells?](#how-can-you-avoid-callback-hells)\n* [What is the purpose of callback function as an argument of `setState`?](#what-is-the-purpose-of-callback-function-as-an-argument-of-setstate)\n* [Which is the preferred option between callback refs and findDOMNode()?](#which-is-the-preferred-option-between-callback-refs-and-finddomnode)\n* [What is a callback? Can you show an example using one?](#what-is-a-callback-can-you-show-an-example-using-one)\n* [What is the `children` prop?](#what-is-the-children-prop)\n* [How do you clone an object in JavaScript?](#how-do-you-clone-an-object-in-javascript)\n* [What is a closure? Can you give a useful example of one?](#what-is-a-closure-can-you-give-a-useful-example-of-one)\n* [How do you compare two objects in JavaScript?](#how-do-you-compare-two-objects-in-javascript)\n* [What is context?](#what-is-context)\n* [What is CORS?](#what-is-cors)\n* [What is the DOM?](#what-is-the-dom)\n* [What is the difference between the equality operators `==` and `===`?](#what-is-the-difference-between-the-equality-operators--and-)\n* [What is the difference between an element and a component in React?](#what-is-the-difference-between-an-element-and-a-component-in-react)\n* [What is event delegation and why is it useful? Can you show an example of how to use it?](#what-is-event-delegation-and-why-is-it-useful-can-you-show-an-example-of-how-to-use-it)\n* [What is event-driven programming?](#what-is-event-driven-programming)\n* [What is the difference between an expression and a statement in JavaScript?](#what-is-the-difference-between-an-expression-and-a-statement-in-javascript)\n* [What are truthy and falsy values in JavaScript?](#what-are-truthy-and-falsy-values-in-javascript)\n* [Generate an array, containing the Fibonacci sequence, up until the nth term.](#generate-an-array-containing-the-fibonacci-sequence-up-until-the-nth-term)\n* [What does `0.1 + 0.2 === 0.3` evaluate to?](#what-does-01--02--03-evaluate-to)\n* [What is the difference between the array methods `map()` and `forEach()`?](#what-is-the-difference-between-the-array-methods-map-and-foreach)\n* [What are fragments?](#what-are-fragments)\n* [What is functional programming?](#what-is-functional-programming)\n* [What will the console log in this example?](#what-will-the-console-log-in-this-example)\n* [How does hoisting work in JavaScript?](#how-does-hoisting-work-in-javascript)\n* [What is the difference between HTML and React event handling?](#what-is-the-difference-between-html-and-react-event-handling)\n* [What is the reason for wrapping the entire contents of a JavaScript source file in a function that is immediately invoked?](#what-is-the-reason-for-wrapping-the-entire-contents-of-a-javascript-source-file-in-a-function-that-is-immediately-invoked)\n* [Explain the differences between imperative and declarative programming.](#explain-the-differences-between-imperative-and-declarative-programming)\n* [What are inline conditional expressions?](#what-are-inline-conditional-expressions)\n* [What is a key? What are the benefits of using it in lists?](#what-is-a-key-what-are-the-benefits-of-using-it-in-lists)\n* [What is the difference between lexical scoping and dynamic scoping?](#what-is-the-difference-between-lexical-scoping-and-dynamic-scoping)\n* [Create a function that masks a string of characters with `#` except for the last four (4) characters.](#create-a-function-that-masks-a-string-of-characters-with--except-for-the-last-four-4-characters)\n* [What is memoization?](#what-is-memoization)\n* [How do you ensure methods have the correct `this` context in React component classes?](#how-do-you-ensure-methods-have-the-correct-this-context-in-react-component-classes)\n* [What is a MIME type and what is it used for?](#what-is-a-mime-type-and-what-is-it-used-for)\n* [Contrast mutable and immutable values, and mutating vs non-mutating methods.](#contrast-mutable-and-immutable-values-and-mutating-vs-non-mutating-methods)\n* [What is the only value not equal to itself in JavaScript?](#what-is-the-only-value-not-equal-to-itself-in-javascript)\n* [NodeJS often uses a callback pattern where if an error is encountered during execution, this error is passed as the first argument to the callback. What are the advantages of this pattern?](#nodejs-often-uses-a-callback-pattern-where-if-an-error-is-encountered-during-execution-this-error-is-passed-as-the-first-argument-to-the-callback-what-are-the-advantages-of-this-pattern)\n* [What is the event loop in Node.js?](#what-is-the-event-loop-in-nodejs)\n* [What is the difference between `null` and `undefined`?](#what-is-the-difference-between-null-and-undefined)\n* [Describe the different ways to create an object. When should certain ways be preferred over others?](#describe-the-different-ways-to-create-an-object-when-should-certain-ways-be-preferred-over-others)\n* [What is the difference between a parameter and an argument?](#what-is-the-difference-between-a-parameter-and-an-argument)\n* [Does JavaScript pass by value or by reference?](#does-javascript-pass-by-value-or-by-reference)\n* [How do you pass an argument to an event handler or callback?](#how-do-you-pass-an-argument-to-an-event-handler-or-callback)\n* [Create a function `pipe` that performs left-to-right function composition by returning a function that accepts one argument.](#create-a-function-pipe-that-performs-left-to-right-function-composition-by-returning-a-function-that-accepts-one-argument)\n* [What are portals in React?](#what-are-portals-in-react)\n* [What is the difference between the postfix `i++` and prefix `++i` increment operators?](#what-is-the-difference-between-the-postfix-i-and-prefix-i-increment-operators)\n* [In which states can a Promise be?](#in-which-states-can-a-promise-be)\n* [What are Promises?](#what-are-promises)\n* [How does prototypal inheritance differ from classical inheritance?](#how-does-prototypal-inheritance-differ-from-classical-inheritance)\n* [What is a pure function?](#what-is-a-pure-function)\n* [What is recursion and when is it useful?](#what-is-recursion-and-when-is-it-useful)\n* [What is the output of the following code?](#what-is-the-output-of-the-following-code)\n* [What are refs in React? When should they be used?](#what-are-refs-in-react-when-should-they-be-used)\n* [What does the following function return?](#what-does-the-following-function-return)\n* [Are semicolons required in JavaScript?](#are-semicolons-required-in-javascript)\n* [What is short-circuit evaluation in JavaScript?](#what-is-short-circuit-evaluation-in-javascript)\n* [What is a stateful component in React?](#what-is-a-stateful-component-in-react)\n* [What is a stateless component?](#what-is-a-stateless-component)\n* [Explain the difference between a static method and an instance method.](#explain-the-difference-between-a-static-method-and-an-instance-method)\n* [What is the difference between synchronous and asynchronous code in JavaScript?](#what-is-the-difference-between-synchronous-and-asynchronous-code-in-javascript)\n* [What is the `this` keyword and how does it work?](#what-is-the-this-keyword-and-how-does-it-work)\n* [What does the following code evaluate to?](#what-does-the-following-code-evaluate-to)\n* [What are JavaScript data types?](#what-are-javascript-data-types)\n* [What is the purpose of JavaScript UI libraries\u002Fframeworks like React, Vue, Angular, Hyperapp, etc?](#what-is-the-purpose-of-javascript-ui-librariesframeworks-like-react-vue-angular-hyperapp-etc)\n* [What does `'use strict'` do and what are some of the key benefits to using it?](#what-does-use-strict-do-and-what-are-some-of-the-key-benefits-to-using-it)\n* [What are the differences between `var`, `let`, `const` and no keyword statements?](#what-are-the-differences-between-var-let-const-and-no-keyword-statements)\n* [What is a virtual DOM and why is it used in libraries\u002Fframeworks?](#what-is-a-virtual-dom-and-why-is-it-used-in-librariesframeworks)\n* [What is a cross-site scripting attack (XSS) and how do you prevent it?](#what-is-a-cross-site-scripting-attack-xss-and-how-do-you-prevent-it)\n\u003C\u002Fdetails>\n\n\n### React\n\n\u003Cdetails>\n\u003Csummary>View contents\u003C\u002Fsummary>\n\n* [What is the purpose of callback function as an argument of `setState`?](#what-is-the-purpose-of-callback-function-as-an-argument-of-setstate)\n* [Which is the preferred option between callback refs and findDOMNode()?](#which-is-the-preferred-option-between-callback-refs-and-finddomnode)\n* [What is the `children` prop?](#what-is-the-children-prop)\n* [Why does React use `className` instead of `class` like in HTML?](#why-does-react-use-classname-instead-of-class-like-in-html)\n* [What is context?](#what-is-context)\n* [What is the difference between an element and a component in React?](#what-is-the-difference-between-an-element-and-a-component-in-react)\n* [What are error boundaries in React?](#what-are-error-boundaries-in-react)\n* [What are fragments?](#what-are-fragments)\n* [What are higher-order components?](#what-are-higher-order-components)\n* [What is the difference between HTML and React event handling?](#what-is-the-difference-between-html-and-react-event-handling)\n* [What are inline conditional expressions?](#what-are-inline-conditional-expressions)\n* [What is a key? What are the benefits of using it in lists?](#what-is-a-key-what-are-the-benefits-of-using-it-in-lists)\n* [What are the lifecycle methods in React?](#what-are-the-lifecycle-methods-in-react)\n* [What are the different phases of the component lifecycle in React?](#what-are-the-different-phases-of-the-component-lifecycle-in-react)\n* [What does lifting state up in React mean?](#what-does-lifting-state-up-in-react-mean)\n* [How do you ensure methods have the correct `this` context in React component classes?](#how-do-you-ensure-methods-have-the-correct-this-context-in-react-component-classes)\n* [How do you pass an argument to an event handler or callback?](#how-do-you-pass-an-argument-to-an-event-handler-or-callback)\n* [What are portals in React?](#what-are-portals-in-react)\n* [How to apply prop validation in React?](#how-to-apply-prop-validation-in-react)\n* [How do you write comments inside a JSX tree in React?](#how-do-you-write-comments-inside-a-jsx-tree-in-react)\n* [What are refs in React? When should they be used?](#what-are-refs-in-react-when-should-they-be-used)\n* [What is a stateful component in React?](#what-is-a-stateful-component-in-react)\n* [What is a stateless component?](#what-is-a-stateless-component)\n\u003C\u002Fdetails>\n\n\n### HTML\n\n\u003Cdetails>\n\u003Csummary>View contents\u003C\u002Fsummary>\n\n* [What is the purpose of the `alt` attribute on images?](#what-is-the-purpose-of-the-alt-attribute-on-images)\n* [What are `defer` and `async` attributes on a `\u003Cscript>` tag?](#what-are-defer-and-async-attributes-on-a-script-tag)\n* [What is the purpose of cache busting and how can you achieve it?](#what-is-the-purpose-of-cache-busting-and-how-can-you-achieve-it)\n* [What is the DOM?](#what-is-the-dom)\n* [Can a web page contain multiple `\u003Cheader>` elements? What about `\u003Cfooter>` elements?](#can-a-web-page-contain-multiple-header-elements-what-about-footer-elements)\n* [Discuss the differences between an HTML specification and a browser’s implementation thereof.](#discuss-the-differences-between-an-html-specification-and-a-browsers-implementation-thereof)\n* [What is the difference between HTML and React event handling?](#what-is-the-difference-between-html-and-react-event-handling)\n* [What are some differences that XHTML has compared to HTML?](#what-are-some-differences-that-xhtml-has-compared-to-html)\n* [Briefly describe the correct usage of the following HTML5 semantic elements: `\u003Cheader>`, `\u003Carticle>`,`\u003Csection>`, `\u003Cfooter>`](#briefly-describe-the-correct-usage-of-the-following-html5-semantic-elements-header-articlesection-footer)\n* [What is HTML5 Web Storage? Explain `localStorage` and `sessionStorage`.](#what-is-html5-web-storage-explain-localstorage-and-sessionstorage)\n* [Where and why is the `rel=\"noopener\"` attribute used?](#where-and-why-is-the-relnoopener-attribute-used)\n\u003C\u002Fdetails>\n\n\n### CSS\n\n\u003Cdetails>\n\u003Csummary>View contents\u003C\u002Fsummary>\n\n* [What is CSS BEM?](#what-is-css-bem)\n* [Describe the layout of the CSS Box Model and briefly describe each component.](#describe-the-layout-of-the-css-box-model-and-briefly-describe-each-component)\n* [What are the advantages of using CSS preprocessors?](#what-are-the-advantages-of-using-css-preprocessors)\n* [What is the difference between '+' and '~' sibling selectors?.](#what-is-the-difference-between--and--sibling-selectors)\n* [Can you describe how CSS specificity works?](#can-you-describe-how-css-specificity-works)\n* [What is the difference between `em` and `rem` units?](#what-is-the-difference-between-em-and-rem-units)\n* [Using flexbox, create a 3-column layout where each column takes up a `col-{n} \u002F 12` ratio of the container.](#using-flexbox-create-a-3-column-layout-where-each-column-takes-up-a-col-n--12-ratio-of-the-container)\n* [What is a focus ring? What is the correct solution to handle them?](#what-is-a-focus-ring-what-is-the-correct-solution-to-handle-them)\n* [Can you name the four types of `@media` properties?](#can-you-name-the-four-types-of-media-properties)\n* [What are the advantages of using CSS sprites and how are they utilized?](#what-are-the-advantages-of-using-css-sprites-and-how-are-they-utilized)\n\u003C\u002Fdetails>\n\n\n### Accessibility\n\n\u003Cdetails>\n\u003Csummary>View contents\u003C\u002Fsummary>\n\n* [What is ARIA and when should you use it?](#what-is-aria-and-when-should-you-use-it)\n* [What is the Accessibility Tree?](#what-is-the-accessibility-tree)\n* [What are landmark roles and how can they be useful?](#what-are-landmark-roles-and-how-can-they-be-useful)\n* [What is WCAG? What are the differences between A, AA, and AAA compliance?](#what-is-wcag-what-are-the-differences-between-a-aa-and-aaa-compliance)\n\u003C\u002Fdetails>\n\n\n### Node\n\n\u003Cdetails>\n\u003Csummary>View contents\u003C\u002Fsummary>\n\n* [How can you avoid callback hells?](#how-can-you-avoid-callback-hells)\n* [NodeJS often uses a callback pattern where if an error is encountered during execution, this error is passed as the first argument to the callback. What are the advantages of this pattern?](#nodejs-often-uses-a-callback-pattern-where-if-an-error-is-encountered-during-execution-this-error-is-passed-as-the-first-argument-to-the-callback-what-are-the-advantages-of-this-pattern)\n* [What is the event loop in Node.js?](#what-is-the-event-loop-in-nodejs)\n* [What is REST?](#what-is-rest)\n\u003C\u002Fdetails>\n\n\n### Security\n\n\u003Cdetails>\n\u003Csummary>View contents\u003C\u002Fsummary>\n\n* [What is a cross-site scripting attack (XSS) and how do you prevent it?](#what-is-a-cross-site-scripting-attack-xss-and-how-do-you-prevent-it)\n\u003C\u002Fdetails>\n\n\n---\n\n## JavaScript\n### What is a stateless component?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nA stateless component is a component whose behavior does not depend on its state. Stateless components can be either functional or class components. Stateless functional components are easier to maintain and test since they are guaranteed to produce the same output given the same props. Stateless functional components should be preferred when lifecycle hooks don't need to be used.\n\n\n#### Good to hear\n\n\n* Stateless components are independent of their state.\n* Stateless components can be either class or functional components.\n* Stateless functional components avoid the `this` keyword altogether.\n\n\n##### Additional Links\n\n\n* [React docs on State and Lifecycle](https:\u002F\u002Freactjs.org\u002Fdocs\u002Fstate-and-lifecycle.html)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is the difference between the equality operators `==` and `===`?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nTriple equals (`===`) checks for strict equality, which means both the type and value must be the same. Double equals (`==`) on the other hand first performs type coercion so that both operands are of the same type and then applies strict comparison.\n\n\n#### Good to hear\n\n\n* Whenever possible, use triple equals to test equality because loose equality `==` can have unintuitive results.\n* Type coercion means the values are converted into the same type.\n* Mention of falsy values and their comparison.\n\n\n##### Additional Links\n\n\n* [MDN docs for comparison operators](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FOperators\u002FComparison_Operators)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is the difference between an element and a component in React?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nAn element is a plain JavaScript object that represents a DOM node or component. Elements are pure and never mutated, and are cheap to create.\n\nA component is a function or class. Components can have state and take props as input and return an element tree as output (although they can represent generic containers or wrappers and don't necessarily have to emit DOM). Components can initiate side effects in lifecycle methods (e.g. AJAX requests, DOM mutations, interfacing with 3rd party libraries) and may be expensive to create.\n\n```js\nconst Component = () => \"Hello\"\nconst componentElement = \u003CComponent \u002F>\nconst domNodeElement = \u003Cdiv \u002F>\n```\n\n\n#### Good to hear\n\n\n* Elements are immutable, plain objects that describe the DOM nodes or components you want to render.\n* Components can be either classes or functions, that take props as an input and return an element tree as the output.\n\n\n##### Additional Links\n\n\n* [React docs on Rendering Elements](https:\u002F\u002Freactjs.org\u002Fdocs\u002Frendering-elements.html)\n* [React docs on Components and Props](https:\u002F\u002Freactjs.org\u002Fdocs\u002Fcomponents-and-props.html)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is a stateful component in React?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nA stateful component is a component whose behavior depends on its state. This means that two separate instances of the component if given the same props will not necessarily render the same output, unlike pure function components.\n\n```js\n\u002F\u002F Stateful class component\nclass App extends Component {\n  constructor(props) {\n    super(props)\n    this.state = { count: 0 }\n  }\n  render() {\n    \u002F\u002F ...\n  }\n}\n\n\u002F\u002F Stateful function component\nfunction App() {\n  const [count, setCount] = useState(0)\n  return \u002F\u002F ...\n}\n```\n\n\n#### Good to hear\n\n\n* Stateful components have internal state that they depend on.\n* Stateful components are class components or function components that use stateful Hooks.\n* Stateful components have their state initialized in the constructor or with `useState()`.\n\n\n##### Additional Links\n\n\n* [React docs on State and Lifecycle](https:\u002F\u002Freactjs.org\u002Fdocs\u002Fstate-and-lifecycle.html)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### In which states can a Promise be?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nA `Promise` is in one of these states:\n\n* pending: initial state, neither fulfilled nor rejected.\n* fulfilled: meaning that the operation completed successfully.\n* rejected: meaning that the operation failed.\n\nA pending promise can either be fulfilled with a value, or rejected with a reason (error).\nWhen either of these options happens, the associated handlers queued up by a promise's then method are called.\n\n\n#### Good to hear\n\n\n\n\n##### Additional Links\n\n\n* [Official Web Docs Promise](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FPromise)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is the difference between the postfix `i++` and prefix `++i` increment operators?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nBoth increment the variable value by 1. The difference is what they evaluate to.\n\nThe postfix increment operator evaluates to the value _before_ it was incremented.\n\n```js\nlet i = 0\ni++ \u002F\u002F 0\n\u002F\u002F i === 1\n```\n\nThe prefix increment operator evaluates to the value _after_ it was incremented.\n\n```js\nlet i = 0\n++i \u002F\u002F 1\n\u002F\u002F i === 1\n```\n\n\n#### Good to hear\n\n\n\n\n##### Additional Links\n\n\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### Create a function `batches` that returns the maximum number of whole batches that can be cooked from a recipe.\n\n```js\n\u002F**\nIt accepts two objects as arguments: the first object is the recipe\nfor the food, while the second object is the available ingredients.\nEach ingredient's value is a number representing how many units there are.\n\n`batches(recipe, available)`\n*\u002F\n\n\u002F\u002F 0 batches can be made\nbatches(\n  { milk: 100, butter: 50, flour: 5 },\n  { milk: 132, butter: 48, flour: 51 }\n)\nbatches(\n  { milk: 100, flour: 4, sugar: 10, butter: 5 },\n  { milk: 1288, flour: 9, sugar: 95 }\n)\n\n\u002F\u002F 1 batch can be made\nbatches(\n  { milk: 100, butter: 50, cheese: 10 },\n  { milk: 198, butter: 52, cheese: 10 }\n)\n\n\u002F\u002F 2 batches can be made\nbatches(\n  { milk: 2, sugar: 40, butter: 20 },\n  { milk: 5, sugar: 120, butter: 500 }\n)\n```\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nWe must have all ingredients of the recipe available, and in quantities that are more than or equal to the number of units required. If just one of the ingredients is not available or lower than needed, we cannot make a single batch.\n\nUse `Object.keys()` to return the ingredients of the recipe as an array, then use `Array.prototype.map()` to map each ingredient to the ratio of available units to the amount required by the recipe. If one of the ingredients required by the recipe is not available at all, the ratio will evaluate to `NaN`, so the logical OR operator can be used to fallback to `0` in this case.\n\nUse the spread `...` operator to feed the array of all the ingredient ratios into `Math.min()` to determine the lowest ratio. Passing this entire result into `Math.floor()` rounds down to return the maximum number of whole batches.\n\n```js\nconst batches = (recipe, available) =>\n  Math.floor(\n    Math.min(...Object.keys(recipe).map(k => available[k] \u002F recipe[k] || 0))\n  )\n```\n\n\n#### Good to hear\n\n\n\n\n##### Additional Links\n\n\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What does the following code evaluate to?\n\n```js\ntypeof typeof 0\n```\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nIt evaluates to `\"string\"`.\n\n`typeof 0` evaluates to the string `\"number\"` and therefore `typeof \"number\"` evaluates to `\"string\"`.\n\n\n#### Good to hear\n\n\n\n\n##### Additional Links\n\n\n* [MDN docs for typeof](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FOperators\u002Ftypeof)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### How do you clone an object in JavaScript?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nUsing the object spread operator `...`, the object's own enumerable properties can be copied\ninto the new object. This creates a shallow clone of the object.\n\n```js\nconst obj = { a: 1, b: 2 }\nconst shallowClone = { ...obj }\n```\n\nWith this technique, prototypes are ignored. In addition, nested objects are not cloned, but rather their references get copied, so nested objects still refer to the same objects as the original. Deep-cloning is much more complex in order to effectively clone any type of object (Date, RegExp, Function, Set, etc) that may be nested within the object.\n\nOther alternatives include:\n\n* `JSON.parse(JSON.stringify(obj))` can be used to deep-clone a simple object, but it is CPU-intensive and only accepts valid JSON (therefore it strips functions and does not allow circular references).\n* `Object.assign({}, obj)` is another alternative.\n* `Object.keys(obj).reduce((acc, key) => (acc[key] = obj[key], acc), {})` is another more verbose alternative that shows the concept in greater depth.\n\n\n#### Good to hear\n\n\n* JavaScript passes objects by reference, meaning that nested objects get their references copied, instead of their values.\n* The same method can be used to merge two objects.\n\n\n##### Additional Links\n\n\n* [MDN docs for Object.assign()](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FObject\u002Fassign)\n* [Clone an object in vanilla JS](http:\u002F\u002Fvoidcanvas.com\u002Fclone-an-object-in-vanilla-js-in-depth\u002F)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is the difference between synchronous and asynchronous code in JavaScript?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nSynchronous means each operation must wait for the previous one to complete.\n\nAsynchronous means an operation can occur while another operation is still being processed.\n\nIn JavaScript, all code is synchronous due to the single-threaded nature of it. However, asynchronous operations not part of the program (such as `XMLHttpRequest` or `setTimeout`) are processed outside of the main thread because they are controlled by native code (browser APIs), but callbacks part of the program will still be executed synchronously.\n\n\n#### Good to hear\n\n\n* JavaScript has a concurrency model based on an \"event loop\".\n* Functions like `alert` block the main thread so that no user input is registered until the user closes it.\n\n\n##### Additional Links\n\n\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### How do you compare two objects in JavaScript?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nEven though two different objects can have the same properties with equal values, they are not considered equal when compared using `==` or `===`. This is because they are being compared by their reference (location in memory), unlike primitive values which are compared by value.\n\nIn order to test if two objects are equal in structure, a helper function is required. It will\niterate through the own properties of each object to test if they have the same values, including nested objects.\nOptionally, the prototypes of the objects may also be tested for equivalence by passing `true` as the 3rd argument.\n\nNote: this technique does not attempt to test equivalence of data structures other than\nplain objects, arrays, functions, dates and primitive values.\n\n```js\nfunction isDeepEqual(obj1, obj2, testPrototypes = false) {\n  if (obj1 === obj2) {\n    return true\n  }\n\n  if (typeof obj1 === \"function\" && typeof obj2 === \"function\") {\n    return obj1.toString() === obj2.toString()\n  }\n\n  if (obj1 instanceof Date && obj2 instanceof Date) {\n    return obj1.getTime() === obj2.getTime()\n  }\n\n  if (\n    Object.prototype.toString.call(obj1) !==\n      Object.prototype.toString.call(obj2) ||\n    typeof obj1 !== \"object\"\n  ) {\n    return false\n  }\n\n  const prototypesAreEqual = testPrototypes\n    ? isDeepEqual(\n        Object.getPrototypeOf(obj1),\n        Object.getPrototypeOf(obj2),\n        true\n      )\n    : true\n\n  const obj1Props = Object.getOwnPropertyNames(obj1)\n  const obj2Props = Object.getOwnPropertyNames(obj2)\n\n  return (\n    obj1Props.length === obj2Props.length &&\n    prototypesAreEqual &&\n    obj1Props.every(prop => isDeepEqual(obj1[prop], obj2[prop]))\n  )\n}\n```\n\n\n#### Good to hear\n\n\n* Primitives like strings and numbers are compared by their value\n* Objects on the other hand are compared by their reference (location in memory)\n\n\n##### Additional Links\n\n\n* [Object Equality in JavaScript](http:\u002F\u002Fadripofjavascript.com\u002Fblog\u002Fdrips\u002Fobject-equality-in-javascript.html)\n* [Deep comparison between two values](https:\u002F\u002F30secondsofcode.org\u002Fobject#equals)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is a cross-site scripting attack (XSS) and how do you prevent it?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nXSS refers to client-side code injection where the attacker injects malicious scripts into a legitimate website or web application. This is often achieved when the application does not validate user input and freely injects dynamic HTML content.\n\nFor example, a comment system will be at risk if it does not validate or escape user input. If the comment contains unescaped HTML, the comment can inject a `\u003Cscript>` tag into the website that other users will execute against their knowledge.\n\n* The malicious script has access to cookies which are often used to store session tokens. If an attacker can obtain a user’s session cookie, they can impersonate the user.\n* The script can arbitrarily manipulate the DOM of the page the script is executing in, allowing the attacker to insert pieces of content that appear to be a real part of the website.\n* The script can use AJAX to send HTTP requests with arbitrary content to arbitrary destinations.\n\n\n#### Good to hear\n\n\n* On the client, using `textContent` instead of `innerHTML` prevents the browser from running the string through the HTML parser which would execute scripts in it.\n* On the server, escaping HTML tags will prevent the browser from parsing the user input as actual HTML and therefore won't execute the script.\n\n\n##### Additional Links\n\n\n* [Cross-Site Scripting Attack (XSS)](https:\u002F\u002Fwww.acunetix.com\u002Fwebsitesecurity\u002Fcross-site-scripting\u002F)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is CORS?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nCross-Origin Resource Sharing or CORS is a mechanism that uses additional HTTP headers to grant a browser permission to access resources from a server at an origin different from the website origin.\n\nAn example of a cross-origin request is a web application served from `http:\u002F\u002Fmydomain.com` that uses AJAX to make a request for `http:\u002F\u002Fyourdomain.com`.\n\nFor security reasons, browsers restrict cross-origin HTTP requests initiated by JavaScript. `XMLHttpRequest` and `fetch` follow the same-origin policy, meaning a web application using those APIs can only request HTTP resources from the same origin the application was accessed, unless the response from the other origin includes the correct CORS headers.\n\n\n#### Good to hear\n\n\n* CORS behavior is not an error,  it’s a security mechanism to protect users.\n* CORS is designed to prevent a malicious website that a user may unintentionally visit from making a request to a legitimate website to read their personal data or perform actions against their will.\n\n\n##### Additional Links\n\n\n* [MDN docs for CORS](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTTP\u002FCORS)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is the DOM?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nThe DOM (Document Object Model) is a cross-platform API that treats HTML and XML documents as a tree structure consisting of nodes. These nodes (such as elements and text nodes) are objects that can be programmatically manipulated and any visible changes made to them are reflected live in the document. In a browser, this API is available to JavaScript where DOM nodes can be manipulated to change their styles, contents, placement in the document, or interacted with through event listeners.\n\n\n#### Good to hear\n\n\n* The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API.\n* The DOM is constructed progressively in the browser as a page loads, which is why scripts are often placed at the bottom of a page, in the `\u003Chead>` with a `defer` attribute, or inside a `DOMContentLoaded` event listener. Scripts that manipulate DOM nodes should be run after the DOM has been constructed to avoid errors.\n* `document.getElementById()` and `document.querySelector()` are common functions for selecting DOM nodes.\n* Setting the `innerHTML` property to a new value runs the string through the HTML parser, offering an easy way to append dynamic HTML content to a node.\n\n\n##### Additional Links\n\n\n* [MDN docs for DOM](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FDOM)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### Create a standalone function `bind` that is functionally equivalent to the method `Function.prototype.bind`.\n\n```js\nfunction example() {\n  console.log(this)\n}\nconst boundExample = bind(example, { a: true })\nboundExample.call({ b: true }) \u002F\u002F logs { a: true }\n```\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nReturn a function that accepts an arbitrary number of arguments by gathering them with the rest `...` operator. From that function, return the result of calling the `fn` with `Function.prototype.apply` to apply the context and the array of arguments to the function.\n\n```js\nconst bind = (fn, context) => (...args) => fn.apply(context, args)\n```\n\n\n#### Good to hear\n\n\n\n\n##### Additional Links\n\n\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What are the differences between `var`, `let`, `const` and no keyword statements?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\n##### No keyword\n\nWhen no keyword exists before a variable assignment, it is either assigning a global variable if one does not exist, or reassigns an already declared variable. In non-strict mode, if the variable has not yet been declared, it will assign the variable as a property of the global object (`window` in browsers). In strict mode, it will throw an error to prevent unwanted global variables from being created.\n\n##### var\n\n`var` was the default statement to declare a variable until ES2015. It creates a function-scoped variable that can be reassigned and redeclared. However, due to its lack of block scoping, it can cause issues if the variable is being reused in a loop that contains an asynchronous callback because the variable will continue to exist outside of the block scope.\n\nBelow, by the time the the `setTimeout` callback executes, the loop has already finished and the `i` variable is `10`, so all ten callbacks reference the same variable available in the function scope.\n\n```js\nfor (var i = 0; i \u003C 10; i++) {\n  setTimeout(() => {\n    \u002F\u002F logs `10` ten times\n    console.log(i)\n  })\n}\n\n\u002F* Solutions with `var` *\u002F\nfor (var i = 0; i \u003C 10; i++) {\n  \u002F\u002F Passed as an argument will use the value as-is in\n  \u002F\u002F that point in time\n  setTimeout(console.log, 0, i)\n}\n\nfor (var i = 0; i \u003C 10; i++) {\n  \u002F\u002F Create a new function scope that will use the value\n  \u002F\u002F as-is in that point in time\n  ;(i => {\n    setTimeout(() => {\n      console.log(i)\n    })\n  })(i)\n}\n```\n\n##### let\n\n`let` was introduced in ES2015 and is the new preferred way to declare variables that will be reassigned later. Trying to redeclare a variable again will throw an error. It is block-scoped so that using it in a loop will keep it scoped to the iteration.\n\n```js\nfor (let i = 0; i \u003C 10; i++) {\n  setTimeout(() => {\n    \u002F\u002F logs 0, 1, 2, 3, ...\n    console.log(i)\n  })\n}\n```\n\n##### const\n\n`const` was introduced in ES2015 and is the new preferred default way to declare all variables if they won't be reassigned later, even for objects that will be mutated (as long as the reference to the object does not change). It is block-scoped and cannot be reassigned.\n\n```js\nconst myObject = {}\nmyObject.prop = \"hello!\" \u002F\u002F No error\nmyObject = \"hello\" \u002F\u002F Error\n```\n\n\n#### Good to hear\n\n\n* All declarations are hoisted to the top of their scope.\n* However, with `let` and `const` there is a concept called the temporal dead zone (TDZ). While the declarations are still hoisted, there is a period between entering scope and being declared where they cannot be accessed.\n* Show a common issue with using `var` and how `let` can solve it, as well as a solution that keeps `var`.\n* `var` should be avoided whenever possible and prefer `const` as the default declaration statement for all variables unless they will be reassigned later, then use `let` if so.\n\n\n##### Additional Links\n\n\n* [`let` vs `const`](https:\u002F\u002Fwesbos.com\u002Flet-vs-const\u002F)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is event delegation and why is it useful? Can you show an example of how to use it?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nEvent delegation is a technique of delegating events to a single common ancestor. Due to event bubbling, events \"bubble\" up the DOM tree by executing any handlers progressively on each ancestor element up to the root that may be listening to it.\n\nDOM events provide useful information about the element that initiated the event via `Event.target`. This allows the parent element to handle behavior as though the target element was listening to the event, rather than all children of the parent or the parent itself.\n\nThis provides two main benefits:\n\n* It increases performance and reduces memory consumption by only needing to register a single event listener to handle potentially thousands of elements.\n* If elements are dynamically added to the parent, there is no need to register new event listeners for them.\n\nInstead of:\n\n```js\ndocument.querySelectorAll(\"button\").forEach(button => {\n  button.addEventListener(\"click\", handleButtonClick)\n})\n```\n\nEvent delegation involves using a condition to ensure the child target matches our desired element:\n\n```js\ndocument.addEventListener(\"click\", e => {\n  if (e.target.closest(\"button\")) {\n    handleButtonClick()\n  }\n})\n```\n\n\n#### Good to hear\n\n\n* The difference between event bubbling and capturing\n\n\n##### Additional Links\n\n\n* [Event Delegation](https:\u002F\u002Fdavidwalsh.name\u002Fevent-delegate)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is the purpose of callback function as an argument of `setState`?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nThe callback function is invoked when `setState` has finished and the component gets rendered. Since `setState` is asynchronous, the callback function is used for any post action.\n\n```js\nsetState({ name: \"sudheer\" }, () => {\n  console.log(\"The name has updated and component re-rendered\")\n})\n```\n\n\n#### Good to hear\n\n\n* The callback function is invoked after `setState` finishes and is used for any post action.\n* It is recommended to use lifecycle method rather this callback function.\n\n\n##### Additional Links\n\n\n* [React docs on `setState`](https:\u002F\u002Freactjs.org\u002Fdocs\u002Freact-component.html#setstate)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is the difference between an expression and a statement in JavaScript?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nThere are two main syntactic categories in JavaScript: expressions and statements. A third one is both together, referred to as an expression statement. They are roughly summarized as:\n\n* **Expression**: produces a value\n* **Statement**: performs an action\n* **Expression statement**: produces a value and performs an action\n\nA general rule of thumb:\n\n> If you can print it or assign it to a variable, it’s an expression. If you can’t, it’s a statement.\n\n##### Statements\n\n```js\nlet x = 0\n\nfunction declaration() {}\n\nif (true) {\n}\n```\n\nStatements appear as instructions that do something but don't produce values.\n\n```js\n\u002F\u002F Assign `x` to the absolute value of `y`.\nvar x\nif (y >= 0) {\n  x = y\n} else {\n  x = -y\n}\n```\n\nThe only expression in the above code is `y >= 0` which produces a value, either `true` or `false`. A value is not produced by other parts of the code.\n\n##### Expressions\n\nExpressions produce a value. They can be passed around to functions because the interpreter replaces them with the value they resolve to.\n\n```js\n5 + 5 \u002F\u002F => 10\n\nlastCharacter(\"input\") \u002F\u002F => \"t\"\n\ntrue === true \u002F\u002F => true\n```\n\n##### Expression statements\n\nThere is an equivalent version of the set of statements used before as an expression using the conditional operator:\n\n```js\n\u002F\u002F Assign `x` as the absolute value of `y`.\nvar x = y >= 0 ? y : -y\n```\n\nThis is both an expression and a statement, because we are declaring a variable `x` (statement) as an evaluation (expression).\n\n\n#### Good to hear\n\n\n* Function declarations vs function expressions\n\n\n##### Additional Links\n\n\n* [What is the difference between a statement and an expression?](https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F12703214\u002Fjavascript-difference-between-a-statement-and-an-expression)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What are truthy and falsy values in JavaScript?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nA value is either truthy or falsy depending on how it is evaluated in a Boolean context. Falsy means false-like and truthy means true-like. Essentially, they are values that are coerced to `true` or `false` when performing certain operations.\n\nThere are 6 falsy values in JavaScript. They are:\n\n* `false`\n* `undefined`\n* `null`\n* `\"\"` (empty string)\n* `NaN`\n* `0` (both `+0` and `-0`)\n\nEvery other value is considered truthy.\n\nA value's truthiness can be examined by passing it into the `Boolean` function.\n\n```js\nBoolean(\"\") \u002F\u002F false\nBoolean([]) \u002F\u002F true\n```\n\nThere is a shortcut for this using the logical NOT `!` operator. Using `!` once will convert a value to its inverse boolean equivalent (i.e. not false is true), and `!` once more will convert back, thus effectively converting the value to a boolean.\n\n```js\n!!\"\" \u002F\u002F false\n!![] \u002F\u002F true\n```\n\n\n#### Good to hear\n\n\n\n\n##### Additional Links\n\n\n* [Truthy on MDN](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen\u002Fdocs\u002FGlossary\u002FTruthy)\n* [Falsy on MDN](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FFalsy)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### Generate an array, containing the Fibonacci sequence, up until the nth term.\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nInitialize an empty array of length `n`. Use `Array.prototype.reduce()` to add values into the array, using the sum of the last two values, except for the first two.\n\n```js\nconst fibonacci = n =>\n  [...Array(n)].reduce(\n    (acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i),\n    []\n  )\n```\n\n\n#### Good to hear\n\n\n\n\n##### Additional Links\n\n\n* [Similar problem](https:\u002F\u002Fgithub.com\u002FChalarangelo\u002F30-seconds-of-code\u002Fblob\u002Fmaster\u002Fsnippets_archive\u002FfibonacciUntilNum.md)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What does `0.1 + 0.2 === 0.3` evaluate to?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nIt evaluates to `false` because JavaScript uses the IEEE 754 standard for Math and it makes use of 64-bit floating numbers. This causes precision errors when doing decimal calculations, in short, due to computers working in Base 2 while decimal is Base 10.\n\n```js\n0.1 + 0.2 \u002F\u002F 0.30000000000000004\n```\n\nA solution to this problem would be to use a function that determines if two numbers are approximately equal by defining an error margin (epsilon) value that the difference between two values should be less than.\n\n```js\nconst approxEqual = (n1, n2, epsilon = 0.0001) => Math.abs(n1 - n2) \u003C epsilon\napproxEqual(0.1 + 0.2, 0.3) \u002F\u002F true\n```\n\n\n#### Good to hear\n\n\n* A simple solution to this problem\n\n\n##### Additional Links\n\n\n* [A simple helper function to check equality](https:\u002F\u002Fgithub.com\u002FChalarangelo\u002F30-seconds-of-code#approximatelyequal)\n* [Fix \"0.1 + 0.2 = 0.300000004\" in JavaScript](http:\u002F\u002Fblog.blakesimpson.co.uk\u002Fread\u002F61-fix-0-1-0-2-0-300000004-in-javascript)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is the difference between the array methods `map()` and `forEach()`?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nBoth methods iterate through the elements of an array. `map()` maps each element to a new element by invoking the callback function on each element and returning a new array. On the other hand, `forEach()` invokes the callback function for each element but does not return a new array. `forEach()` is generally used when causing a side effect on each iteration, whereas `map()` is a common functional programming technique.\n\n\n#### Good to hear\n\n\n* Use `forEach()` if you need to iterate over an array and cause mutations to the elements without needing to return values to generate a new array.\n* `map()` is the right choice to keep data immutable where each value of the original array is mapped to a new array.\n\n\n##### Additional Links\n\n\n* [MDN docs for forEach](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FArray\u002FforEach)\n* [MDN docs for map](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FArray\u002Fmap)\n* [JavaScript — Map vs. ForEach](https:\u002F\u002Fcodeburst.io\u002Fjavascript-map-vs-foreach-f38111822c0f)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is short-circuit evaluation in JavaScript?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nShort-circuit evaluation involves logical operations evaluating from left-to-right and stopping early.\n\n```js\ntrue || false\n```\n\nIn the above sample using logical OR, JavaScript won't look at the second operand `false`, because the expression evaluates to `true` regardless. This is known as short-circuit evaluation.\n\nThis also works for logical AND.\n\n```js\nfalse && true\n```\n\nThis means you can have an expression that throws an error if evaluated, and it won't cause issues.\n\n```js\ntrue || nonexistentFunction()\nfalse && nonexistentFunction()\n```\n\nThis remains true for multiple operations because of left-to-right evaluation.\n\n```js\ntrue || nonexistentFunction() || window.nothing.wouldThrowError\ntrue || window.nothing.wouldThrowError\ntrue\n```\n\nA common use case for this behavior is setting default values. If the first operand is falsy the second operand will be evaluated.\n\n```js\nconst options = {}\nconst setting = options.setting || \"default\"\nsetting \u002F\u002F \"default\"\n```\n\nAnother common use case is only evaluating an expression if the first operand is truthy.\n\n```js\n\u002F\u002F Instead of:\naddEventListener(\"click\", e => {\n  if (e.target.closest(\"button\")) {\n    handleButtonClick(e)\n  }\n})\n\n\u002F\u002F You can take advantage of short-circuit evaluation:\naddEventListener(\n  \"click\",\n  e => e.target.closest(\"button\") && handleButtonClick(e)\n)\n```\n\nIn the above case, if `e.target` is not or does not contain an element matching the `\"button\"` selector, the function will not be called. This is because the first operand will be falsy, causing the second operand to not be evaluated.\n\n\n#### Good to hear\n\n\n* Logical operations do not produce a boolean unless the operand(s) evaluate to a boolean.\n\n\n##### Additional Links\n\n\n* [JavaScript: What is short-circuit evaluation?](https:\u002F\u002Fcodeburst.io\u002Fjavascript-what-is-short-circuit-evaluation-ff22b2f5608c)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### Are semicolons required in JavaScript?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nSometimes. Due to JavaScript's automatic semicolon insertion, the interpreter places semicolons after most statements. This means semicolons can be omitted in most cases.\n\nHowever, there are some cases where they are required. They are not required at the beginning of a block, but are if they follow a line and:\n\n1.  The line starts with `[`\n\n```js\nconst previousLine = 3\n;[1, 2, previousLine].map(n => n * 2)\n```\n\n2.  The line starts with `(`\n\n```js\nconst previousLine = 3\n;(function() {\n  \u002F\u002F ...\n})()\n```\n\nIn the above cases, the interpreter does not insert a semicolon after `3`, and therefore it will see the `3` as attempting object property access or being invoked as a function, which will throw errors.\n\n\n#### Good to hear\n\n\n* Semicolons are usually optional in JavaScript but have edge cases where they are required.\n* If you don't use semicolons, tools like Prettier will insert semicolons for you in the places where they are required on save in a text editor to prevent errors.\n\n\n##### Additional Links\n\n\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What will the console log in this example?\n\n```js\nvar foo = 1\nvar foobar = function() {\n  console.log(foo)\n  var foo = 2\n}\nfoobar()\n```\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nDue to hoisting, the local variable `foo` is declared before the `console.log` method is called. This means the local variable `foo` is passed as an argument to `console.log()` instead of the global one declared outside of the function. However, since the value is not hoisted with the variable declaration, the output will be `undefined`, not `2`.\n\n\n#### Good to hear\n\n\n* Hoisting is JavaScript’s default behavior of moving declarations to the top\n* Mention of `strict` mode\n\n\n##### Additional Links\n\n\n* [MDN docs for hoisting](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FHoisting)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### How does hoisting work in JavaScript?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nHoisting is a JavaScript mechanism where variable and function declarations are put into memory during the compile phase. This means that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.\n\nHowever, the value is not hoisted with the declaration.\n\nThe following snippet:\n\n```js\nconsole.log(hoist)\nvar hoist = \"value\"\n```\n\nis equivalent to:\n\n```js\nvar hoist\nconsole.log(hoist)\nhoist = \"value\"\n```\n\nTherefore logging `hoist` outputs `undefined` to the console, not `\"value\"`.\n\nHoisting also allows you to invoke a function declaration before it appears to be declared in a program.\n\n```js\nmyFunction() \u002F\u002F No error; logs \"hello\"\nfunction myFunction() {\n  console.log(\"hello\")\n}\n```\n\nBut be wary of function expressions that are assigned to a variable:\n\n```js\nmyFunction() \u002F\u002F Error: `myFunction` is not a function\nvar myFunction = function() {\n  console.log(\"hello\")\n}\n```\n\n\n#### Good to hear\n\n\n* Hoisting is JavaScript’s default behavior of moving declarations to the top\n* Functions declarations are hoisted before variable declarations\n\n\n##### Additional Links\n\n\n* [MDN docs for hoisting](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FHoisting)\n* [Understanding Hoisting in JavaScript](https:\u002F\u002Fscotch.io\u002Ftutorials\u002Funderstanding-hoisting-in-javascript)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is the difference between HTML and React event handling?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nIn HTML, the attribute name is in all lowercase and is given a string invoking a function defined somewhere:\n\n```html\n\u003Cbutton onclick=\"handleClick()\">\u003C\u002Fbutton>\n```\n\nIn React, the attribute name is camelCase and are passed the function reference inside curly braces:\n\n```js\n\u003Cbutton onClick={handleClick} \u002F>\n```\n\nIn HTML, `false` can be returned to prevent default behavior, whereas in React `preventDefault` has to be called explicitly.\n\n```html\n\u003Ca href=\"#\" onclick=\"console.log('The link was clicked.'); return false\" \u002F>\n```\n\n```js\nfunction handleClick(e) {\n  e.preventDefault()\n  console.log(\"The link was clicked.\")\n}\n```\n\n\n#### Good to hear\n\n\n* HTML uses lowercase, React uses camelCase.\n\n\n##### Additional Links\n\n\n* [React docs on Handling Events](https:\u002F\u002Freactjs.org\u002Fdocs\u002Fhandling-events.html)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is the reason for wrapping the entire contents of a JavaScript source file in a function that is immediately invoked?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nThis technique is very common in JavaScript libraries. It creates a closure around the entire contents of the file which creates a private namespace and thereby helps avoid potential name clashes between different JavaScript modules and libraries. The function is immediately invoked so that the namespace (library name) is assigned the return value of the function.\n\n```js\nconst myLibrary = (function() {\n  var privateVariable = 2\n  return {\n    publicMethod: () => privateVariable\n  }\n})()\nprivateVariable \u002F\u002F ReferenceError\nmyLibrary.publicMethod() \u002F\u002F 2\n```\n\n\n#### Good to hear\n\n\n* Used among many popular JavaScript libraries\n* Creates a private namespace\n\n\n##### Additional Links\n\n\n* [MDN docs for closures](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FClosures)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What does the following function return?\n\n```js\nfunction greet() {\n  return\n  {\n    message: \"hello\"\n  }\n}\n```\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nBecause of JavaScript's automatic semicolon insertion (ASI), the compiler places a semicolon after `return` keyword and therefore it returns `undefined` without an error being thrown.\n\n\n#### Good to hear\n\n\n* Automatic semicolon placement can lead to time-consuming bugs\n\n\n##### Additional Links\n\n\n* [Automatic semicolon insertion in JavaScript](http:\u002F\u002F2ality.com\u002F2011\u002F05\u002Fsemicolon-insertion.html)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What are inline conditional expressions?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nSince a JSX element tree is one large expression, you cannot embed statements inside. Conditional expressions act as a replacement for statements to use inside the tree.\n\nFor example, this won't work:\n\n\u003C!-- prettier-ignore -->\n```js\nfunction App({ messages, isVisible }) {\n  return (\n    \u003Cdiv>\n      if (messages.length > 0) {\n        \u003Ch2>You have {messages.length} unread messages.\u003C\u002Fh2>\n      } else {\n        \u003Ch2>You have no unread messages.\u003C\u002Fh2>\n      }\n      if (isVisible) {\n        \u003Cp>I am visible.\u003C\u002Fp>\n      }\n    \u003C\u002Fdiv>\n  )\n}\n```\n\nLogical AND `&&` and the ternary `? :` operator replace the `if`\u002F`else` statements.\n\n```js\nfunction App({ messages, isVisible }) {\n  return (\n    \u003Cdiv>\n      {messages.length > 0 ? (\n        \u003Ch2>You have {messages.length} unread messages.\u003C\u002Fh2>\n      ) : (\n        \u003Ch2>You have no unread messages.\u003C\u002Fh2>\n      )}\n      {isVisible && \u003Cp>I am visible.\u003C\u002Fp>}\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n\n#### Good to hear\n\n\n\n\n##### Additional Links\n\n\n* [React docs on Conditional Rendering](https:\u002F\u002Freactjs.org\u002Fdocs\u002Fconditional-rendering.html)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is a key? What are the benefits of using it in lists?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nKeys are a special string attribute that helps React identify which items have been changed, added or removed. They are used when rendering array elements to give them a stable identity. Each element's key must be unique (e.g. IDs from the data or indexes as a last resort).\n\n```js\nconst todoItems = todos.map(todo => \u003Cli key={todo.id}>{todo.text}\u003C\u002Fli>)\n```\n\n* Using indexes as keys is not recommended if the order of items may change, as it might negatively impact performance and may cause issues with component state.\n* If you extract list items as a separate component then apply keys on the list component instead of the `\u003Cli>` tag.\n\n\n#### Good to hear\n\n\n* Keys give elements in a collection a stable identity and help React identify changes.\n* You should avoid using indexes as keys if the order of items may change.\n* You should lift the key up to the component, instead of the `\u003Cli>` element, if you extract list items as components.\n\n\n##### Additional Links\n\n\n* [React docs on Lists and Keys](https:\u002F\u002Freactjs.org\u002Fdocs\u002Flists-and-keys.html)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is the difference between lexical scoping and dynamic scoping?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nLexical scoping refers to when the location of a function's definition determines which variables you have access to. On the other hand, dynamic scoping uses the location of the function's invocation to determine which variables are available.\n\n\n#### Good to hear\n\n\n* Lexical scoping is also known as static scoping.\n* Lexical scoping in JavaScript allows for the concept of closures.\n* Most languages use lexical scoping because it tends to promote source code that is more easily understood.\n\n\n##### Additional Links\n\n\n* [Mozilla Docs Closures & Lexical Scoping](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FClosures)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### Create a function that masks a string of characters with `#` except for the last four (4) characters.\n\n```js\nmask(\"123456789\") \u002F\u002F \"#####6789\"\n```\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\n> There are many ways to solve this problem, this is just one one of them.\n\nUsing `String.prototype.slice()` we can grab the last 4 characters of the string by passing `-4` as an argument. Then, using `String.prototype.padStart()`, we can pad the string to the original length with the repeated mask character.\n\n```js\nconst mask = (str, maskChar = \"#\") =>\n  str.slice(-4).padStart(str.length, maskChar)\n```\n\n\n#### Good to hear\n\n\n* Short, one-line functional solutions to problems should be preferred provided they are efficient\n\n\n##### Additional Links\n\n\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is the output of the following code?\n\n```js\nconst a = [1, 2, 3]\nconst b = [1, 2, 3]\nconst c = \"1,2,3\"\n\nconsole.log(a == c)\nconsole.log(a == b)\n```\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nThe first `console.log` outputs `true` because JavaScript's compiler performs type conversion and therefore it compares to strings by their value. On the other hand, the second `console.log` outputs `false` because Arrays are Objects and Objects are compared by reference.\n\n\n#### Good to hear\n\n\n* JavaScript performs automatic type conversion\n* Objects are compared by reference\n* Primitives are compared by value\n\n\n##### Additional Links\n\n\n* [JavaScript Value vs Reference](https:\u002F\u002Fmedium.com\u002Fdailyjs\u002Fback-to-roots-javascript-value-vs-reference-8fb69d587a18)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### How does prototypal inheritance differ from classical inheritance?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nIn the classical inheritance paradigm, object instances inherit their properties and functions from a class, which acts as a blueprint for the object. Object instances are typically created using a constructor and the `new` keyword.\n\nIn the prototypal inheritance paradigm, object instances inherit directly from other objects and are typically created using factory functions or `Object.create()`.\n\n\n#### Good to hear\n\n\n\n\n##### Additional Links\n\n\n* [MDN docs for inheritance and the prototype chain](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FInheritance_and_the_prototype_chain)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is a MIME type and what is it used for?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\n`MIME` is an acronym for `Multi-purpose Internet Mail Extensions`. It is used as a standard way of classifying file types over the Internet.\n\n\n#### Good to hear\n\n\n* A `MIME type` actually has two parts: a type and a subtype that are separated by a slash (\u002F). For example, the `MIME type` for Microsoft Word files is `application\u002Fmsword` (i.e., type is application and the subtype is msword).\n\n\n##### Additional Links\n\n\n* [MIME Type MDN](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTTP\u002FBasics_of_HTTP\u002FMIME_types)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What are Promises?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nThe `Promise` object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.\nAn example can be the following snippet, which after 100ms prints out the result string to the standard output. Also, note the catch, which can be used for error handling. `Promise`s are chainable.\n\n```js\nnew Promise((resolve, reject) => {\n  setTimeout(() => {\n    resolve(\"result\")\n  }, 100)\n})\n  .then(console.log)\n  .catch(console.error)\n```\n\n\n#### Good to hear\n\n\n* Take a look into the other questions regarding `Promise`s!\n\n\n##### Additional Links\n\n\n* [Master the JavaScript Interview: What is a Promise?](https:\u002F\u002Fmedium.com\u002Fjavascript-scene\u002Fmaster-the-javascript-interview-what-is-a-promise-27fc71e772618)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What are JavaScript data types?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nThe latest ECMAScript standard defines seven data types, six of them being primitive: `Boolean`, `Null`, `Undefined`, `Number`, `String`, `Symbol` and one non-primitive data type: `Object`.\n\n\n#### Good to hear\n\n\n* Mention of newly added `Symbol` data type\n* `Array`, `Date` and `function` are all of type `object`\n* Functions in JavaScript are objects with the capability of being callable\n\n\n##### Additional Links\n\n\n* [MDN docs for data types and data structures](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FData_structures)\n* [Understanding Data Types in JavaScript](https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Funderstanding-data-types-in-javascript)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### NodeJS often uses a callback pattern where if an error is encountered during execution, this error is passed as the first argument to the callback. What are the advantages of this pattern?\n\n```js\nfs.readFile(filePath, function(err, data) {\n  if (err) {\n    \u002F\u002F handle the error, the return is important here\n    \u002F\u002F so execution stops here\n    return console.log(err)\n  }\n  \u002F\u002F use the data object\n  console.log(data)\n})\n```\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nAdvantages include:\n\n* Not needing to process data if there is no need to even reference it\n* Having a consistent API leads to more adoption\n* Ability to easily adapt a callback pattern that will lead to more maintainable code\n\nAs you can see from below example, the callback is called with null as its first argument if there is no error. However, if there is an error, you create an Error object, which then becomes the callback's only parameter. The callback function allows a user to easily know whether or not an error occurred.\n\nThis practice is also called the _Node.js error convention_, and this kind of callback implementations are called _error-first callbacks_.\n\n```js\nvar isTrue = function(value, callback) {\n  if (value === true) {\n    callback(null, \"Value was true.\")\n  } else {\n    callback(new Error(\"Value is not true!\"))\n  }\n}\n\nvar callback = function(error, retval) {\n  if (error) {\n    console.log(error)\n    return\n  }\n  console.log(retval)\n}\n\nisTrue(false, callback)\nisTrue(true, callback)\n\n\u002F*\n  { stack: [Getter\u002FSetter],\n    arguments: undefined,\n    type: undefined,\n    message: 'Value is not true!' }\n  Value was true.\n*\u002F\n```\n\n\n#### Good to hear\n\n\n* This is just a convention. However, you should stick to it.\n\n\n##### Additional Links\n\n\n* [The Node.js Way Understanding Error-First Callbacks](http:\u002F\u002Ffredkschott.com\u002Fpost\u002F2014\u002F03\u002Funderstanding-error-first-callbacks-in-node-js\u002F)\n* [What are the error conventions?](https:\u002F\u002Fdocs.nodejitsu.com\u002Farticles\u002Ferrors\u002Fwhat-are-the-error-conventions)\n\n\u003C\u002Fdetails>\n\n\u003Cbr>[⬆ Back to top](#table-of-contents)\n\n### What is a callback? Can you show an example using one?\n\n\u003Cdetails>\n\u003Csummary>View answer\u003C\u002Fsummary>\n\nCallbacks are functions passed as an argument to another function to be executed once an event has occurred or a certain task is complete, often used in asynchronous code. Callback functions are invoked later by a piece of code but can be declared on initialization without being invoked.\n\nAs an example, event listeners are asynchronous callbacks that are only executed when a specific event occurs.\n\n```js\nfunction onClick() {\n  console.log(\"The user clicked on the page.\")\n}\ndocument.addEventListener(\"click\", onClick)\n```\n\nHowever, callbacks can also be synchronous. The following `map` function takes a callback ","30 Seconds of Interviews 是一个精心整理的常见面试问题集合，旨在帮助你为下一次面试做好准备。该项目主要使用 JavaScript 编写，涵盖了从基础到高级的各种技术问题，包括但不限于 CSS、HTML 和 JavaScript 相关的知识点。每个问题都附有简短而精炼的答案，方便快速复习和记忆。适合正在寻找 IT 相关职位或希望提升自己技术水平的开发者在准备面试时参考学习。此外，项目鼓励社区贡献，支持通过提交 PR 的方式增加新的面试题目，进一步丰富资源库。",2,"2026-06-11 02:54:34","top_language"]