URL class for parsing in Node.js - Step-by-Step Execution

Concept Flow - URL class for parsing

Create URL instance with string

↓

Parse string into parts

↓

Protocol

↓

Access parts via properties

↓

Use parts in code or output

The URL class takes a web address string, breaks it into parts like protocol and hostname, and lets you access each part easily.

Execution Sample

Node.js

const url = new URL('https://example.com:8080/path?query=123');
console.log(url.protocol);
console.log(url.hostname);
console.log(url.port);
console.log(url.pathname);
console.log(url.search);

This code creates a URL object and prints its parts: protocol, hostname, port, path, and query string.

Execution Table

Step	Action	Input/State	Result/Output
1	Create URL instance	'https://example.com:8080/path?query=123'	URL object created with full string
2	Parse protocol	URL string	'https:'
3	Parse hostname	URL string	'example.com'
4	Parse port	URL string	'8080'
5	Parse pathname	URL string	'/path'
6	Parse search params	URL string	'?query=123'
7	Access url.protocol	URL object	'https:'
8	Access url.hostname	URL object	'example.com'
9	Access url.port	URL object	'8080'
10	Access url.pathname	URL object	'/path'
11	Access url.search	URL object	'?query=123'
12	Console output	Accessed parts	Print each part to console

💡 All parts parsed and accessed; execution ends after printing.

Variable Tracker

Variable	Start	After Step 1	After Step 6	Final
url	undefined	URL object with full string	URL object with parsed parts	URL object with accessible properties

Key Moments - 3 Insights

Why does url.protocol include the colon ':' at the end?

The URL class includes the colon as part of the protocol property by design, so 'https:' includes ':' to clearly mark the scheme. See execution_table rows 2 and 7.

What happens if the URL string does not include a port?

The port property will be an empty string ''. This is because the URL class parses only what is present. See execution_table row 4 for port parsing.

Can we change parts like hostname after creating the URL object?

Yes, the URL object properties are writable. Changing them updates the full URL string. This is not shown here but is part of the URL class behavior.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of url.pathname at step 10?

A '/path'

B 'path'

C '/path?query=123'

D '' (empty string)

💡 Hint

Check the 'Action' and 'Result/Output' columns at step 10 for pathname value.

At which step does the URL class parse the search parameters?

A Step 4

B Step 9

C Step 6

D Step 11

💡 Hint

Look for 'Parse search params' in the 'Action' column.

If the URL string was 'http://localhost', what would url.port be after parsing?

A '443'

B '' (empty string)

C '80'

D 'localhost'

💡 Hint

Refer to key_moments about port property when no port is specified.

Concept Snapshot

URL class parses a web address string into parts.
Use: const url = new URL('https://example.com:8080/path?query=123');
Access parts: url.protocol, url.hostname, url.port, url.pathname, url.search
Protocol includes colon ':'
Port is empty string if missing
Properties are writable to update URL

Full Transcript

The URL class in Node.js takes a web address string and breaks it into parts like protocol, hostname, port, pathname, and search parameters. When you create a new URL object with a string, it parses these parts automatically. You can then access each part using properties like url.protocol or url.hostname. For example, the protocol property includes the colon at the end, such as 'https:'. If the URL does not specify a port, the port property will be an empty string. These properties can also be changed to update the URL. This visual trace shows each step of parsing and accessing these parts.

Practice

1. What does the URL class in Node.js primarily help you do?

easy

A. Break down and work with parts of a web address easily

B. Create new web servers

C. Encrypt data sent over the internet

D. Manage file system paths

Solution

1. Step 1: Understand the purpose of the URL class

   The URL class is designed to parse and handle web addresses, making it easy to access parts like hostname, pathname, and query.

2. Step 2: Compare with other options

   Creating servers, encrypting data, and managing file paths are unrelated to URL parsing.

3. Final Answer:

   Break down and work with parts of a web address easily -> Option A

4. Quick Check:

   URL class = parse web address [OK]

Hint: URL class = split web address parts easily [OK]

Common Mistakes:

• Confusing URL class with server creation
• Thinking URL class encrypts data
• Mixing URL class with file system modules

2. Which of the following is the correct way to create a new URL object for the address https://example.com/path?name=abc in Node.js?

easy

A. const url = url.parse('https://example.com/path?name=abc');

B. const url = URL('https://example.com/path?name=abc');

C. const url = new URL('https://example.com/path?name=abc');

D. const url = new URL.parse('https://example.com/path?name=abc');

Solution

1. Step 1: Recall the correct syntax for creating a URL object

   The URL class requires the new keyword and a string argument: new URL(string).

2. Step 2: Check each option

   const url = new URL('https://example.com/path?name=abc'); uses correct syntax. const url = URL('https://example.com/path?name=abc'); misses new. const url = url.parse('https://example.com/path?name=abc'); uses old url.parse method, not the URL class. const url = new URL.parse('https://example.com/path?name=abc'); incorrectly combines new and URL.parse.

3. Final Answer:

   const url = new URL('https://example.com/path?name=abc'); -> Option C

4. Quick Check:

   Use new URL() to create URL objects [OK]

Hint: Always use 'new URL()' to create URL objects [OK]

Common Mistakes:

• Omitting the 'new' keyword
• Using old url.parse() instead of URL class
• Trying to call URL as a function without 'new'

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

const url = new URL('https://example.com:8080/path/page?query=123#section');
console.log(url.hostname);
console.log(url.port);
console.log(url.pathname);
console.log(url.hash);

medium

A. example.com

/path/page
section

B. https://example.com
8080
path/page
section

C. example.com:8080

/path/page
#section

D. example.com
8080
/path/page
#section

Solution

1. Step 1: Understand URL properties

   hostname gives domain without port, port gives port number, pathname gives path starting with '/', hash includes '#' plus fragment.

2. Step 2: Match values from the URL

   Hostname is 'example.com', port is '8080', pathname is '/path/page', hash is '#section'.

3. Final Answer:

   example.com 8080 /path/page #section -> Option D

4. Quick Check:

   URL parts match output A [OK]

Hint: hostname excludes port; hash includes '#' [OK]

Common Mistakes:

• Including port in hostname
• Missing leading slash in pathname
• Omitting '#' in hash

4. Consider this code snippet:

const url = new URL('https://example.com/path');
url.hostname = 'newsite.com';
url.port = 3000;
url.pathname = 'newpath';
console.log(url.href);

What is the output?

medium

A. https://newsite.com:3000//newpath

B. https://newsite.com:3000/newpath

C. https://newsite.com:3000/path

D. https://newsite.com:3000/newpath/

Solution

1. Step 1: Understand pathname assignment

   Setting url.pathname = 'newpath' normalizes the path by adding a leading slash, resulting in '/newpath'.

2. Step 2: Construct the full URL

   Hostname changes to 'newsite.com', port to '3000', pathname becomes '/newpath'. So full URL is 'https://newsite.com:3000/newpath'.

3. Final Answer:

   https://newsite.com:3000/newpath -> Option B

4. Quick Check:

   Pathname setter normalizes with leading '/' [OK]

Hint: pathname setter adds leading '/' automatically [OK]

Common Mistakes:

• Expecting '//newpath' without leading slash
• Assuming pathname auto-adds slash
• Confusing pathname with href

5. You want to change the query parameter id to 42 in this URL: https://shop.com/products?category=books&id=10. Which code correctly updates the URL using the URL class?

hard

A. const url = new URL('https://shop.com/products?category=books&id=10');
url.searchParams.set('id', '42');
console.log(url.href);

B. const url = new URL('https://shop.com/products?category=books&id=10');
url.query.id = 42;
console.log(url.href);

C. const url = new URL('https://shop.com/products?category=books&id=10');
url.search.id = '42';
console.log(url.href);

D. const url = new URL('https://shop.com/products?category=books&id=10');
url.setQuery('id', '42');
console.log(url.href);

Solution

1. Step 1: Identify how to update query parameters

   The URL class provides searchParams with methods like set() to update query parameters safely.

2. Step 2: Check each option's method

   const url = new URL('https://shop.com/products?category=books&id=10'); url.searchParams.set('id', '42'); console.log(url.href); uses searchParams.set(), which is correct. Options A, C, and D use invalid properties or methods not available on URL objects.

3. Final Answer:

   const url = new URL('https://shop.com/products?category=books&id=10'); url.searchParams.set('id', '42'); console.log(url.href); -> Option A

4. Quick Check:

   Use searchParams.set() to update query [OK]

Hint: Use url.searchParams.set() to change query values [OK]

Common Mistakes:

• Trying to set query directly as object
• Using non-existent methods like setQuery
• Assigning query parameters without searchParams