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...
Read full post
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! πŸ‘βœ¨πŸ’―