Relative vs absolute URL resolution in Node.js - Practice Questions

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of resolving a relative URL against a base URL?

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 = new URL('https://example.com/folder/page.html');
const relative = new URL('../image.png', base);
console.log(relative.href);

A "https://example.com/../image.png"

B "https://example.com/folder/image.png"

C "https://example.com/image.png"

D "https://example.com/folder/page.html/image.png"

💡 Hint

Think about how '..' moves up one folder in a path.

The relative URL '../image.png' moves one directory up from 'folder/', so the resolved URL is 'https://example.com/image.png'.

❓ Predict Output

intermediate

What happens when resolving an absolute URL against a base URL?

What will this Node.js code output?

Node.js

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

A "https://other.com/path"

B "https://example.com/folder/https://other.com/path"

C "https://example.com/https://other.com/path"

D "https://example.com/folder/path"

💡 Hint

Absolute URLs ignore the base URL.

When the URL constructor receives an absolute URL as the first argument, it ignores the base URL and uses the absolute URL as is.

❓ component_behavior

advanced

How does URL resolution handle trailing slashes in base URLs?

Given this code, what will be the output?

Node.js

const { URL } = require('url');
const base1 = new URL('https://example.com/folder/');
const base2 = new URL('https://example.com/folder');
const relative = 'page.html';
console.log(new URL(relative, base1).href);
console.log(new URL(relative, base2).href);

A "https://example.com/page.html" and "https://example.com/folder/page.html"

B "https://example.com/folder/page.html" and "https://example.com/folderpage.html"

C "https://example.com/folder/page.html" and "https://example.com/folder/page.html"

D "https://example.com/folder/page.html" and "https://example.com/page.html"

💡 Hint

Trailing slash means the base is treated as a folder, no trailing slash means it's a file.

When the base URL ends with a slash, the relative URL appends inside that folder. Without the slash, the last part is treated as a file and replaced by the relative URL.

📝 Syntax

advanced

Which option causes a SyntaxError when creating a URL?

Which of these URL constructor calls will cause a SyntaxError in Node.js?

A new URL('http://example.com:invalid/path')

B new URL('https://example.com/path?query=1')

C new URL('http://example.com:80/path')

D new URL('ftp://example.com/resource')

💡 Hint

Ports must be numeric and valid.

Port numbers must be numeric and within valid range. 'invalid' is not a number, so it causes a SyntaxError.

🔧 Debug

expert

Why does this URL resolution produce an unexpected result?

Examine this code snippet and choose the correct explanation for the output.

Node.js

const { URL } = require('url');
const base = new URL('https://example.com/folder/page.html');
const relative = new URL('subfolder/../image.png', base);
console.log(relative.href);

A The URL constructor throws an error because '..' is not allowed in relative URLs.

B The '..' in the relative path moves up one directory, so the final URL is 'https://example.com/folder/image.png'.

C The relative URL is treated as a string and concatenated, resulting in 'https://example.com/folder/page.htmlsubfolder/../image.png'.

D The relative URL is resolved incorrectly because the base URL must end with a slash to handle '..' properly.

💡 Hint

Think about how '..' works in paths and how URL resolution normalizes paths.

The '..' moves up one directory from 'folder/', so 'subfolder/../image.png' resolves to 'folder/image.png'. The URL class normalizes the path automatically.