ECMAScript 6 In Depth - Part III

Conclusion of the ECMAScript 6 In Depth series, presented to the Santa Barbara JavaScript Meetup on August 18th, 2015.

Transcript

1. ECMASCRIPT 6 IN DEPTH
2. WHO AM I? Tim Doherty Software Architect at
3. PREVIOUSLY IN ECMASCRIPT 6 IN DEPTH
4. ES6 is the first major language update in over 15 years New syntax aimed at reducing boilerplate JavaScript now has "classes" (but not really) Native modules for organizing code Enhancements to Object, Array, and String built-ins New Symbol primitive type Iterators + for...of Generators
5. PART III Enhanced Built-ins Number Math RegEx Data Structures Set/WeakSet Map/WeakMap Reflect API Proxies Tail call optimization Promises
6. NUMBER LITERAL EXTENSIONS Explicit literal forms for octal and binary: var oct = 0o52; // or 0O52 var bin = 0b101010; // or 0B101010
7. NUMBER CONSTANTS Number.EPSILON The smallest interval between 2 representable numbers Number.MAX_SAFE_INTEGER The maximum safe integer in JavaScript (253 - 1) Number.MIN_SAFE_INTEGER The minimum safe integer in JavaScript (-(253 - 1))
8. NUMBER METHODS Number.isNaN() Number.isFinite() Number.isInteger() Number.isSafeInteger() Number.parseInt() Number.parseFloat()
9. MATH Most additions to Math are intended for transpile-to-JS systems, like Emscripten
10. HYPERBOLIC VARIANTS Math.acosh() Math.asinh() Math.atanh() Math.cosh() Math.sinh() Math.tanh()
11. MATH METHODS cbrt clz32 expm1 fround hypot imul log10 log1p log2 sign trunc
12. REGEX ES6 introduces two new flags, and three new data properties
13. REGEX FLAGS /y - sticky flag, anchors search at last index /u - unicode mode, treats surrogate pairs as a single character
14. c o n s t T O K E N _ G = / \ s * ( \ - | [ 0 - 9 ] + ) \ s * / g ; c o n s t T O K E N _ G Y = / \ s * ( \ - | [ 0 - 9 ] + ) \ s * / g y ; f u n c t i o n t o k e n i z e ( T O K E N _ R E G E X , s t r ) { v a r r e s u l t = [ ] , m a t c h ; w h i l e ( m a t c h = T O K E N _ R E G E X . e x e c ( s t r ) ) { r e s u l t . p u s h ( m a t c h [ 1 ] ) ; } r e t u r n r e s u l t ; } t o k e n i z e ( T O K E N _ G , ' 1 - 2 ' ) ; / / [ ' 1 ' , ' - ' , ' 2 ' ] t o k e n i z e ( T O K E N _ G Y , ' 1 - 2 ' ) ; / / [ ' 1 ' , ' - ' , ' 2 ' ] t o k e n i z e ( T O K E N _ G , ' 1 x - 2 ' ) ; / / [ ' 1 ' , ' - ' , ' 2 ' ] t o k e n i z e ( T O K E N _ G Y , ' 1 x - 2 ' ) ; / / [ ' 1 ' ]
15. ' \ u D 8 3 D \ u D C A 9 ' / / U + 1 F 4 A 9 P I L E O F P O O / \ u D 8 3 D / . t e s t ( ' \ u D 8 3 D \ u D C A 9 ' ) / / t r u e / \ u D 8 3 D / u . t e s t ( ' \ u D 8 3 D \ u D C A 9 ' ) / / f a l s e / \ u D 8 3 D \ u D C A 9 / u . t e s t ( ' \ u D 8 3 D \ u D C A 9 ' ) / / t r u e / \ u { 1 F 4 A 9 } / u . t e s t ( ' \ u D 8 3 D \ u D C A 9 ' ) / / t r u e
16. / x y z / i g . f l a g s / / ' g i ' / x y z / y . s t i c k y / / t r u e / x y z / u . u n i c o d e / / t r u e REGEX PROTOTYPE PROPERTIES flags: the flags used when searching sticky: was the sticky flag specified unicode: was the unicode flag specified
17. DATA STRUCTURES ES6 introduces new data structures, Set and Map Garbage collection-friendly variants, WeakSet and WeakMap
18. SET A collection of unique values of any type Similar to array, except values are unique and not indexed
19. l e t s = n e w S e t ( ) ; s . a d d ( 1 ) ; / / S e t { 1 } s . a d d ( 2 ) ; / / S e t { 1 , 2 } s . a d d ( 3 ) ; / / S e t { 1 , 2 , 3 } s . s i z e ; / / 3 s . h a s ( 3 ) ; / / t r u e s . a d d ( 3 ) ; / / S e t { 1 , 2 , 3 } s . d e l e t e ( 3 ) ; / / S e t { 1 , 2 } s . h a s ( 3 ) ; / / f a l s e s . c l e a r ( ) ; / / S e t { } s . s i z e ; / / 0
20. / / o p t i o n a l i t e r a b l e a r g u m e n t l e t s = n e w S e t ( [ 1 , 2 , 3 , 4 ] ) ; s . f o r E a c h ( v a l u e = > { } ) ; f o r ( l e t i t e m o f s ) { } l e t a = [ . . . s ] / / [ 1 , 2 , 3 , 4 ]
21. MAP Simple key/value map, any value can be used as key or value
22. MAP VS. OBJECT Objects have been used as maps historically, but there are key advantages to Map An Object has a prototype, thus default keys in the map Object keys are Strings, but can be any value for a Map Map.size vs. manually tracking an Object's size Map iterates its elements in insertion order
23. l e t m = n e w M a p ( ) ; l e t s t r K e y = ' s t r i n g y ' ; l e t o b j K e y = { } ; l e t f n K e y = ( ) = > { } ; m . s e t ( s t r K e y , ` v a l u e f o r ' s t r i n g y ' ` ) ; m . s e t ( o b j K e y , ' v a l u e f o r o b j K e y ' ) ; m . s e t ( f n K e y , ' v a l u e f o r f n K e y ' ) ; m . s i z e / / 3 m . g e t ( s t r K e y ) ; / / " v a l u e f o r ' s t r i n g y ' " m . g e t ( o b j K e y ) ; / / " v a l u e f o r o b j K e y " m . g e t ( f n K e y ) ; / / " v a l u e f o r f n K e y " m . g e t ( ' s t r i n g y ' ) ; / / " v a l u e f o r ' s t r i n g y ' " m . g e t ( { } ) ; / / u n d e f i n e d m . g e t ( ( ) = > { } ) ; / / u n d e f i n e d
24. l e t m = n e w M a p ( ) ; m . s e t ( N a N , ' N o t a N u m b e r ' ) ; m . g e t ( N a N ) / / " N o t a N u m b e r " l e t o t h e r N a N = N u m b e r ( ' f o o ' ) ; m . g e t ( o t h e r N a N ) / / " N o t a N u m b e r "
25. / / o p t i o n a l i t e r a b l e a r g u m e n t l e t m = n e w M a p ( [ [ ' k 1 ' , ' v 1 ' ] , [ ' k 2 ' , ' v 2 ' ] ] ) ; f o r ( l e t [ k e y , v a l u e ] o f m ) { } f o r ( l e t k e y o f m . k e y s ( ) ) { } f o r ( l e t v a l u e o f m . v a l u e s ( ) ) { } f o r ( l e t [ k e y , v a l u e ] o f m . e n t r i e s ) { } m . f o r E a c h ( ( k e y , v a l u e ) = > { } ) ; [ . . . m ] / / [ [ ' k 1 ' , ' v 1 ' ] , [ ' k 2 ' , ' v 2 ' ] ]
26. WEAKSET A WeakSet is collection of weakly held objects There aren't many use cases, but one is marking objects
27. l e t p r o c e s s e d O b j e c t s = n e w W e a k S e t ( ) ; f u n c t i o n p r o c e s s O b j e c t ( o b j ) { / / . . . d o p r o c e s s i n g p r o c e s s e d O b j e c t s . a d d ( o b j ) ; r e t u r n o b j ; } f u n c t i o n i s P r o c e s s e d ( o b j ) { r e t u r n p r o c e s s e d O b j e c t s . h a s ( o b j ) ; }
28. WEAKMAP Simple key-value map where the key is a weakly-held object Primary use case is mapping values to objects that might disappear later, such as DOM elements
29. l e t w m = n e w W e a k M a p ( ) ; l e t e l = d o c u m e n t . q u e r y S e l e c t o r ( ' . e l e m e n t ' ) ; w m . s e t ( e l , ' e l d a t a ' ) ; w m . h a s ( e l ) ; / / t r u e w m . g e t ( e l ) ; / / " e l d a t a " e l . p a r e n t N o d e . r e m o v e C h i l d ( e l ) ; e l = n u l l / / r e m o v e l o c a l r e f e r e n c e * w m . h a s ( e l ) ; / / f a l s e w m . g e t ( e l ) ; / / u n d e f i n e d
30. c o n s t p r i v a t e D a t a = n e w W e a k M a p ( ) ; c l a s s C l a s s y { c o n s t r u c t o r ( p r o p 1 , p r o p 1 ) { p r i v a t e D a t a . s e t ( t h i s . { p r o p 1 : p r o p 1 , p r o p 2 : p r o p 2 } ) ; } g e t p r o p 1 ( ) { r e t u r n p r i v a t e D a t a . g e t ( t h i s ) . p r o p 1 ; } g e t p r o p 2 ( ) { r e t u r n p r i v a t e D a t a . g e t ( t h i s ) . p r o p 2 ; } }
31. REFLECT API Module-friendly reflection API, mostly migrated from Object Most methods map one-to-one onto Proxy traps, up next
32. REFLECT STATIC METHODS getPrototypeOf() setPrototypeOf() isExtensible() preventExtensions() getOwnPropertyDescriptor() defineProperty() has() get() set() deleteProperty() enumerate() ownKeys() apply() construct()
33. PROXIES Define custom behavior for some operations on an object
34. REFLECTIVE META-PROGRAMMING: Introspection: read-only access to the structure of a program Object.keys() Self-modification: you can change that structure Object.defineProperty() Intercession: redefine the semantics of some operations. ?
35. ENTER THE PROXY OBJECT Proxy adds intercession to JavaScript A proxy instance is created with the following parameters: handler: object whose methods - or "traps" - intercept operations on a target target: object which the proxy virtualizes. Operations without traps fall back to the target
36. USE CASES Validation Tracing Local/remote methods Profiling Data access objects Membranes ...and much more
37. HANDLER METHODS (TRAPS) getPrototypeOf() setPrototypeOf() isExtensible() preventExtensions() getOwnPropertyDescriptor() defineProperty() has() get() set() deleteProperty() enumerate() ownKeys() apply() construct()
38. l e t h a n d l e r = { g e t ( t a r g e t , p r o p e r t y , r e c e i v e r ) { r e t u r n p r o p e r t y i n t a r g e t ? t a r g e t [ p r o p e r t y ] : 4 2 ; } } ; l e t p = n e w P r o x y ( { f o o : ' b a r ' } , h a n d l e r ) ; p . f o o / / ' b a r ' p . m e a n i n g O f L i f e / / 4 2
39. l e t v a l i d a t o r = { s e t ( t a r g e t , p r o p e r t y , v a l u e , r e c e i v e r ) { i f ( p r o p e r t y = = = ' y e a r ' & & ! N u m b e r . i s I n t e g e r ( v a l u e ) ) { t h r o w n e w T y p e E r r o r ( ) ; } R e f l e c t . s e t ( t a r g e t , p r o p e r t y , v a l u e ) ; } } ; l e t c a r = n e w P r o x y ( { } , v a l i d a t o r ) ; c a r . y e a r = 1 9 6 3 / / 1 9 6 3 c a r . y e a r = ' f o o ' / / T y p e E r r o r
40. l e t t r a c e r = { g e t ( t a r g e t , t r a p N a m e , r e c e i v e r ) { r e t u r n f u n c t i o n ( . . . a r g s ) { c o n s o l e . l o g ( t r a p N a m e . t o U p p e r c a s e ( ) + ' ' + a r g s . s l i c e ( 1 ) ) ; r e t u r n R e f l e c t [ t r a p N a m e ] ( . . . a r g s ) ; } } } ; l e t p = n e w P r o x y ( { } , t r a c e r ) ; p . f o o = ' b a r ' / / S E T f o o , ' b a r ' , [ o b j e c t O b j e c t ] p . f o o / / G E T f o o , [ o b j e c t O b j e c t ]
41. l e t m e m b r a n e = { g e t ( t a r g e t , t r a p N a m e , r e c e i v e r ) { r e t u r n f u n c t i o n ( . . . a r g s ) { / / . . . t h r e a t m i t i g a t i o n r e t u r n R e f l e c t [ t r a p N a m e ] ( . . . a r g s ) ; } } } ; l e t r e v = P r o x y . r e v o c a b l e ( j Q u e r y , m e m b r a n e ) ; l e t j q M e m b r a n e = r e v . p r o x y ; j q M e m b r a n e . a j a x ( / * . . . * ) ; / / . . . w h e n d o n e r e v . r e v o k e ( ) j q M e m b r a n e . a j a x ( / * . . . * ) ; / / T y p e E r r o r
42. TAIL CALL OPTIMIZATION Execute functions in tail position without growing the call stack Effectively use recursion as a tool, with stack frame reuse Only works in strict mode
43. PROPER TAIL CALLS Last thing a function does is return the result of a function call
44. " u s e s t r i c t " ; f u n c t i o n b a z ( b i m ) { r e t u r n b i m + 1 ; } f u n c t i o n f o o ( b a r ) { b a r + = 1 ; r e t u r n b a z ( b a r ) ; < - P T C } f u n c t i o n f o o ( b a r ) { b a r + = 1 ; r e t u r n 1 + b a z ( b a r ) ; < - ! P T C }
45. " u s e s t r i c t " ; f u n c t i o n b a z ( b i m ) { r e t u r n b i m + 1 ; / / A } f u n c t i o n f o o ( b a r ) { b a r + = 1 ; r e t u r n b a z ( b a r ) ; / / B } f o o ( 1 ) ; / / C foo = function () {...} bar = function () {...}
46. " u s e s t r i c t " ; f u n c t i o n b a z ( b i m ) { r e t u r n b i m + 1 ; / / A } f u n c t i o n f o o ( b a r ) { b a r + = 1 ; r e t u r n b a z ( b a r ) ; / / B } f o o ( 1 ) ; / / C bar = 2 Line C foo = function () {...} bar = function () {...}
47. " u s e s t r i c t " ; f u n c t i o n b a z ( b i m ) { r e t u r n b i m + 1 ; / / A } f u n c t i o n f o o ( b a r ) { b a r + = 1 ; r e t u r n b a z ( b a r ) ; / / B } f o o ( 1 ) ; / / C bim = 3 Line B bar = 2 Line C foo = function () {...} bar = function () {...}
48. " u s e s t r i c t " ; f u n c t i o n b a z ( b i m ) { r e t u r n b i m + 1 ; / / A } f u n c t i o n f o o ( b a r ) { b a r + = 1 ; r e t u r n b a z ( b a r ) ; / / B } f o o ( 1 ) ; / / C bar = 2 Line C foo = function () {...} bar = function () {...}
49. " u s e s t r i c t " ; f u n c t i o n b a z ( b i m ) { r e t u r n b i m + 1 ; / / A } f u n c t i o n f o o ( b a r ) { b a r + = 1 ; r e t u r n b a z ( b a r ) ; / / B } f o o ( 1 ) ; / / C foo = function () {...} bar = function () {...}
50. " u s e s t r i c t " ; f u n c t i o n b a z ( b i m ) { r e t u r n b i m + 1 ; / / A } / / j u s t p r i o r t o b a z ( ) f u n c t i o n f o o ( b a r ) { b a r + = 1 ; r e t u r n b a z ( b a r ) ; / / B } f o o ( 1 ) ; / / C bim = 3 Line C foo = function () {...} bar = function () {...}
51. f u n c t i o n f a c t o r i a l ( n ) { r e t u r n f a c H e l p e r ( n , 1 ) ; } f u n c t i o n f a c H e l p e r ( n , a c c ) { i f ( n = = 1 ) { r e t u r n a c c ; } e l s e { r e t u r n f a c H e l p e r ( n - 1 , n * a c c ) ; < - P T C } } f a c t o r i a l ( 1 ) ; / / 1 f a c t o r i a l ( 5 ) ; / / 1 2 0
52. f u n c t i o n f o r E a c h ( a r r , c b , s t a r t = 0 ) { i f ( 0 < = s t a r t & & s t a r t < a r r . l e n g t h ) { c a l l b a c k ( a r r [ s t a r t ] , s t a r t , a r r ) ; r e t u r n f o r E a c h ( a r r , c b , s t a r t + 1 ) ; < - P T C } } f o r E a c h ( [ ' a ' , ' b ' ] , ( e l , i ) = > { c o n s o l e . l o g ( ` $ { i } . $ { e l } ` ) } ) ; / / 1 . a / / 2 . b
53. PROMISES ES6 introduces a native Promise object Promise API eases deferred and asynchronous computations Influenced by libraries / frameworks like jQuery, Q, AngularJS
54. PROMISE METHODS Promise.resolve(value) Promise.reject(reason) Promise.all(iterable) Promise.race(iterable)
55. PROMISE.PROTOTYPE METHODS Promise.prototype.then(onResolved, onRejected) Promise.prototype.catch(onRejected)
56. l e t p = n e w P r o m i s e ( ( r e s o l v e , r e j e c t ) = > { r e s o l v e ( ' f o o ' ) ; } ) ; p . t h e n ( v a l u e = > { c o n s o l e . l o g ( v a l u e ) ; / / " f o o " } ) ;
57. f u n c t i o n a s y n c F u n c 1 ( ) { r e t u r n n e w P r o m i s e ( ( r e s o l v e , r e j e c t ) = > { / / . . . } ) ; } a s y c F u n c 1 ( ) . t h e n ( a s y n c F u n c 2 ) . t h e n ( a s y n c F u n c 3 ) . t h e n ( a s y n c F u n c 4 ) . t h e n ( a s y n c F u n c 5 ) . c a t c h ( ( r e a s o n ) = > { . . . } ) ;
58. f u n c t i o n h t t p G e t ( u r l ) { r e t u r n n e w P r o m i s e ( ( r e s o l v e , r e j e c t ) = > { v a r r e q u e s t = n e w X M L H t t p R e q u e s t ( ) ; r e q u e s t . o n r e a d y s t a t e c h a n g e = ( ) = > { i f ( t h i s . s t a t u s = = = 2 0 0 ) { r e s o l v e ( t h i s . r e s p o n s e ) ; } e l s e { r e j e c t ( n e w E r r o r ( t h i s . s t a t u s T e x t ) ) ; } } r e q u e s t . o n e r r o r = ( ) = > { r e j e c t ( n e w E r r o r ( t h i s . s t a t u s T e x t ) ) ; } ; r e q u e s t . o p e n ( ' G E T ' , u r l ) ; r e q u e s t . s e n d ( ) ; } ) ; }
59. h t t p G e t ( ' h t t p : / / s o m e s i t e . c o m ' ) . t h e n ( v a l u e = > { / / s u c c e s s } , r e a s o n = > { / / e r r o r } ) ;
60. l e t p r o m i s e s = [ ' h t t p : / / s o m e s i t e . c o m / p a t h 1 ' , ' h t t p : / / s o m e s i t e . c o m / p a t h 2 ] . m a p ( h t t p G e t ) ; P r o m i s e . a l l ( p r o m i s e s ) . t h e n ( v a l u e s = > { v a l u e s . f o r E a c h ( v a l u e = > { / / d o s o m e t h i n g o n s u c c e s s } ) ; } ) . c a t c h ( r e a s o n = > { / / g e t s f i r s t r e j e c t i o n ) ;
61. f u n c t i o n t i m e o u t ( m s ) { r e t u r n n e w P r o m i s e ( ( r e s o l v e , r e j e c t ) = > { s e t T i m e o u t ( r e s o l v e , m s ) ; } ) ; } P r o m i s e . r a c e ( [ h t t p G e t ( ' h t t p : / / s o m e s i t e . c o m ' ) , t i m e o u t ( 5 0 0 0 ) . t h e n ( ( ) = > { t h r o w n e w E r r o r ( ' T i m e d o u t ' ) } ) ] ) . t h e n ( v a l u e = > { . . . } ) . c a t c h ( r e a s o n = > { . . . } ) ;
62. PROMISES WITH ASYNC GENERATORS
63. / / f r o m p a r t I I f u n c t i o n r e q ( u r l ) { d o A j a x ( u r l , f u n c t i o n ( r e s p o n s e ) { i t . n e x t ( r e s p o n s e ) ; } ) ; } f u n c t i o n * a s y n c ( ) { l e t r 1 = y i e l d r e q ( ' / r e q 1 ' ) ; l e t r 2 = y i e l d r e q ( ` / r e q 2 ? i d = $ { r 1 . i d } ` ) ; c o n s o l e . l o g ( ` r 2 : $ { r 2 } ` ) ; } v a r i t = a s y n c ( ) ; i t . n e x t ( ) ; / / k i c k i t o f f . . . w e c a n d o b e t t e r , w i t h p r o m i s e s
64. f u n c t i o n s p a w n G e n e r a t o r ( g ) { v a r i t = g ( ) , r e t ; ( f u n c t i o n i t e r a t e ( v a l ) { r e t = i t . n e x t ( v a l ) ; i f ( ! r e t . d o n e ) { i f ( ' t h e n ' i n r e t . v a l u e ) { r e t . v a l u e . t h e n ( i t e r a t e ) ; } e l s e { s e t T i m e o u t ( ( ) = > { i t e r a t e ( r e t . v a l u e ) ; } , 0 ) ; } } } ) ( ) ; }
65. f u n c t i o n * a s y n c ( ) { / / u s e h t t p G e t , w h i c h r e t u r n s a p r o m i s e l e t r 1 = y i e l d h t t p G e t ( ' / r e q 1 ' ) ; l e t r 2 = y i e l d h t t p G e t ( ` / r e q 2 ? i d = $ { r 1 . i d } ` ) ; c o n s o l e . l o g ( ` r 2 : $ { r 2 } ` ) ; } s p a w n G e n e r a t o r ( a s y n c ) ;
66. WRAPPING UP
67. ECMAScript 6 consists of three main types of updates New syntax New ways to achieve existing functionality Enhanced standard library Additional functionality for built-in objects Entirely new features Some of these, like TCO and Proxy, can't be transpiled
68. ECMAScript 6 is now the language standard Browsers are continually implementing features Writing/transpiling ES6 now, will help push browser vendors
69. WHAT'S NEXT EcmaScript 2016 (ES7) async / await Object.observe() Object rest/spread properties Array comprehensions and more...
71. GO FORTH AND WRITE ES6!
72. RESOURCES - Kyle Simpson - Dr. Axel Rauschmeyer - Nicholas Zakas ECMAScript® 2015 Language Specification YDKJS - ES6 & Beyond Exploring ES6 Understanding ECMAScript 6 Learn ES6 - Babel Kangax compatibility table ES6 Fiddle
73. THANKS! TIM DOHERTY @TimCDoherty timdoherty.net