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.

Practice

1. Which of the following is a correct description of a relative URL in Node.js?

easy

A. A URL that includes the protocol and domain name.

B. A URL that depends on a base URL to form a full address.

C. A URL that always starts with 'http://' or 'https://'.

D. A URL that cannot be resolved using the URL class.

Solution

1. Step 1: Understand relative URL meaning

   A relative URL does not include the full path and depends on a base URL to form a complete address.

2. Step 2: Compare options

   A URL that depends on a base URL to form a full address. correctly describes this. Options B and C describe absolute URLs. A URL that cannot be resolved using the URL class. is incorrect because Node.js URL class can resolve relative URLs with a base.

3. Final Answer:

   A URL that depends on a base URL to form a full address. -> Option B

4. Quick Check:

   Relative URL = depends on base URL [OK]

Hint: Relative URLs need a base URL to become complete [OK]

Common Mistakes:

• Confusing relative URLs with absolute URLs
• Thinking relative URLs include protocol
• Believing relative URLs cannot be resolved

2. Which of the following is the correct way to create a new URL object for a relative path '/images/photo.jpg' with base 'https://example.com/gallery/' in Node.js?

easy

A. new URL('/images/photo.jpg', 'https://example.com/gallery/')

B. new URL('https://example.com/gallery/' + '/images/photo.jpg')

C. new URL('images/photo.jpg')

D. new URL('https://example.com/gallery/images/photo.jpg')

Solution

1. Step 1: Understand URL constructor usage

   The URL constructor takes two arguments: the path and the base URL. For relative paths, the first argument is the relative path, and the second is the base.

2. Step 2: Check each option

   new URL('/images/photo.jpg', 'https://example.com/gallery/') correctly uses new URL(relativePath, baseURL). new URL('https://example.com/gallery/' + '/images/photo.jpg') concatenates strings but does not use the URL constructor properly. new URL('images/photo.jpg') misses the base URL. new URL('https://example.com/gallery/images/photo.jpg') uses an absolute URL, not relative.

3. Final Answer:

   new URL('/images/photo.jpg', 'https://example.com/gallery/') -> Option A

4. Quick Check:

   URL(relative, base) = correct syntax [OK]

Hint: Use new URL(relativePath, baseURL) for relative URLs [OK]

Common Mistakes:

• Concatenating strings instead of using URL constructor
• Omitting the base URL for relative paths
• Passing absolute URL as first argument when base is given

3. What will be the output of the following Node.js code?

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

medium

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

B. Error: Invalid URL

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

D. https://example.com/folder/image.png

Solution

1. Step 1: Understand relative path resolution

   The relative path '../image.png' means go one folder up from 'https://example.com/folder/' which leads to 'https://example.com/'.

2. Step 2: Resolve the full URL

   Combining base and relative path, the URL class normalizes the path to 'https://example.com/image.png'. https://example.com/image.png matches this.

3. Final Answer:

   https://example.com/image.png -> Option C

4. Quick Check:

   Relative '..' moves up one directory [OK]

Hint: Relative '..' moves up one folder in URL paths [OK]

Common Mistakes:

• Not normalizing '..' in URL paths
• Expecting '../' to stay in the URL string
• Confusing relative and absolute URL outputs

4. Identify the error in this Node.js code snippet that tries to resolve a relative URL:

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

medium

A. Base URL is missing trailing slash, causing incorrect resolution.

B. Relative URL should start with a slash '/' to be valid.

C. URL constructor requires only one argument for relative URLs.

D. No error; code outputs 'https://example.com/path/file.txt' correctly.

Solution

1. Step 1: Check base URL format

   The base URL 'https://example.com/path' lacks a trailing slash, so it is treated as a file, not a folder.

2. Step 2: Understand URL resolution effect

   Appending 'file.txt' to a base treated as file replaces 'path' with 'file.txt', resulting in 'https://example.com/file.txt', not 'https://example.com/path/file.txt'.

3. Final Answer:

   Base URL is missing trailing slash, causing incorrect resolution. -> Option A

4. Quick Check:

   Base URL trailing slash affects relative URL resolution [OK]

Hint: Always add trailing slash to base URL if it's a folder [OK]

Common Mistakes:

• Omitting trailing slash on base URL
• Thinking relative URLs must start with '/'
• Passing wrong number of arguments to URL constructor

5. You want to combine a base URL 'https://example.com/api/v1/' with a relative URL '../../images/pic.jpg' in Node.js. What will be the resolved absolute URL?

hard

A. https://example.com/api/v1/images/pic.jpg

B. https://example.com/api/images/pic.jpg

C. https://example.com/api/v1/../../images/pic.jpg

D. https://example.com/images/pic.jpg

Solution

1. Step 1: Analyze relative path '../../images/pic.jpg'

   The '../../' means go up two folders from 'https://example.com/api/v1/'.

2. Step 2: Move up two levels from base URL

   Starting at 'https://example.com/api/v1/', going up one level is 'https://example.com/api/', and up another is 'https://example.com/'. Then append 'images/pic.jpg'.

3. Final Answer:

   https://example.com/images/pic.jpg -> Option D

4. Quick Check:

   Two '..' moves up two directories [OK]

Hint: Count '..' to move up folders in URL paths [OK]

Common Mistakes:

• Not moving up enough folders for multiple '..'
• Appending relative path without normalization
• Confusing base URL folder levels