[Javascript] Highlights from IO18 Javascript new features

Latest Javascript features, not supported by all broswers, but can use with babel.

 

# try-catch-finally, Promise finally:

async function fetchAndDisplay({url, element}) {
    
    showLoadingSpinner();
    try {
        const response = await fetch(url);
        const text = await response.text();
        element.textContent = text;
    } catch(error) {
         element.textContent = error.message;
    } finally {
        hideLoadingSpinner();
   }
}

function getStarsNumber(username, reponame) {
    startLoadingAnimation();

    return fetch(`https://api.github.com/repos/${username}/${reponame}`)
        .then(res => res.json())
        .then(data => data.stargazers_count)
        .catch(() => `Couldn't get the stars number`)
        .finally(stopLoadingAnimation);
}

 

# Regex:

1. Lookbehind:

// Positive lookbehind:
const partten = /(?<=\$)\d+/u; //looking for any number after  $ 
const res = pattern.exec('$42');
// res[0] === '42'

// Negative lookbehind:
const pattern = /(?>!\$)\d+/u; // looking for any number which is not after $
const res  = pattern.exec('£42');
// res[0] === '42'

 

2. Lookahead:

// Positive lookahead:
const pattern = /\d+(?= dollars)/u; // looking for any number before dollars
const res = pattern.exec('42 dollars');
// res[0] === '42'

// Negative lookahead:
const pattern = /\d+(?! dollars)/u; // looking for any number which is not before dollars
const res = pattern.exec('42 rupees');
// res[0] === '42'

 

3. Named group catch:

const pattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
const res = pattern.exec('2018-05-09');;

// res.group.year === '2018'
// res.group.month === '05'
// res.group.day === '09'

 

4. Find whole words with line break:

using: 's', pretty much you can add 'us' to all regex.

 

# Javascript module:

<link rel = "modulepreload" href="lib.mjs">  <!-- preload module -->
<link rel = "modulepreload" href="main.mjs">
<script type="module" src="main.mjs"></script> <!-- javascript module file-->
<script nomodule src="fallback.js"></script> <!-- fallback to normal js file -->

 

Talk