Telerik DevRel
Developer Relations team @ Telerik!
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
-
list of key-value pairs to object
-
Opposite of
-
dr.axel _underscore magic
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
ES2019 Features: What Even Are They?
By Telerik DevRel
ES2019 Features: What Even Are They?
Thankfully, every year ECMAScript gives us new shinies to advance how we code JavaScript. I’ve found myself digging into features & proposals ever since my curiosity of ES2017’s `SharedArrayBuffer` took me down a fascinating rabbit hole. Let’s delve into some of the features & proposals we get to look forward to in 2019.
