If you’ve been a developer for some time you will have undoubtedly worked with URLs before. It’s funny and frustrating at the same time how such a simple thing as URL manipulation can become so messy and prone to errors.

In this article, I want to take a deep dive into the JavaScript URL object. This object takes away most headaches from dealing with URLs and helps us write cleaner and better code.

Creating an URL Object

You create an URL Object with the URL constructor method. You can either pass a full URL to the constructor or pass a path with an optional base URL as the second parameter.

	// Pass a full URL
	const url = new URL('https://medium.com/@WesleySmits');
	// Pass a path with the base URL as the second parameter
	const url2 = new URL('@WesleySmits', 'https://medium.com/');

view raw construct-url.js hosted with ❤ by GitHub

You can further construct the URL through its public properties.

	url.hash = 'test'; // 'https://medium.com/@WesleySmits#test'
	url.host = 'google.com'; // 'https://google.com/@WesleySmits#test'
	url.pathname = '@RandomUser'; 'https://google.com/@RandomUser#test';
	url.searchParams.set('key', 'value'); // 'https://google.com/@RandomUser?key=value#test'

view raw construct-url-properties.js hosted with ❤ by GitHub

Note that URLs are encoded according to the rules found in RFC 3986. For example:

url.hash = 'spécial'; // 'https://google.com/@RandomUser?key=value#sp%C3%A9cial'

view raw url-object-encoding.js hosted with ❤ by GitHub

Reading Information From The URL

You can use the same properties to retrieve information from a URL.

	const url = new URL('https://medium.com/@WesleySmits?foo=bar#test');
	console.log(url.hash); // '#test'
	console.log(url.search); // '?foo=bar'
	console.log(url.searchParams.get('foo')); // 'bar'

view raw url-object-reading.js hosted with ❤ by GitHub

Use Case

Let’s create a simple method that constructs a URL based on a base URL and an array of query params. We will do this in two ways, first the old-fashioned way and secondly with the URL object.

	const baseUrl = 'https://medium.com';
	const params = [
	{
	key: 'category',
	value: 'programming'
	},
	{
	key: 'subcategory',
	value: 'front-end'
	}
	];
	function oldWay(baseUrl, params) {
	const paramString = params.reduce((prev, current, index) => {
	const prefix = index === 0 ? '' : '&';
	return prev + `${prefix}${current.key}=${current.value}`;
	}, "?");
	return baseUrl + paramString;
	}
	function newWay(baseUrl, params) {
	const url = new URL(baseUrl);
	for (param of params) {
	url.searchParams.set(param.key, param.value);
	}
	return url.href;
	}

view raw compare.js hosted with ❤ by GitHub

Aside from the second function being much more readable, there are several benefits to the second approach.

• We do not have to think about the ‘?’ and ‘&’ characters.
• We do not have to manually build the string.
• The params are encoded automatically, is someone injects a param with a space or special character the code does not break.

Additional Resources

• MDN documentation: URL Object

Conclusion

The URL object is a very useful addition that makes dealing with URLs less error-prone and easier at the same time.

Thanks for reading. If you have thoughts on this, be sure to leave a comment!

If you like my content and want to support my efforts, consider becoming a Medium subscriber through my affiliate link. It will cost you nothing extra, but Medium will give parts of the proceeds to me for referring you.

And if you want, you can connect with me on LinkedIn or Twitter!