Managing URLs - Part 01 🔗

I'm about to start a series on URLs and their roles in development. 🚀 This is the first part of the series. 📖 Read the full blog, and feel free to comment if you have any quiz. I won't ask for likes; it's up to you. 😊 If I've made any mistakes, please give me feedback. 🙏

URL hu 🤔, URLs are an essential part of web development. Before diving into URL generation, let's talk about the different components of the URL.

1. Protocol/Schema - HTTP, HTTPs, WS
2. Host - www.example.com
   1. Subdomain - www
   2. Domain - example
   3. TLD (Top Level Domain) - .com, .in, .co
3. Path - /forum/questions
   1. actual path from where you are requesting
4. Query String - /?tag=netwrok&order=newest
   1. Parameter - {"key": "value"}
5. Fragment - #about

Okay, we have seen the different components of the URL. Now, let's talk about how to manage or generate URLs efficiently in JavaScript.

Have a look to the following code

new URL("https://www.example.com/fourm/questions/?tag=network&order=newest")

I created a new instance of the URL class. If you paste this into the browser, you will get an output like this:

If you never used this you might be surprised 🤨. We have a lot in URL. Here I am going to unlock 🔓 the power of this URL class.

Add Search Params/Query Params

const myAPI = new URL("https://www.example.com/fourm/questions/?tag=network&order=newest");
myAPI.searchParams.append("limit", 10);
console.log(myAPI.toString())
// https://www.example.com/fourm/questions/?tag=network&order=newest&***limit=10***

Delete Query Params

const myAPI = new URL("https://www.example.com/fourm/questions/?tag=network&order=newest&limit=10");
// before - https://www.example.com/fourm/questions/?tag=network&order=newest&limit=10
******
myAPI.searchParams.delete("order")
// after - https://www.example.com/fourm/questions/?tag=network&limit=10

Update Query Params

const myAPI = new URL("https://www.example.com/fourm/questions/?tag=network&limit=10");
// before - https://www.example.com/fourm/questions/?tag=network&limit=***10***

myAPI.searchParams.set("limit", 20)
// after - https://www.example.com/fourm/questions/?tag=network&limit=***20***

Reading Query Params

const myAPI = new URL("https://www.example.com/fourm/questions/?tag=network&limit=20");
// https://www.example.com/fourm/questions/?tag=network&limit=20

console.log(myAPI.searchParams.get("limit"))
// output - 20

// get all search params
const myAPI = new URL("https://www.example.com/fourm/questions/?tag=network&limit=20");

console.log(myAPI.searchParams.getAll("tag"))
// output - ["network"]

Loop over search params

const myAPI = new URL("https://www.example.com/fourm/questions/?tag=network&limit=20");

myAPI.searchParams.forEach((e, key, parent) => {
  console.log(e, key, parent)
             // ***value, key, parent***
})

// tag network tag=network&limit=20
// limit 20 tag=network&limit=20

Thanks ♥ for reading 📖 so far, I will be back 🔙 in next chapter