ES2019 FEATURES

what even are they?

TARA Z. MANICSIC

our agenda:

@tzmanics | #FrontZurich

  • itty bitty intro

  • MINOR FEATURES

  • MAJOR FEATURES

  • TEENY TINY ouTRO

tara z. manicsic:

  • developer Experience | Netlify

  • google developer expert

  • CO-STARTER OF CINCY NODESCHOOL

  • mother of toshmagosh

@tzmanics

& NIKO

our agenda:

  • itty bitty intro

  • MINOR FEATURES

  • MAJOR FEATURES

  • TEENY TINY ouTRO

ITTY BITTY INTRO

@tzmanics | #FrontZurich

origin story:

  • ECMA INTErnational

  • ECMASCRipt

@tzmanics | #FrontZurich

PITFALLS & Weakness:

  • es4: abandoned

  • es6years

@tzmanics | #FrontZurich

FROM THE ASHES:

  • tc39: we're all fine

  • small packages

@tzmanics | #FrontZurich

proposal process:

  • stage 0: strawman

  • STAGE 1: proposal

  • STAGE 2: draft

  • STAGE 3: candidate

  • STAGE 4: finished

@tzmanics | #FrontZurich

our agenda:

  • itty bitty intro

  • MINOR FEATURES

  • MAJOR FEATURES

  • TEENY TINY ouTRO

MINOR FEATURES

@tzmanics | #FrontZurich

String.prototype.{trimStart,trimEnd}

Sebastian Markbåge

  • akin to

  • New alias for

  • what is whitespace?

.trim
.trimLeft
let tooMuchSpace = '    I need space.    ';
//"    I need space.    "

console.log(JSON.stringify(tooMuchSpace.trimEnd()));
// "    I need space."

console.log(JSON.stringify(tooMuchSpace.trimStart()));
// "I need space.    "

console.log(JSON.stringify(tooMuchSpace.trim()));
// "I need space."

compatability

  • 👍CHROME

  • 👍fIrefox

  • 👍Safari

  • 👎EDGE

  • 👍Node 10+

  • 👍iOS

Symbol.prototype.description

Michael Ficarra

  • string parameter

  • no more converting

  • this is the getter

let mySymbol = Symbol('#FrontZurich is great');

console.log(mySymbol);
// Symbol(#FrontZurich is great)

console.log(mySymbol.description);
// #FrontZurich is great

compatability

  • 👍CHROME

  • 👍fIrefox

  • 👍Safari

  • 👎EDGE

  • 👍Node 10+

  • 👍iOS

optional catch binding

Michael Ficarra

  • NO PARAM? NO PROBLEM!

  • the most Talked about?

try {
  throw new Error('I know that already');
} catch (e) {
  logMyErrors(e);
}

// w optional catch binding

try {
  throw new Error('I know that already');
} catch {
}

compatability

compatability

  • 👍CHROME

  • 👍fIrefox

  • 👍Safari

  • 👎EDGE

  • 👍Node 10+

  • 👍iOS

Array.prototype.sort()

required to be stable

Mathias Bynens

  • ecmascript spec

  • what is stable?

  • cut to the quicksort

let sortA = [
  {'name': 'a', 'age': 2 },
  {'name': 'a', 'age': 1 },
  {'name': 'c', 'age': 1 },
  {'name': 'a', 'age': 3 },
  {'name': 'b', 'age': 1 }
];

sorte.sort((a,b) => a.age - b.age);
// [
//   {name: "a", age: 1}
//   {name: "c", age: 1}
//   {name: "b", age: 1}
//   {name: "a", age: 2}
//   {name: "a", age: 3}
// ]

our agenda:

  • itty bitty intro

  • MINOR FEATURES

  • MAJOR FEATURES

  • TEENY TINY ouTRO

MajOR FEATURES

@tzmanics | #FrontZurich

Array.prototype.{flat,flatMap}

Michael Ficarra, Brian Terlson & Mathias Bynens

  • recursively concats

  • basically

  • but there's more to it

  • #smooshgate

.map.flat
let nested = [1, 2, [3, 4, [5, 6]], 7];
// (4) [1, 2, Array(3), 7]

nested.flat();
// (6) [1, 2, 3, 4, Array(2), 7]

nested.flat(2);
// (7) [1, 2, 3, 4, 5, 6, 7]
let arr = [1, 2, 3, 4];

arr.map(x => [x * x]);
// [[1], [4], [9], [16]]

arr.flatMap(x => [x * x]);
// [1, 4, 9, 16]

compatability

compatability

  • 👍CHROME

  • 👍fIrefox

  • 👍Safari

  • 👎EDGE

  • 👍Node 11+

  • 👍iOS

Object.fromEntries

Darien Maillet Valentine

​​

Object.entries

2ality.com

let obj = {
    key1: 'value 1',
    key2: 'value 2',
    key3: true
};

let entries = Object.entries(obj);

// (3) [Array(2), Array(2), Array(2)]
// 0: (2) ["key1", "value 1"]
// 1: (2) ["key2", "value 2"]
// 2: (2) ["key3", true]

let fromEntries = Object.fromEntries(entries);


//{key1: "value 1", key2: "value 2", key3: true}

compatability

compatability

  • 👍CHROME

  • 👍fIrefox

  • 👍Safari

  • 👎EDGE

  • 👍Node 12

  • 👍iOS

Well-formed

Richard Gibson

JSON.stringify

Richard Gibson

Michael Ficarra

Function.prototype.toString

JSON superset

revision

the other ones:

our agenda:

  • itty bitty intro

  • MINOR FEATURES

  • MAJOR FEATURES

  • TEENY TINY ouTRO

teeny tiny outro

@tzmanics | #FrontZurich

@tzmanics | #FrontZurich

@tzmanics | #FrontZurich

@tzmanics | #FrontZurich

💛

Thank you, front conference!

💛

@tzmanics | #FrontZurich

deck

By Tara Z. Manicsic

Made with Slides.com

deck

  • 1,241

More from Tara Z. Manicsic