Practice Questions

When a client (such as a web browser) needs data or a resource, it sends an HTTP request to a server. The server processes the request and sends back an HTTP response containing the requested data (or an error). HTTP (Hypertext Transfer Protocol) is the protocol that defines the format and the rules for these requests and responses, so a client and a server can communicate in the same standard way.

Client ─────────────────── Server
  │                           │
  │  ── HTTP Request ───────▶ │
  │                           │
  │                      Process Request
  │                           │
  │  ◀── HTTP Response ────── │
  │                           │

• GET – Read (retrieve a resource or collection of resources)
• POST – Create (create a new resource)
• PUT – Update (update an existing resource)
• DELETE – Delete (remove a resource)

An HTTP request typically includes a verb (method), a path to a resource, headers, and an optional body. An HTTP response includes a status code, headers, and an optional body.

fetch() returns a Promise. You chain .then() calls to process the response once it resolves. The first .then() typically parses the response body (e.g., as JSON), and the second .then() receives the parsed data.

fetch("/api/items")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

The .catch() at the end handles any errors that occur during the request or parsing.

encodeURIComponent() encodes special characters in a string so it can be safely included as part of a URL. Spaces, ampersands, question marks, and other characters that have special meaning in URLs are replaced with percent-encoded equivalents.

encodeURIComponent("New York"); // "New%20York"

This matters because a raw space in a URL breaks the request. Without encoding, ?name=New York is malformed. With encoding, it becomes ?name=New%20York, which the server can correctly interpret.

function getUser() {
  fetch("https://api.example.com/users?id=1")
    .then((response) => response.json())
    .then((data) => {
      console.log(data.name);
    })
    .catch((err) => console.log(err));
}

The .catch() handles network errors or problems parsing the JSON response. This is the usual shape of code that uses the Fetch API. We fetch, we parse the JSON, we take the data we want out of it, and we handle errors at the end.

event.preventDefault() stops the browser from performing its default action for an event. For a form’s submit event, the default behavior is to reload the page (sending a traditional form submission to the server).

In a single-page application, we want to handle the form data with JavaScript (e.g., to make an API call) without reloading the page. Calling event.preventDefault() prevents the page reload, allowing our JavaScript code to process the form data instead.

function handleSubmit(event) {
  event.preventDefault();
  const input = document.getElementById("search").value.trim();
  // Process input with JavaScript instead of reloading the page
}

document.getElementById("my-form").addEventListener("submit", handleSubmit);

The addEventListener method takes two arguments: the event type (as a string) and the callback function to invoke when that event fires. When the user submits the form (e.g., by pressing Enter), the browser fires the submit event, which triggers handleSubmit.

• innerText sets or gets the plain text content of an element. It does not parse HTML.
• innerHTML sets or gets the HTML content of an element. It parses and renders HTML tags and entities.

Use innerText when you are setting plain text. Use innerHTML when the content includes HTML entities (like ℃ for the Celsius symbol) or markup.

Security concern: Never use innerHTML with user-supplied data. Although modern browsers block <script> tags inserted via innerHTML, other markup can still execute code. For example, <img src="x" onerror="alert('hacked')"> will fire the onerror handler. This is a cross-site scripting (XSS) vulnerability. Always use innerText for user-provided content.

The ?? is the nullish coalescing operator. It returns its right-hand operand when the left-hand operand is null or undefined (but not for other falsy values like 0 or "").

• getStatusText(200) returns "OK". The key 200 exists in the object, so statuses[200] is "OK".
• getStatusText(418) returns "Unknown". The key 418 does not exist, so statuses[418] is undefined, and the ?? operator returns the fallback "Unknown".

This pattern is a convenient way to map codes or keys to readable descriptions, with a default for anything that is not in the object.

function fetchUser(id) {
  return fetch(`/api/users/${id}`).then((response) => response.json());
}

function fetchTeam(teamId) {
  return fetch(`/api/teams/${teamId}`).then((response) => response.json());
}

fetchUser(1)
  .then((user) => fetchTeam(user.teamId))
  .then((team) => console.log(team))
  .catch((err) => console.log(err));

Each function returns the promise chain, so the caller can chain .then() calls one after the other. That matters here because the second fetch depends on data from the first. The .catch() at the end handles errors from either fetch call.

Object lookup:

• Cleaner and more readable when mapping many values
• Easy to add or remove entries without changing control flow
• Separates data from logic
• Can be defined externally or loaded from a configuration

if/else chain:

• More flexible, because each branch can contain different logic, not just return a value
• Better when conditions are ranges or complex expressions (e.g., code >= 200 && code < 300)
• Can become verbose and hard to maintain with many cases

For a simple one-to-one mapping, like codes to descriptions, an object lookup is usually the better choice. If the conditions involve ranges, comparisons, or different logic in each branch, use if/else.