There is a nice trick to skip the empty string returned by the url.pathname.split(‘/’). “url” is a variable with the following, for example:

const url = new URL("https://medium.com/p/bfd60bf42c62/edit"); url; 

Copy and paste the above code snippet into this browser console.

You will find that it logs the below object:

{ hash: "", host: "medium.com", hostname: "medium.com", href: "https://medium.com/p/bfd60bf42c62/edit", origin: "https://medium.com", password: "", pathname: "/p/bfd60bf42c62/edit", port: "", protocol: "https:", search: "", searchParams: URLSearchParams {size: 0}, username: "", } 

Type the below into the console:

url.pathname.split("/"); const [var1, var2, var3] = url.pathname.split("/"); console.log(var1, var2, var3); 

You will see that it is inevitable to get the first element as an empty string in the returned/logged array in the browser.

What is the clean way to skip the empty string when you de-structure it?

Just skip the defining the first item as shown below and you don’t have to worry about first empty string element.

const [, var2, var3] = url.pathname.split("/"); console.log(var2, var3) 

I picked this from Line 26: in create-next-app codebase

Conclusion:

Well, you could still declare a variable when you de-structure it but this affects code readability since you now have a variable that contains empty and you are not sure if you would use that anywhere later.

Get free courses inspired by the best practices used in open source.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github —  https://github.com/ramu-narasinga

My website —  https://ramunarasinga.com

My Youtube channel —  https://www.youtube.com/@ramu-narasinga

Learning platform —  https://thinkthroo.com

Codebase Architecture —  https://app.thinkthroo.com/architecture

Best practices —  https://app.thinkthroo.com/best-practices

Production-grade projects —  https://app.thinkthroo.com/production-grade-projects