Building URLs programmatically in Node.js - Step-by-Step Execution

Concept Flow - Building URLs programmatically

Start with base URL string

↓

Create URL object

↓

Set or update URL parts (path, query, hash)

↓

Serialize URL object to string

↓

Use the final URL string

This flow shows how to start with a base URL, build or update parts using the URL object, then get the final URL string.

Execution Sample

Node.js

const base = 'https://example.com';
const url = new URL(base);
url.pathname = '/search';
url.searchParams.set('q', 'nodejs');
console.log(url.toString());

This code builds a URL by starting with a base, adding a path and a query parameter, then prints the full URL.

Execution Table

Step	Action	URL Object State	Output
1	Create URL object with base 'https://example.com'	href: 'https://example.com/'
2	Set pathname to '/search'	href: 'https://example.com/search'
3	Add query parameter 'q=nodejs'	href: 'https://example.com/search?q=nodejs'
4	Call toString() to get full URL string	href unchanged	'https://example.com/search?q=nodejs'
5	End of code execution	final URL string ready

💡 All URL parts set; final URL string produced for use.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
base	'https://example.com'	'https://example.com'	'https://example.com'	'https://example.com'	'https://example.com'
url.href	undefined	'https://example.com/'	'https://example.com/search'	'https://example.com/search?q=nodejs'	'https://example.com/search?q=nodejs'
url.pathname	undefined	'/'	'/search'	'/search'	'/search'
url.searchParams	undefined	empty	empty	contains 'q=nodejs'	contains 'q=nodejs'

Key Moments - 3 Insights

Why does url.href end with a slash after creating the URL object with base 'https://example.com'?

When creating a URL object from a base without a path, Node.js adds a trailing slash '/' as the default pathname. See execution_table step 1 and variable_tracker url.href after step 1.

How does setting url.pathname affect the URL string?

Setting url.pathname replaces the path part of the URL. This changes url.href to include the new path, as shown in execution_table step 2.

What happens when we add a query parameter using url.searchParams.set()?

Adding a query parameter updates the search part of the URL, reflected in url.href with '?q=nodejs' appended, as in execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution table at step 2. What is the value of url.href?

A 'https://example.com/search'

B 'https://example.com/'

C 'https://example.com/search?q=nodejs'

D 'https://example.com'

💡 Hint

Check the 'URL Object State' column for step 2 in the execution_table.

At which step does the URL gain a query parameter?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for when 'q=nodejs' appears in the URL Object State in execution_table.

If we changed url.pathname to '/about', what would url.href be after step 2?

A 'https://example.com/about'

B 'https://example.com/search'

C 'https://example.com/'

D 'https://example.com/about?q=nodejs'

💡 Hint

Refer to how pathname changes url.href in execution_table step 2 and variable_tracker.

Concept Snapshot

Building URLs programmatically in Node.js:
- Use new URL(base) to create a URL object
- Modify parts like pathname and searchParams
- Use url.toString() to get the full URL string
- URL object auto-formats and encodes parts
- Great for safe, dynamic URL construction

Full Transcript

This lesson shows how to build URLs step-by-step in Node.js using the URL class. We start with a base URL string, create a URL object, then update its pathname and query parameters. Each change updates the URL object's href property. Finally, we convert the URL object back to a string for use. This method avoids manual string concatenation and ensures URLs are valid and properly encoded.