Full Stack Web Development JavaScript Programming Flashcards

24 sample cards from the JavaScript Programming deck

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

1. How do you create a shallow copy of an array using the spread operator?

   const copy = [...original]; The spread operator expands the array's elements into a new array literal.

2. What does Array.includes() do and how does it differ from indexOf()?

   includes() returns a boolean indicating whether a value exists; indexOf() returns the index (or -1) and cannot reliably detect NaN, whereas includes() can.

3. How do you access and how do you dynamically access object properties?

   Dot notation (obj.key) for fixed names; bracket notation (obj['key'] or obj[variable]) for dynamic or non-identifier keys.

4. What does Object.keys(), Object.values(), and Object.entries() each return?

   Object.keys() returns an array of the object's keys; Object.values() returns an array of values; Object.entries() returns an array of [key, value] pairs.

5. What is object destructuring in JavaScript?

   A syntax to extract properties into variables, e.g., const { name, age } = person; assigns person.name and person.age to local variables.

6. What is the difference between a shallow copy and a deep copy of an object?

   A shallow copy duplicates only top-level properties (nested objects are shared by reference); a deep copy duplicates all nested levels so no references are shared.

7. How can you create a deep copy of a plain object in modern JavaScript?

   Using structuredClone(obj), or for JSON-safe data JSON.parse(JSON.stringify(obj)).

8. What is the difference between String.slice() and String.substring()?

   Both extract substrings, but slice() accepts negative indices (counting from the end) while substring() treats negative arguments as 0 and swaps arguments if start > end.

9. What are template literals and what two features do they add?

   Strings delimited by backticks (`). They support multi-line strings and interpolation via ${expression}.

10. What is the difference between String.replace() and String.replaceAll()?

    replace() replaces only the first match (unless given a global regex); replaceAll() replaces every occurrence of the substring or global regex.

11. How does a Map differ from a plain object as a key-value store?

    A Map allows keys of any type (including objects), maintains insertion order, has a size property, and is directly iterable; object keys are coerced to strings/symbols.

12. What is a Set in JavaScript and what is its key property?

    A Set is a collection of unique values; it automatically discards duplicates. Common use: deduplicating an array via [...new Set(arr)].

13. What is the difference between JSON.stringify() and JSON.parse()?

    JSON.stringify() converts a JavaScript value into a JSON string; JSON.parse() converts a JSON string back into a JavaScript value.

14. What is the difference between document.getElementById() and document.querySelector()?

    getElementById() selects one element by its id; querySelector() returns the first element matching any CSS selector.

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

    querySelector() returns the first matching element (or null); querySelectorAll() returns a static NodeList of all matching elements.

16. What is the difference between innerHTML, textContent, and innerText?

    innerHTML parses and returns/sets HTML markup; textContent returns/sets all raw text including hidden elements; innerText returns visible rendered text and triggers reflow.

17. How do you add an event listener to a DOM element?

    element.addEventListener(eventType, callback), e.g., element.addEventListener('click', handler). Multiple listeners can be attached for the same event.

18. What is event bubbling and how does it relate to event delegation?

    Bubbling means an event propagates from the target element up through its ancestors. Event delegation exploits this by attaching one listener to a parent to handle events from many children.

19. What does event.preventDefault() do versus event.stopPropagation()?

    preventDefault() cancels the default browser action (e.g., form submit/link nav); stopPropagation() prevents the event from bubbling further up the DOM tree.

20. What is the difference between localStorage and sessionStorage?

    Both store string key-value pairs per origin, but localStorage persists until explicitly cleared; sessionStorage is cleared when the page session/tab ends.

21. What is the difference between setTimeout() and setInterval()?

    setTimeout() runs a callback once after a delay; setInterval() runs it repeatedly at fixed intervals until cleared with clearInterval().

22. What is the difference between Promise, async/await, and how do you handle errors with await?

    async functions return a Promise; await pauses until a Promise settles. Errors are handled with try/catch around the await, equivalent to .catch() on the Promise.

23. What does the fetch() API return and how do you get JSON from the response?

    fetch() returns a Promise resolving to a Response object. You call response.json() (which also returns a Promise) to parse the body as JSON.

24. What is the difference between Promise.all() and Promise.race()?

    Promise.all() resolves when all promises resolve (rejecting if any rejects) and returns an array of results; Promise.race() settles as soon as the first promise settles.

What this deck covers

JavaScript Programming flashcards FAQ