Parsing query strings in Node.js - Step-by-Step Execution

Concept Flow - Parsing query strings

Start with URL string

↓

Extract query string part

↓

Split by '&' to get key=value pairs

↓

For each pair: split by '=' to separate key and value

↓

Decode key and value

↓

Store in object as key: value

↓

Return parsed object

This flow shows how a URL's query string is taken apart step-by-step to get keys and values in an object.

Execution Sample

Node.js

const url = 'https://example.com?name=John&age=30';
const queryString = url.split('?')[1];
const pairs = queryString.split('&');
const params = {};
pairs.forEach(pair => {
  const [key, value] = pair.split('=');
  params[decodeURIComponent(key)] = decodeURIComponent(value);
});

This code takes a URL, extracts the query string, splits it into pairs, decodes them, and stores them in an object.

Execution Table

Step	Action	Input	Output/State
1	Start with URL string	https://example.com?name=John&age=30	URL string stored
2	Extract query string	Split by '?'	name=John&age=30
3	Split query string by '&'	name=John&age=30	['name=John', 'age=30']
4	Process first pair	name=John	key='name', value='John'
5	Decode and store first pair	key='name', value='John'	params = { name: 'John' }
6	Process second pair	age=30	key='age', value='30'
7	Decode and store second pair	key='age', value='30'	params = { name: 'John', age: '30' }
8	Return parsed object	params	{ name: 'John', age: '30' }

💡 All key=value pairs processed and stored in params object

Variable Tracker

Variable	Start	After Step 5	After Step 7	Final
url	'https://example.com?name=John&age=30'	'https://example.com?name=John&age=30'	'https://example.com?name=John&age=30'	'https://example.com?name=John&age=30'
queryString	undefined	'name=John&age=30'	'name=John&age=30'	'name=John&age=30'
pairs	undefined	['name=John', 'age=30']	['name=John', 'age=30']	['name=John', 'age=30']
params	{}	{ name: 'John' }	{ name: 'John', age: '30' }	{ name: 'John', age: '30' }
key	undefined	'name'	'age'	undefined
value	undefined	'John'	'30'	undefined

Key Moments - 3 Insights

Why do we split the query string by '&'?

Because each key=value pair in the query string is separated by '&', splitting by '&' isolates each pair for processing (see execution_table step 3).

Why do we use decodeURIComponent on keys and values?

Because query strings can have encoded characters (like spaces as %20), decoding them converts these back to normal characters for correct keys and values (see execution_table steps 5 and 7).

What happens if the URL has no query string?

Splitting by '?' would give undefined or no second part, so the code should check for this to avoid errors. In this example, we assume a query string exists.

Visual Quiz - 3 Questions

Look at the execution_table at step 4, what are the key and value extracted from the first pair?

A key='John', value='name'

B key='age', value='30'

C key='name', value='John'

D key='name', value='age'

💡 Hint

Check the 'Process first pair' row in execution_table

At which step does the params object first get a key-value pair added?

A Step 5

B Step 3

C Step 6

D Step 7

💡 Hint

Look for when params changes from empty to having 'name' key in execution_table

If the URL had no query string, what would happen when splitting by '?'?

A params would have one empty key

B queryString would be undefined or missing

C pairs would be an empty array

D The code would work normally

💡 Hint

Consider what split('?')[1] returns if '?' is not in the URL

Concept Snapshot

Parsing query strings:
- Extract part after '?' from URL
- Split by '&' to get key=value pairs
- Split each pair by '=' to separate key and value
- Decode keys and values
- Store in an object
- Result: easy access to query parameters

Full Transcript

Parsing query strings means taking the part of a URL after the question mark and turning it into an object with keys and values. We start with the full URL string, then split it at the question mark to get the query string. Next, we split that string by the ampersand character to get each key=value pair. For each pair, we split by the equal sign to separate the key and the value. We decode both to handle special characters. Then we store them in an object. This object lets us easily use the parameters in code. The process stops when all pairs are processed. If the URL has no query string, the code needs to handle that case to avoid errors.