Top 30 Easy TypeScript & Web APIs Concepts Quiz for Beginners

30 questions. Pick an answer, or open “Show the answer” to read it.

Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.

1. Question 1 of 30

   What is the main advantage of using type annotations in TypeScript?

   • aThey add runtime type validation checks to JavaScript applications.
   • bThey make the compiled JavaScript code execute faster.
   • cThey automatically convert variable types at runtime for compatibility.
   • dThey allow the TypeScript compiler to identify type errors during development.
   Show the answer

   Answer: d · They allow the TypeScript compiler to identify type errors during development.

   The card emphasizes that type annotations enable TypeScript to catch type mismatches during development, preventing bugs before runtime. They are erased during compilation and add no runtime overhead, meaning they do not perform runtime validation.

   Read the full bite: TypeScript Type Annotations: Defining Your Data's Shape

2. Question 2 of 30

   When would a TypeScript tuple be the most appropriate choice compared to an array?

   • aTo store a collection of user IDs, where the number of IDs can vary.
   • bTo hold a series of sensor readings over time.
   • cTo maintain a list of all available product categories.
   • dTo represent a single point in 2D space, like [x-coordinate, y-coordinate].
   Show the answer

   Answer: d · To represent a single point in 2D space, like [x-coordinate, y-coordinate].

   A tuple is ideal for fixed-length structures where the position and type of each element are important, such as a coordinate pair. An array is used for variable-length lists of elements of the same type, making options A, C, and D incorrect.

   Read the full bite: TypeScript's Basic Types: The Building Blocks

3. Question 3 of 30

   What is the main drawback of adding your own variables and functions directly to the window object?

   • aIt can significantly increase the browser's memory consumption.
   • bIt increases the risk of naming conflicts and makes your code fragile.
   • cIt makes your code less secure by exposing internal implementation details.
   • dIt prevents the use of modern JavaScript module systems for organization.
   Show the answer

   Answer: b · It increases the risk of naming conflicts and makes your code fragile.

   The card states that adding variables directly to the window object "makes your code fragile and can lead to conflicts with third-party scripts." This 'global scope pollution' is the primary concern, not memory, security, or module prevention.

   Read the full bite: The `window` Object: Your Browser's Global Scope

4. Question 4 of 30

   Which task is NOT primarily handled by the `document` object in JavaScript?

   • aCreating a new HTML element to add to the page.
   • bModifying the style of an existing HTML element.
   • cLocating a specific element within the webpage's structure.
   • dRedirecting the browser to a different web address.
   Show the answer

   Answer: d · Redirecting the browser to a different web address.

   The `document` object is for interacting with the page's content and structure, such as modifying elements, creating new ones, or finding existing elements. Navigating to a new URL is a browser-level action handled by the `window.location` object, not the `document` object.

   Read the full bite: The `document` Object: Your Page's API

5. Question 5 of 30

   When JavaScript modifies an element using the DOM, what is the immediate and primary outcome?

   • aThe browser's visual rendering of the webpage is updated for the user.
   • bA new, modified HTML document is saved to the user's local file system.
   • cThe original HTML file on the web server is permanently altered.
   • dThe browser creates a backup of the previous DOM state for undo operations.
   Show the answer

   Answer: a · The browser's visual rendering of the webpage is updated for the user.

   The DOM is the browser's live, in-memory model of the webpage, so changes made via JavaScript directly update what the user sees. These changes do not affect the original HTML file on the server, which remains unchanged.

   Read the full bite: The DOM: Your HTML as a Live Object Tree

6. Question 6 of 30

   Which scenario is the most appropriate use case for sessionStorage?

   • aTemporarily saving progress on a multi-page form within a single browser tab.
   • bStoring a user's dark mode preference to apply on every future visit.
   • cKeeping a user's authentication token secure for the duration of their session.
   • dStoring a large catalog of product information for offline browsing.
   Show the answer

   Answer: a · Temporarily saving progress on a multi-page form within a single browser tab.

   sessionStorage is ideal for temporary data tied to a single tab, such as partially filled form data that should persist across page refreshes but not after the tab closes. Storing sensitive data like authentication tokens is explicitly advised against for any Web Storage, and large datasets are better handled by IndexedDB.

   Read the full bite: Web Storage API: Browser Key-Value Stores

7. Question 7 of 30

   What is the primary role of TypeScript's `typeof` operator?

   • aTo ensure that a function's return value matches a predefined interface during execution.
   • bTo derive a static type from an existing value or variable for use in type declarations.
   • cTo dynamically generate new type definitions based on user input during application startup.
   • dTo inspect the type of a variable at runtime and return a string describing it.
   Show the answer

   Answer: b · To derive a static type from an existing value or variable for use in type declarations.

   TypeScript's `typeof` is a compile-time operator used to extract the static type of an existing value or variable, enabling type definitions to follow implementation. It is distinct from JavaScript's runtime `typeof`, which returns a string representation of a value's type.

   Read the full bite: TypeScript's `typeof`: Get a Type from a Value

8. Question 8 of 30

   What is the primary reason to explicitly declare a function's return type in TypeScript, rather than letting it be inferred?

   • aTo enable TypeScript to automatically cast the return value to the expected type if there's a mismatch.
   • bTo improve the runtime performance of the function by providing the compiler with more information.
   • cTo ensure the function's output type remains predictable and stable, even if its implementation details evolve.
   • dTo allow the function to accept a wider range of input types while maintaining type safety.
   Show the answer

   Answer: c · To ensure the function's output type remains predictable and stable, even if its implementation details evolve.

   Explicitly declaring the return type acts as a contract, ensuring that if the function's internal logic changes, TypeScript will flag an error if the new logic produces a different type than declared. This prevents subtle bugs that inference might otherwise miss. TypeScript performs static type checking at compile-time and does not automatically cast or convert types at runtime to fix mismatches; it will report a compile-time error instead.

   Read the full bite: TypeScript: Typing Function Inputs and Outputs

9. Question 9 of 30

   According to the card, what is the "main footgun" that TypeScript's strict mode will flag as an error when defining a class?

   • aDeclaring a class property as readonly without providing an initial value.
   • bForgetting to initialize a class property within the constructor or with a default value.
   • cDefining a class method without explicitly specifying its return type.
   • dCreating a class instance without using the new keyword.
   Show the answer

   Answer: b · Forgetting to initialize a class property within the constructor or with a default value.

   The card explicitly states, "The main footgun is forgetting to initialize properties, which strict mode flags as an error," directly referring to the strictPropertyInitialization rule. While declaring a readonly property without an initial value would also be an error, the card highlights the general issue of uninitialized properties as the "main footgun."

   Read the full bite: TypeScript Classes: Blueprints for Typed Objects

10. Question 10 of 30

    Why does TypeScript's document.getElementById() method return a union type like HTMLElement | null?

    • aTo allow for more flexible type inference, letting developers decide the exact element type.
    • bTo improve application performance by signaling to the compiler that a DOM lookup might be expensive.
    • cTo prevent runtime errors by forcing developers to explicitly handle cases where the requested element might not exist.
    • dTo indicate that the DOM API is inherently untyped and TypeScript is providing a best-guess type.
    Show the answer

    Answer: c · To prevent runtime errors by forcing developers to explicitly handle cases where the requested element might not exist.

    The primary reason for the 'HTMLElement | null' return type is to prevent runtime errors that occur if a script tries to access a non-existent DOM element. TypeScript forces developers to explicitly check for null, ensuring safe interaction. Option A is incorrect because the 'null' part is about existence, not about providing flexibility in inferring the specific element type (e.g., HTMLDivElement vs. HTMLSpanElement).

    Read the full bite: Type-Safe DOM Selection in TypeScript

11. Question 11 of 30

    Which statement accurately describes how `dataset` converts an HTML `data-*` attribute name like `data-User-ID` into a JavaScript property?

    • aThe `data-` prefix is retained as `data`, and the rest of the name is converted to `camelCase`.
    • bThe `data-` prefix is dropped, and the name is converted to `camelCase` directly, preserving original casing after the prefix.
    • cThe `data-` prefix is dropped, and hyphens are replaced with underscores, converting the name to `snake_case`.
    • dThe entire attribute name is first converted to lowercase, then the `data-` prefix is dropped, and the remaining name is converted to `camelCase`.
    Show the answer

    Answer: d · The entire attribute name is first converted to lowercase, then the `data-` prefix is dropped, and the remaining name is converted to `camelCase`.

    The card explicitly states that "Any uppercase letters in the original HTML attribute name are converted to lowercase before this transformation," and then "the data- prefix is dropped and the name is converted to camelCase." Option B is incorrect because it misses the crucial initial lowercasing of the HTML attribute name.

    Read the full bite: Accessing data-* Attributes with `dataset`

12. Question 12 of 30

    What is the primary negative consequence of 'Callback Hell' in JavaScript?

    • aIt forces asynchronous operations to execute synchronously, slowing down the application.
    • bIt results in deeply nested, unreadable code that is difficult to maintain.
    • cIt causes the application to block and become unresponsive during I/O operations.
    • dIt prevents the JavaScript runtime from properly executing subsequent callback functions.
    Show the answer

    Answer: b · It results in deeply nested, unreadable code that is difficult to maintain.

    Callback Hell's core problem is the 'pyramid of doom' structure, leading to deeply indented code that is 'notoriously difficult to read and maintain.' It does not block the application; JavaScript's asynchronous model prevents that.

    Read the full bite: Callback Hell: Navigating JavaScript's Async Pyramid

13. Question 13 of 30

    What is the primary purpose of using a JavaScript Promise?

    • aTo immediately return a value from a function without waiting for any operations to finish.
    • bTo convert any synchronous function into an asynchronous one.
    • cTo ensure that a block of code is executed only after the user has interacted with the page.
    • dTo manage the eventual result or error of an operation that completes at an unknown future time.
    Show the answer

    Answer: d · To manage the eventual result or error of an operation that completes at an unknown future time.

    The card defines a Promise as a "placeholder for the eventual result of an asynchronous operation" and states they are used for tasks that "don't complete immediately." Option B is a common misconception; Promises manage already asynchronous tasks, they don't inherently make synchronous code non-blocking.

    Read the full bite: The Promise Object: A Placeholder for Future Values

14. Question 14 of 30

    What condition will cause the Promise returned directly by a fetch() call to reject?

    • aThe response.ok property evaluates to false.
    • bThe response.json() method fails to parse the body content.
    • cThe server responds with an HTTP status code indicating an error (e.g., 404 or 500).
    • dA network error occurs, preventing the request from being sent or received.
    Show the answer

    Answer: d · A network error occurs, preventing the request from being sent or received.

    The card explicitly states that "fetch() only rejects its promise on a network failure (like no internet connection)". Options A and D describe scenarios where the promise resolves, but with an HTTP error status, which must be checked using response.ok. Option B refers to a rejection of the *second* promise, returned by methods like response.json(), not the initial fetch() promise.

    Read the full bite: Fetch API: Making Basic Network Requests

15. Question 15 of 30

    When sending a JavaScript object as JSON data in a POST request using fetch and RequestInit, what is a crucial configuration step?

    • aSpecifying the 'Content-Type' header as 'application/json'.
    • bOmitting the 'body' property, as fetch infers it from the method.
    • cSetting the 'method' property to 'GET' to ensure data is sent.
    • dAutomatically converting the JavaScript object to a JSON string within RequestInit.
    Show the answer

    Answer: a · Specifying the 'Content-Type' header as 'application/json'.

    The card explicitly states that a common pitfall is sending a JSON body without setting the 'Content-Type' header to 'application/json', which is crucial for the server to correctly interpret the data. Option D is incorrect because RequestInit itself does not perform JSON stringification; you must use JSON.stringify() explicitly for the 'body' property.

    Read the full bite: Configuring Fetch Requests with `RequestInit`

16. Question 16 of 30

    Why does a fetch() call with a 404 Not Found status code resolve its promise instead of rejecting it?

    • aThe browser automatically retries requests that result in 4xx status codes before rejecting.
    • bThe server successfully received the request and sent a response, even if it indicates an error.
    • cA 404 status is not considered a severe enough error to warrant a promise rejection.
    • dThe fetch() API is designed to only reject promises for client-side JavaScript errors.
    Show the answer

    Answer: b · The server successfully received the request and sent a response, even if it indicates an error.

    The Fetch API's promise resolves if the server successfully receives the request and sends any response back, regardless of the HTTP status code. It only rejects for network-level failures, not application-level HTTP errors like 404. The most tempting distractor (C) is wrong because the reason isn't about the severity of the error, but about the successful delivery of *any* response from the server.

    Read the full bite: Fetch API Errors: Why a 404 is a 'Success'

17. Question 17 of 30

    Which scenario describes a limitation of TypeScript's Indexed Access Types?

    • aRetrieving the runtime value of a specific property.
    • bUsing a union of literal types as the index key.
    • cEmploying a variable declared with 'const' as the index.
    • dExtracting the type of an element from an array.
    Show the answer

    Answer: c · Employing a variable declared with 'const' as the index.

    Indexed Access Types operate at compile-time and require a type as the index, not a runtime value like a 'const' variable, as explicitly stated in the 'WHEN NOT TO USE IT' section. Option A is incorrect because these types are used to retrieve the *type* of a property, not its runtime *value*.

    Read the full bite: Indexed Access Types: Look Up a Property's Type

18. Question 18 of 30

    When would localStorage be the LEAST appropriate choice for data storage?

    • aSaving a small, non-critical flag indicating a user has seen a welcome tour.
    • bPersisting a user's authentication token for secure API access.
    • cRemembering the content a user typed into a form field before submission.
    • dStoring a user's preferred theme (e.g., 'dark' or 'light').
    Show the answer

    Answer: b · Persisting a user's authentication token for secure API access.

    The card explicitly states, "Never store sensitive information like authentication tokens... in localStorage. It is accessible via JavaScript, making it vulnerable to Cross-Site Scripting (XSS) attacks." The other options are all examples of appropriate, non-sensitive data for localStorage.

    Read the full bite: localStorage: Your Browser's Persistent Key-Value Store

19. Question 19 of 30

    When a user opens a new tab to the same website, what happens to the sessionStorage data from the original tab?

    • aA new, independent sessionStorage is created for the new tab.
    • bThe data is shared and accessible in both tabs.
    • cThe data is deleted from the original tab and moved to the new one.
    • dThe data persists in the original tab but is read-only in the new tab.
    Show the answer

    Answer: a · A new, independent sessionStorage is created for the new tab.

    sessionStorage is explicitly isolated to a single tab, meaning each tab gets its own separate instance. Therefore, opening a new tab creates a completely new, independent sessionStorage, not sharing data with existing tabs. Option B is incorrect because sessionStorage is not shared between tabs, which is a common misconception.

    Read the full bite: sessionStorage: Tab-Specific Browser Memory

20. Question 20 of 30

    When saving a JavaScript object to Web Storage (like localStorage), why is it necessary to use JSON.stringify()?

    • aTo reduce the object's size, making storage more efficient for complex data.
    • bTo automatically update the object's state across different browser sessions.
    • cTo ensure the object's data is encrypted for security purposes.
    • dBecause Web Storage APIs are designed to store only string data for both keys and values.
    Show the answer

    Answer: d · Because Web Storage APIs are designed to store only string data for both keys and values.

    The card explicitly states that Web Storage was designed to store only strings for both its keys and values, making JSON.stringify() essential to convert objects into this required string format. Option C is incorrect because JSON.stringify() does not encrypt data; the card warns against storing sensitive data due to XSS vulnerability, not that stringify protects it.

    Read the full bite: Storing Objects in Web Storage: The JSON Step

21. Question 21 of 30

    What is the primary issue if an SPA uses history.pushState() but fails to implement a popstate event listener?

    • aThe pushState call itself will fail, preventing the URL from ever changing.
    • bThe browser will automatically perform a full page reload when the user clicks the back button.
    • cThe application's content will not update to reflect the correct state when the user navigates using browser history buttons.
    • dThe URL will update, but the browser's back and forward buttons will not change the URL.
    Show the answer

    Answer: c · The application's content will not update to reflect the correct state when the user navigates using browser history buttons.

    The card states that failing to implement a popstate listener will 'break the back button,' meaning the application won't react to history navigation by rendering the correct content. The browser does not automatically reload the page; it fires the popstate event, expecting the SPA to handle the UI update.

    Read the full bite: Manipulate Browser History with pushState and replaceState

22. Question 22 of 30

    What critical timing issue must developers consider when handling the popstate event?

    • aThe event might fire multiple times for a single navigation.
    • bIt can only be listened for using an inline onpopstate attribute, not addEventListener.
    • cIt fires only after all network requests for the new state are complete.
    • dThe event fires before the browser has fully updated the document's DOM to the new URL.
    Show the answer

    Answer: d · The event fires before the browser has fully updated the document's DOM to the new URL.

    The card explicitly states that the popstate event fires before the document is fully updated, which can lead to reading stale DOM information. Deferring work with setTimeout(..., 0) is suggested to mitigate this. Option C is incorrect as the timing issue relates to DOM updates, not necessarily network requests.

    Read the full bite: The `popstate` Event: Handling Browser History Navigation

23. Question 23 of 30

    What is the primary reason to use a Web Worker in a web application?

    • aTo perform CPU-intensive tasks without blocking the main thread and freezing the user interface.
    • bTo enable direct manipulation of the Document Object Model (DOM) from a background thread.
    • cTo replace all asynchronous operations like network requests with a more efficient background process.
    • dTo share JavaScript variables and objects directly between the main thread and background tasks.
    Show the answer

    Answer: a · To perform CPU-intensive tasks without blocking the main thread and freezing the user interface.

    Web Workers are designed to offload heavy, CPU-intensive tasks to a separate thread, preventing the main UI thread from freezing. They cannot directly manipulate the DOM, and data is copied, not shared, between threads. While they handle background tasks, they are not intended to replace all simple asynchronous operations like network requests due to overhead.

    Read the full bite: Web Workers: Keep Your UI Responsive During Heavy Tasks

24. Question 24 of 30

    A service worker script located at '/scripts/sw.js' attempts to register with a scope of '/'. What specific condition must be met for this registration to succeed?

    • aThe navigator.serviceWorker.register() call must specify a scope relative to the script's path, such as '../'.
    • bThe server must include a 'Service-Worker-Allowed: /' HTTP header when serving the 'sw.js' file.
    • cThe service worker script must be moved to the root directory of the website.
    • dThe registration must be initiated from a page also located within the '/scripts/' directory.
    Show the answer

    Answer: b · The server must include a 'Service-Worker-Allowed: /' HTTP header when serving the 'sw.js' file.

    The card states that requesting a scope beyond the service worker's directory will fail "unless the server sends the sw.js file with the HTTP header Service-Worker-Allowed: /". Option C is a common workaround but not the specific condition for the given scenario.

    Read the full bite: Service Worker Registration: Claiming Your Control Scope

25. Question 25 of 30

    What is the primary role of the HTMLMediaElement API in web development?

    • aTo directly embed and display audio or video content within an HTML document.
    • bTo ensure that all embedded media automatically starts playing as soon as the page loads.
    • cTo define the specific file formats and codecs used for audio and video content.
    • dTo enable developers to create custom playback controls and interact programmatically with media.
    Show the answer

    Answer: d · To enable developers to create custom playback controls and interact programmatically with media.

    The HTMLMediaElement API acts as a 'remote control' for <audio> and <video> elements, providing a unified JavaScript interface for programmatic control like playing, pausing, and seeking. Option B is incorrect because while autoplay is a media feature, browsers often block it, and the API's primary role is control, not guaranteed auto-playback.

    Read the full bite: HTMLMediaElement: The Remote Control for Browser Media

26. Question 26 of 30

    Which statement best describes the operational model of the Canvas 2D Context?

    • aIt provides direct access to individual pixels for manipulation.
    • bIt functions as a state machine, applying current properties to drawing commands.
    • cIt automatically manages responsive layout and content flow.
    • dIt is primarily designed for creating interactive 3D environments.
    Show the answer

    Answer: b · It functions as a state machine, applying current properties to drawing commands.

    The card explicitly states the Canvas 2D Context is 'not a direct pixel manipulator; it's a state machine that receives commands,' remembering properties like fillStyle until changed. Option A is a common misconception because it draws on a bitmap, but the API itself is state-driven, not pixel-centric.

    Read the full bite: Canvas 2D Context: The API for Drawing on the Web

27. Question 27 of 30

    When would `getUserMedia` be an inappropriate choice for handling user media?

    • aBuilding a video conferencing application that streams live audio and video.
    • bAllowing users to upload a pre-recorded video file from their computer.
    • cCreating an in-browser photo booth that captures images from the webcam.
    • dDeveloping a QR code scanner that uses the device's camera.
    Show the answer

    Answer: b · Allowing users to upload a pre-recorded video file from their computer.

    The card explicitly states, "Do not use this for file uploads; use an <input type="file"> for that." `getUserMedia` is designed for capturing live media streams, not for handling pre-existing files. The other options describe appropriate uses for `getUserMedia`.

    Read the full bite: Requesting Camera and Mic Access with getUserMedia

28. Question 28 of 30

    When is using ctx.save() and ctx.restore() most beneficial in canvas drawing?

    • aTo set a global background color for the canvas that should remain consistent for all future drawings.
    • bTo temporarily apply a rotation to draw a single shape, then reset the canvas's coordinate system for subsequent shapes.
    • cTo store the current visual content (pixels) of the canvas to be retrieved and displayed again later.
    • dTo change the fill color for every single shape drawn on the canvas, one after another, without any complex transformations.
    Show the answer

    Answer: b · To temporarily apply a rotation to draw a single shape, then reset the canvas's coordinate system for subsequent shapes.

    Option B correctly identifies the primary use case: managing temporary transformations for specific drawing operations, allowing the canvas to revert to its previous state. Option A describes a permanent global change, which the card advises against using save/restore for. Option C misunderstands that save/restore manage drawing state, not the actual pixel content. Option D, while possible, is an example of overusing save/restore for simple style changes, which the card suggests avoiding due to added complexity.

    Read the full bite: Managing Canvas State with save() and restore()

29. Question 29 of 30

    Which scenario best demonstrates the unique power of the drawImage method?

    • aExtracting a character from a sprite sheet and scaling it to fit a specific area.
    • bFilling a complex shape defined by a series of path commands.
    • cDrawing a solid blue square at specific canvas coordinates.
    • dCreating a smooth, curved line connecting multiple points.
    Show the answer

    Answer: a · Extracting a character from a sprite sheet and scaling it to fit a specific area.

    The drawImage method is uniquely designed for rendering existing pixel data, such as slicing a portion of a sprite sheet and scaling it. Other options describe creating vector graphics or primitive shapes, for which the canvas API provides dedicated, more efficient methods.

    Read the full bite: Canvas drawImage: Projecting Pixels onto a Canvas

30. Question 30 of 30

    What is the outcome if you mistakenly add implementation logic (e.g., a function body) directly into a TypeScript declaration file (.d.ts)?

    • aThe compiler will ignore the implementation logic, treating the file as if it only contained type declarations.
    • bThe TypeScript compiler will produce a runtime error when the application attempts to use that logic.
    • cThe file will be compiled into a .js file, but without any type-checking applied to the added logic.
    • dTypeScript will automatically move the implementation logic to a new .ts file during compilation.
    Show the answer

    Answer: a · The compiler will ignore the implementation logic, treating the file as if it only contained type declarations.

    The card states that a .d.ts file is strictly for describing types, and any logic written inside will be ignored by the compiler. It does not generate executable JavaScript from these files, nor does it throw an error for ignored content.

    Read the full bite: Declaration Files: How TypeScript Knows Your Library's Shape