Gist for "Upcoming ESNext features - Part 2"

bind-operator-explainer.js

::instance.method
// returns a "method" function, bound by context to the "instance"
// so inside "method" the "this" will point to "instance"

variable::method(arg1, arg2, ...)
// runs the "method" function with "variable" as context, and optional arguments
// so inside "method" the "this" will point to "variable"

bind-operator.js

// pass in `this` to a function
const elements = document.querySelectorAll("div")

const filterCollectionByClass = function (classname) {
  return Array.from(this).filter(item => item.className.indexOf(classname) >= 0)
}

// current solution
filterCollectionByClass.call(elements, 'some-classname')
// run "filterCollectionByClass" with the "elements" collection as "this"

// using the Bind Operator
elements::filterCollectionByClass('some-classname')

// use `console.log` as a function, bound to `console`
// current solution
[ 1,2,3,4,5 ].forEach(console.log.bind(console))

// using the Bind Operator
[ 1,2,3,4,5 ].forEach(::console.log)

calculate-imports.js

// reaching a module, based on the visitor's state
const text = await import(`languages/${userLang}/module.js`)


// code splitting
import { criticalPart } from 'critical-components'; // critical stuff loads sync
await criticalPart(); // do render
const lazy = await import('lazy-components'); // load the rest async


// debugging, or import decision based on server environment
if (process.env.NODE_ENV !== 'production') {
  await import('framework-debugger')
}

IIAFE.js

// IIF
(() => {  /* code  */  })();

// IIAF
(async function () {
  /* await code */
})()

optional-chain-problem.js

const homeworld = person.homeworld.name || 'unknown'
// Uncaught TypeError: Cannot read property 'name' of undefined

const homeworld = person.homeworld && person.homeworld.name || 'unknown'

optional-chaining-explainer.js

obj?.prop       // optional static property access
obj?.[expr]     // optional dynamic property access
func?.(...args) // optional function or method call

optional-chaining.js

const homeworld = person.homeworld?.name || 'unknown'

tla-dynamic-import.js

// static import
import foo from 'foo'

// dynamic import, returns a promise, can be awaited
const bar = await import('bar')

// computed dynamic import
const lang = 'en_us'
const text = await import(`languages/${lang}/text.js`)