DEV Community

Cover image for 19 Practical ES6 Snippets to Solve Common JS Problems πŸš€πŸ’―

19 Practical ES6 Snippets to Solve Common JS Problems πŸš€πŸ’―

Madza on September 15, 2022

In our developer workflow, we often encounter challenging problems that might require just a few lines of code to be solved. In this article, I att...
Collapse
 
mikcat profile image
mikcat

I find easy to use the URL object to manage urls.

const url = new URL("https://example.com/login?user=someguy&page=news");

url.origin
// "https://example.com"
url.host
// "example.com"
url.protocol
// "https:"
url.pathname
// "/login"
url.searchParams.get('user')
// "someguy"
Enter fullscreen mode Exit fullscreen mode

You can get useful localization info from the Intl package. For example:

const {locale, timeZone} = Intl.DateTimeFormat().resolvedOptions();
Enter fullscreen mode Exit fullscreen mode
Collapse
 
madza profile image
Madza

Thanks for the input πŸ‘βœ¨πŸ’―

Collapse
 
urstrulyvishwak profile image
Kurapati Mahesh

Great Article @madza

I want to provide few other ways for each of the above:

1

1.
url.indexOf('?');
41
url.slice(0,41);
> 'http://url.com/page'

2.
url.href.split('?')[0];
> 'http://url.com/page'

// If it is the same page url then we can get using location.
location.origin + location.pathname;
'http://url.com/page'
Enter fullscreen mode Exit fullscreen mode

2.

const isAbsolute = (url) => {
  const link = document.createElement('a');
  link.href = url;
  return link.origin + link.pathname + link.search + link.hash === url;
};
Enter fullscreen mode Exit fullscreen mode

3.

const sampleObj = {};
'http://url.com/page?name=Adam&surname=Smith'.split('?')[1].split('&').forEach(item => {
    const temp = item.split('=');
    sampleObj[temp[0]] = temp[1];
});
Enter fullscreen mode Exit fullscreen mode

8.

crypto.randomUUID();
> '41c43cfa-e5d9-4053-bb10-123357d580d4'
Enter fullscreen mode Exit fullscreen mode
Collapse
 
birowo profile image
birowo

3.

Object.fromEntries('http://url.com/page?name=Adam&surname=Smith'.split('?')[1].split('&').map(x=>x.split('=')))
Enter fullscreen mode Exit fullscreen mode
Collapse
 
madza profile image
Madza

Super neat one liner, thanks πŸ‘πŸ’―

Collapse
 
madza profile image
Madza

Valuable input, thanks a lot πŸ’–πŸ‘πŸ’―

Collapse
 
martygo profile image
Martins Gouveia

Currently, we don't need more JS to add smooth-scroll, only CSS is sufficient.

html {
scroll-behavior: smooth;
}

Article very useful. Thanks for sharing with us.

Collapse
 
tleperou profile image
Thomas LepΓ©rou

Since Safari 15.4, we can finally use CSS -- and its JS API, πŸ™Œ

Collapse
 
madza profile image
Madza

Useful input, thanks for addition πŸ’―πŸ‘

Collapse
 
addin profile image
Akhul Syaifudin

Hello @madza,

I ask permission to rewrite it in my country's language.
Thank you.

Collapse
 
madza profile image
Madza • Edited

Sure, just put reference to this article, include my socials and mention 30 seconds of code in the intro πŸ‘πŸ’―βœ¨

Collapse
 
sarma_akondi_746f338b83b7 profile image
Sarma Akondi

Awesome sharing as always πŸ˜€

Collapse
 
madza profile image
Madza

Thanks a lot πŸ‘πŸ’―βœ¨

Collapse
 
annie profile image
Annie

Hello, I love your article. Can I reprint and translate your article? I will include a link to the article.

Collapse
 
madza profile image
Madza

Sure, just put reference to this article, include my socials and mention 30 seconds of code in the intro πŸ‘πŸ’―βœ¨

Collapse
 
annie profile image
Annie

okay, I will.

Thread Thread
 
madza profile image
Madza

Awesome πŸ‘πŸ’―πŸ’–

Collapse
 
walebee01 profile image
Osho Wale

Great Content

Collapse
 
madza profile image
Madza

Thanks a lot πŸ‘πŸ’―βœ¨

Collapse
 
andrewbaisden profile image
Andrew Baisden

Great list of snippets.

Collapse
 
madza profile image
Madza

Thanks a lot, Andrew πŸ‘πŸ’―βœ¨

Collapse
 
bobbyiliev profile image
Bobby Iliev

Great content as always!

Collapse
 
madza profile image
Madza

Thank you so much, Bobby! πŸ‘βœ¨πŸ’―