New features in JS from I/O19

whats-new-in-js-io19.md

Whats's new in JS

Array {flat, flatMap}

//Flat one level
const arr = [1, [2, [3]]]
arr.flat(); // <- (3) [1, 2, 3]

//Flatten recursively until the array contains no more nested arrays:
arr.flat(Infinity)
console.log()

const duplicate = (x) => [x, x]
const arr2 = [2, 3, 4]
arr2.map(duplicate)
// -> [[2, 2], [3, 3], [4, 4]]

arr2.map(duplicate).flat()
// -> [2, 2, 3, 3, 4, 4]

arr2.flatMap(duplicate)
// -> [2, 2, 3, 3, 4, 4]

Object.fromEntries

const object = { x: 42, y: 50 }
const entries = Object.entries(object)
console.log('entries', entries) 
// -> [Array(2), Array(2)] -> [["x", 42], ["y", 50]]

for (const [key, value] of entries)
    console.log(`The value of ${key} is ${value}`)

const result = Object.fromEntries(entries)
console.log('result', result) 
// -> {x: 42, y: 50}


const obj = { x: 42, y: 50, abs: 9001 }
const res = Object.fromEntries(
    Object.entries(obj)
        .filter(([key, value]) => key.length === 1)    // -> {x: 42, y: 50}
        .sort((a, b) => a[1] - b[1])
        .map(([key, value]) => [key, value * 2])      // -> {x: 84, y: 100}
)

Map

const object = { language: 'JS', coolness: 9001 }

//conver Object to Map
const map = new Map(Object.entries(object))

//Conver the map back into an object
const objectCopy = Object.fromEntries(map)

console.log('map', map)
console.log('objectCopy', objectCopy)

globalThis

//Old way check gloabl object
//but doesn't modules in all environment, standalone JS shell, strict mode functions
const getGlobalThis = () => {
    if (typeof self !== 'undefined') return self;       // 
    if (typeof window !== 'undefined') return self;     // in Browsers
    if (typeof global !== 'undefined') return self;     // in Node
    if (typeof this !== 'undefined') return self;       //
    throw new Error('Unable to locate global object')
}
var theGlobalThis = getGlobalThis();

// instead 
const theGlobalThis = globalThis;
console.log(theGlobalThis)

Intl.RelativeTimeFormat

const rtf = new Intl.RelativeTimeFormat('ru', { numeric: 'auto' })

rtf.format(-1, 'day')
console.log(rtf.format(-1, 'day'))

rtf.format(-0, 'day')
console.log(rtf.format(-0, 'day'))

rtf.format(1, 'day')
console.log(rtf.format(1, 'day'))

rtf.format(-1, 'week')
console.log(rtf.format(-1, 'week'))

rtf.format(0, 'week')
console.log(rtf.format(0, 'week'))

rtf.format(1, 'week')
console.log(rtf.format(1, 'week'))

Intl.ListFormat

const lfEnglish = new Intl.ListFormat('en')
lfEnglish.format(['Ada', 'Grace'])
lfEnglish.format(['Ada', 'Grace', 'Lilia'])

const lfEnglishD = new Intl.ListFormat('en', { type: 'disjunction' })
lfEnglishD.format(['Ada', 'Grace'])
lfEnglishD.format(['Ada', 'Grace', 'Lilia'])

console.log(lfEnglish.format(['Ada', 'Grace', 'Lilia'])) 
// -> Ada, Grace, and Lilia
console.log(lfEnglishD.format(['Ada', 'Grace', 'Lilia'])) 
// -> Ada, Grace, or Lilia

// #8 - Intl.DateTimeFormat#formatRange

const start = new Date(2012)

const end = new Date(2020)

const fmt = new Intl.DateTimeFormat('en', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
})

const output = fmt.formatRange(start, end)
console.log(output)

WeakRef

PROBLEM - WeakMap & WeakSet - only way weakly reference the object add object to WeakMap or WeakSet doesnt prevent it being garbage collected.

function getImage(name) {
    //no need perform same operation for same name
    //but Map hold on their keys & values strongly
    //image name & data can never be garbage collected
    //it cause steady memory usage and memory leak
    if (cache.has(name)) return cache.get(name)

    const image = performExpensiveOperation(name)
    cache.set(name, image)
    return image
}

SOLUTION

const cache = new Map()

function getImageCache(name) {
    let ref = cache.get(name)
    if (ref !== undefined) {
        const deref = ref.deref()
        if (deref !== undefined) return deref
    }
    const image = performExpensiveOperation(name)
    ref = new WeakRef(image)
    cache.set(name, ref)
    finalizationGroup.register(image, name)
    return image
}