Building URLs programmatically in Node.js - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this URL construction code?

Consider the following Node.js code using the URL class. What will be logged to the console?

Node.js

const { URL } = require('url');
const base = 'https://example.com/path';
const url = new URL('/subpath?query=123', base);
console.log(url.href);

A https://example.com/path/subpath?query=123

B https://example.com/subpath?query=123

C https://example.com/path?query=123

D https://example.com/path/subpath

💡 Hint

Remember how the URL constructor resolves relative paths against the base URL.

When the second argument to the URL constructor starts with a slash, it replaces the path of the base URL entirely. So '/subpath' replaces '/path', resulting in 'https://example.com/subpath?query=123'.

❓ component_behavior

intermediate

How does URLSearchParams handle multiple values for the same key?

Given the following code, what will be the output of the console.log statement?

Node.js

const params = new URLSearchParams();
params.append('color', 'red');
params.append('color', 'blue');
console.log(params.toString());

A color=red,blue

B color=blue

C color=red

D color=red&color=blue

💡 Hint

URLSearchParams allows multiple values for the same key by appending them.

Appending multiple values for the same key results in repeated key-value pairs in the query string, separated by '&'.

📝 Syntax

advanced

Which option correctly creates a URL with a dynamic query parameter?

You want to create a URL 'https://api.example.com/data' with a query parameter 'id' set to a variable value. Which code snippet correctly does this?

A

const url = new URL('https://api.example.com/data');
url.searchParams.set('id', id);
console.log(url.href);

B

const url = new URL('https://api.example.com/data?id=' + id);
console.log(url.href);

C

const url = new URL('https://api.example.com/data');
url.query.id = id;
console.log(url.href);

D

const url = new URL('https://api.example.com/data');
url.search.id = id;
console.log(url.href);

💡 Hint

Use the URLSearchParams API to set query parameters dynamically.

Option A uses the URL class and its searchParams property correctly to set the query parameter. Option A concatenates strings but does not encode properly. Options A and D use invalid properties.

🔧 Debug

advanced

Why does this URL constructor code throw an error?

Examine the code below. Why does it throw a TypeError?

Node.js

const { URL } = require('url');
const base = 'https://example.com';
const url = new URL('path', base);
console.log(url.href);

A Because the base URL must be an instance of URL, not a string.

B Because the base URL is missing a trailing slash, so relative paths are invalid.

C Because 'path' is a relative path without a leading slash, it cannot be resolved against the base string.

D Because the URL constructor requires the first argument to be an absolute URL string.

💡 Hint

Check how relative paths without leading slashes are resolved against base URLs.

The URL constructor expects relative paths to start with '/' or be absolute URLs. 'path' without a leading slash is treated as a relative path to the current directory, which is invalid here and causes a TypeError.

🧠 Conceptual

expert

What is the effect of setting url.hash in a URL object?

Given the code below, what will be the value of url.href after setting url.hash = '#section2'?

Node.js

const { URL } = require('url');
const url = new URL('https://example.com/page?query=1');
url.hash = '#section2';
console.log(url.href);

A https://example.com/page?query=1#section2

B https://example.com/page#section2?query=1

C https://example.com/page?query=1

D https://example.com/page#section2

💡 Hint

The hash part of a URL comes after the query string and starts with '#'.

Setting url.hash adds or replaces the fragment identifier at the end of the URL, after the query string.