Managing URLs - Part 01 🔗
Tags: javascript, webdev, frontend
Published: 2024-05-09 06:22:37

_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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt2dcsh8o841wpgvzhqc.png)



1. **Protocol/Schema** - HTTP, HTTPs, WS
2. **Host** - [*www.example.com*](http://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

```jsx
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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8owrvgm1xb1tnqfuo5me.png)


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

```jsx
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

```jsx
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

```jsx
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

```jsx
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

```jsx
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