Front-end Web Development JavaScript Flashcards

24 sample cards from the JavaScript deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. What is the difference between $find()$ and $filter()$?

   $find()$ returns the first single element matching the predicate (or $undefined$). $filter()$ returns a new array of all matching elements.

2. Which DOM method selects a single element by its $id$ attribute, and what does it return if not found?

   $document.getElementById("myId")$. It returns the element, or $null$ if no element with that id exists.

3. What is the difference between $querySelector()$ and $querySelectorAll()$?

   $querySelector(selector)$ returns the FIRST element matching a CSS selector (or $null$). $querySelectorAll(selector)$ returns a static $NodeList$ of ALL matching elements.

4. What is the key difference between $getElementsByClassName()$ and $querySelectorAll()$ regarding the collection returned?

   $getElementsByClassName()$ returns a LIVE $HTMLCollection$ that updates as the DOM changes. $querySelectorAll()$ returns a STATIC $NodeList$ that does not update after creation.

5. How do you select all elements with the class $card$ using a CSS-selector-based method?

   $document.querySelectorAll(".card")$. The leading dot denotes a class selector; for an id you would use $"#card"$.

6. Why can't you call array methods like $map()$ directly on the result of $querySelectorAll()$, and how do you fix it?

   It returns a $NodeList$, not a true array. Convert it first with $Array.from(nodeList)$ or the spread $[...nodeList]$ before using $map$, $filter$, etc.

7. What is the standard method to attach an event handler to an element, and what is an advantage of it?

   $element.addEventListener(type, listener, options)$ — e.g., $element.addEventListener("click", handler)$. It can attach multiple handlers for the same event type without overwriting.

8. What is event bubbling in the DOM?

   Event bubbling is the propagation phase where an event triggered on an element fires first on that target, then propagates upward through each ancestor toward the document root.

9. What is the difference between $event.preventDefault()$ and $event.stopPropagation()$?

   $preventDefault()$ cancels the browser's default action (e.g., following a link or submitting a form). $stopPropagation()$ halts the event from bubbling/capturing further to other elements.

10. What is event delegation and why is it useful?

    Event delegation attaches a single listener to a common parent and uses $event.target$ to determine which child triggered it. It is efficient and automatically handles dynamically added children.

11. What is the difference between $event.target$ and $event.currentTarget$?

    $event.target$ is the actual element that originated the event. $event.currentTarget$ is the element whose listener is currently executing (the one $addEventListener$ was called on).

12. What is the difference between an element's $textContent$ and $innerHTML$ properties?

    $textContent$ gets/sets only plain text and treats input as literal text. $innerHTML$ gets/sets HTML markup, parsing tags into DOM nodes (which carries XSS risk with untrusted input).

13. How do you add, remove, and toggle a CSS class on an element?

    Use the $classList$ API: $el.classList.add("x")$, $el.classList.remove("x")$, and $el.classList.toggle("x")$. You can also test with $el.classList.contains("x")$.

14. What is the difference between setting a style via $element.style.color$ and changing a class?

    $element.style.color$ sets an inline style on that single element only. Changing a class applies all rules defined for that class in the stylesheet, which is preferred for separating concerns.

15. What is the difference between $setAttribute()$ and directly setting a property like $element.value$?

    $setAttribute("value", x)$ changes the HTML attribute (the initial/default). Setting $element.value$ changes the live DOM property (current state). They can diverge after user interaction.

16. What is the JavaScript event loop, and why is single-threaded JS still non-blocking?

    The event loop continuously checks the call stack; when it is empty it pushes queued callbacks (from the task/microtask queues) onto it. Async operations are offloaded to the environment, so the single thread is never blocked waiting.

17. What is a Promise in JavaScript and what three states can it be in?

    A Promise is an object representing the eventual result of an asynchronous operation. Its three states are: $pending$ (initial), $fulfilled$ (resolved with a value), and $rejected$ (failed with a reason). Once settled it is immutable.

18. What is the difference between the microtask queue and the macrotask queue regarding execution order?

    Microtasks (e.g., Promise $.then$ callbacks, $queueMicrotask$) run after current synchronous code and BEFORE the next macrotask. Macrotasks (e.g., $setTimeout$, DOM events) run one per event-loop tick, with all microtasks drained between them.

19. How do $Promise.all()$ and $Promise.race()$ differ?

    $Promise.all([...])$ resolves when ALL promises fulfill (returning an array of results) and rejects as soon as any one rejects. $Promise.race([...])$ settles as soon as the FIRST promise settles (fulfilled or rejected).

20. How do you handle a rejected Promise, and what method runs regardless of outcome?

    Chain $.catch(err \Rightarrow ...)$ to handle rejection, and $.finally(() \Rightarrow ...)$ to run cleanup code whether the promise fulfilled or rejected.

21. What does the $async$ keyword do to a function's return value?

    An $async$ function always returns a Promise. A returned non-promise value is automatically wrapped in a resolved Promise, and a thrown error becomes a rejected Promise.

22. What does the $await$ keyword do, and where can it be used?

    $await$ pauses execution of an $async$ function until the awaited Promise settles, then returns its fulfilled value (or throws its rejection). It can only be used inside an $async$ function or at the top level of a module.

23. How do you handle errors when using $async/await$?

    Wrap the awaited calls in a $try...catch$ block; a rejected awaited Promise throws an error that $catch$ intercepts. Optionally add a $finally$ block for cleanup.

24. What is the difference between awaiting two promises sequentially versus running them concurrently with $Promise.all$?

    Sequential ($const\ a = await\ p1; const\ b = await\ p2;$) waits for each in turn, so total time is the sum. $await\ Promise.all([p1, p2])$ starts both immediately and waits once, so total time is the maximum of the two.

What this deck covers

JavaScript flashcards FAQ