ECMAScript 6 In Depth - Part I

Presentation to the Santa Barbara JavaScript Meetup, May 21, 2015

Transcript

1. ECMASCRIPT 6 IN DEPTH
2. ECMAWHAT? ECMAScript is the standardized language Best known implementation is JavaScript ECMAScript 6 is a superset of current version
3. WHAT'S THE BIG DEAL?
4. JavaScript
5. Despite its quirks... JavaScript is the most widely deployed programming language in the world Browser : Server : Database : Automation It's king of the web, no other language even comes close
7. Any application that can be written in JavaScript, will eventually be written in JavaScript. ~Atwood's Law
8. BACKGROUND Current version is ECMAScript 5.1 (2011) Next version is officially ECMAScript 2015 ECMAScript 6 (ES6) mindshare tough to penetrate
9. BACKGROUND ECMAScript 6 is complete Spec is finalized Publication in June 2015 Browsers continually implementing features Fully compliant browser by end of 2015?
10. USING ES6 TODAY Transpile: ES6 -> ES5 ES6 Shims Sourcemaps Module System
11. PART I Block Scoping Arrow Functions Object Literal Syntax Classes Default Parameters "..." Operator Destructring Assigment Template Strings / Tagged Templates Modules
12. BLOCK SCOPING ES < 6 has lexical scoping only ES6 introduces let and const for block scoping Block scoped function declarations
13. l e t f o o = ' b a r ' ; c o n s o l e . l o g ( f o o ) ; / / b a r
14. c o n s o l e . l o g ( f o o ) ; / / R e f e r e n c e E r r o r l e t f o o = ' b a r ' ;
15. v a r f o o = ' b a r ' ; { l e t f o o = ' b a z ' ; c o n s o l e . l o g ( f o o ) ; / / b a z } c o n s o l e . l o g ( f o o ) ; / / b a r
16. c o n s t f o o = ' b a r ' ; c o n s o l e . l o g ( f o o ) / / b a r f o o = ' b a z ' / / T y p e E r r o r
17. c o n s t f o o = [ 1 , 2 , 3 ] ; f o o = [ 4 , 5 ] ; / / T y p e E r r o r f o o . c o n c a t ( [ 4 , 5 ] ) ; c o n s o l e . l o g ( f o o ) ; / / [ 1 , 2 , 3 , 4 , 5 ] const locks assignment only, not value
18. { f o o ( ) ; / / o k f u n c t i o n f o o ( ) { } } f o o ( ) ; / / R e f e r e n c e E r r o r
19. ARROW FUNCTIONS Terse function syntax Lexical "this" binding Inspired by C# and CoffeeScript
20. / / E S 5 f u n c t i o n s q u a r e ( x ) { r e t u r n x * x ; } / / E S 6 l e t s q u a r e = x = > x * x ;
21. / / E S 5 [ 1 , 2 , 3 ] . m a p ( f u n c t i o n ( x ) { r e t u r n x * x ; } / / E S 6 [ 1 , 2 , 3 ] . m a p ( x = > x * x ) ;
22. a r g = > e x p r a r g = > { s t m t 1 ; s t m t 2 ; . . . } ( a r g 1 , a r g 2 , . . . ) = > e x p r ( a r g 1 , a r g 2 , . . . ) = > { s t m t 1 ; s t m t 2 ; . . . }
23. / / E S 5 f u n c t i o n W i d g e t ( ) { v a r t h a t = t h i s ; v a r b = d o c u m e n t . q u e r y S e l e c t o r ( ' # b t n 1 ' ) ; b . a d d E v e n t L i s t e n e r ( ' c l i c k ' , f u n c t i o n ( ) { t h a t . s o m e M e t h o d ( ) ; } ) ; } / / E S 6 f u n c t i o n W i d g e t ( ) { l e t b = d o c u m e n t . q u e r y S e l e c t o r ( ' # b t n 1 ' ) ; b . a d d E v e n t L i s t e n e r ( ' c l i c k ' , ( ) = > { t h i s . s o m e M e t h o d ( ) ; } ) ; }
24. () => {} can be used almost everywhere function() is used, but... Best for short, simple functions, where terseness shines Always function expressions, can't be hoisted Deprecated "arguments" object is not available
25. OBJECT LITERAL SYNTAX ES6 introduces object literal enhancements Property shorthand Compact method syntax Computed properties
26. v a r a = 1 , b = 2 ; / / E S 5 v a r f o o = { a : a , b : b } ; / / E S 6 l e t f o o = { a , b } ;
27. / / E S 5 v a r f o o = { b a r : f u n c t i o n ( x ) { r e t u r n x ; } } / / E S 6 l e t f o o = { b a r ( x ) { r e t u r n x ; } }
28. l e t f o o = { [ ' f o o ' + ' B a r ' ] : f u n c t i o n ( x ) { r e t u r n x + x ; } } f o o . f o o B a r ( 3 ) ; / / 6
29. CLASSES Classes are the most divisive ES6 addition Syntactic sugaring of constructor functions and prototypes
30. / / E S 5 f u n c t i o n F o o ( b a r ) { t h i s . b a r = b a r ; } F o o . p r o t o t y p e . b a z = f u n c t i o n ( ) { } v a r f o o = n e w F o o ( ' b a r ' ) ;
31. / / E S 6 c l a s s F o o { c o n s t r u c t o r ( b a r ) { t h i s . b a r = b a r ; } b a z ( ) { } } l e t f o o = n e w F o o ( ' b a r ' ) ;
32. c l a s s F o o { c o n s t r u c t o r ( b a r ) { t h i s . b a r = b a r ; } s t a t i c b a z ( ) { } } l e t f o o = n e w F o o ( ' b a r ' ) ; F o o . b a z ( ) / / o k f o o . b a z ( ) ; / / u n d e f i n e d
33. c l a s s F o o { c o n s t r u c t o r ( b a r ) { t h i s . b a r = b a r ; } } c l a s s F o o B a r e x t e n d s F o o { c o n s t r u c t o r ( b a r ) { s u p e r ( b a r ) ; } } l e t f o o B a r = n e w F o o B a r ( ' b a z ' ) ; c o n s o l e . l o g ( f o o B a r . b a r ) ; / / b a z f o o B a r i n s t a n c e o f F o o / / t r u e
34. c l a s s F o o e x t e n d s A r r a y { f i r s t ( ) { r e t u r n t h i s [ 0 ] ; } l a s t ( ) { r e t u r n t h i s [ t h i s . l e n g t h - 1 ] ; } } l e t f o o = n e w F o o ( 1 , 2 , 3 ) ; f o o . f i r s t ( ) ; / / 1 f o o . l a s t ( ) ; / / 3 f o o i n s t a n c e o f A r r a y / / t r u e
35. CLASSES - PROS Friendlier to class-based OO developers Standardized vs. various lib/framework implementations Tooling (IDEs, transpilers, type checkers, etc.) Subclassing built-in objects
36. CLASSES - CONS Syntax very different from semantics Constructor-based inheritance Encourages inheritance over composition super()
37. DEFAULT PARAMETERS
38. / / E S 5 f u n c t i o n f o o ( b a r ) { v a r b a r = b a r | | ' b a z ' ; } / / E S 6 f u n c t i o n f o o ( b a r = ' b a z ' ) { }
39. f u n c t i o n f ( { f o o = ' f e e ' , b a r = ' b a z ' } = { } ) { c o n s o l e . l o g ( f o o + ' , ' + b a r ) ; } f ( { f o o : ' f u m ' , b a r : ' b i m ' } ) ; / / f u m , b i m f ( { f o o : ' f u m ' } ) ; / / f u m , b a z f ( ) ; / / f e e , b a z
40. f u n c t i o n f ( a r g , c b = F u n c t i o n . p r o t o t y p e ) { / / d o s o m e t h i n g . . . c b ( a r g ) ; } l e t m y C b = x = > { c o n s o l e . l o g ( x ) ; } ; f ( ' f o o ' , m y C b ) ; / / f o o f ( ' f o o ' ) ; / / n o - o p
41. THE "..." OR "SPREAD" OPERATOR Dual personality: Gathering values ("rest" parameters) Spreading values ("spread" operator)
42. "REST" PARAMETERS
43. / / E S 5 f u n c t i o n f o o ( ) { v a r a r g s = [ ] . s l i c e . c a l l ( a r g u m e n t s ) ; c o n s o l e . l o g ( a r g s . s h i f t ( ) ) ; o k } / / E S 6 f u n c t i o n f o o ( . . . r e s t ) { c o n s o l e . l o g ( r e s t . s h i f t ( ) ) ; o k }
44. f u n c t i o n f ( a r g , . . . r e s t ) { } / / o k f u n c t i o n f ( a r g 1 , a r g 2 , . . . r e s t ) { } / / o k f u n c t i o n f ( . . . r e s t , a r g ) { } / / S y n t a x E r r o r
45. SPREAD OPERATOR
46. l e t a r r 1 = [ 4 , 5 ] ; l e t a r r 2 = [ 1 , 2 , 3 , . . . a r r 1 , 6 ] ; c o n s o l e . l o g ( a r r 2 ) ; / / [ 1 , 2 , 3 , 4 , 5 , 6 ]
47. f u n c t i o n f o o ( a , b , c , d , e , f ) { } l e t a r g s = [ 3 , 4 ] ; f o o ( 1 , 2 , . . . a r g s , 5 , 6 ) ;
48. / / ' a p p l y ' f o r c o n s t r u c t o r s l e t d a t e P a r t s = [ 1 9 9 5 , 1 1 , 1 ] ; n e w D a t e ( . . . d a t e P a r t s ) ; / / F r i D e c 0 1 1 9 9 5
49. DESTRUCTURING ASSIGNMENT Concise syntax for extracting data from arrays and objects
50. / / E S 5 v a r a r r = [ 1 , 2 , 3 ] ; v a r a = a r r [ 0 ] ; v a r b = a r r [ 1 ] ; v a r c = a r r [ 2 ] ; / / E S 6 l e t [ a , b , c ] = [ 1 , 2 , 3 ] ;
51. l e t [ a , , , [ , e ] ] = [ 1 , 2 , 3 , [ 4 , 5 ] ] ; c o n s o l e . l o g ( a ) ; / / 1 c o n s o l e . l o g ( e ) ; / / 5
52. l e t a = 1 , b = 2 ; [ b , a ] = [ a , b ] ; c o n s o l e . l o g ( a ) ; / / 2 c o n s o l e . l o g ( b ) ; / / 1
53. l e t [ a , b , . . . r e s t ] = [ 1 , 2 , 3 , 4 , 5 ] ; c o n s o l e . l o g ( r e s t . l e n g t h ) ; / / 3 c o n s o l e . l o g ( r e s t . s h i f t ( ) ) ; / / 3 c o n s o l e . l o g ( r e s t . s h i f t ( ) ) ; / / 4 c o n s o l e . l o g ( r e s t . s h i f t ( ) ) ; / / 5
54. / / E S 5 v a r o b j = { a : 1 , b : 2 } ; v a r a = o b j . a ; v a r b = o b j . b ; / / E S 6 l e t { a , b } = { a : 1 , b : 2 } ;
55. l e t { b : { c , d } } = { a : 1 , b : { c : 3 , d : 4 } } ; c o n s o l e . l o g ( c ) ; / / 3 c o n s o l e . l o g ( d ) ; / / 4
56. l e t { a : o n e , b : t w o } = { a : 1 , b : 2 } ; c o n s o l e . l o g ( o n e ) ; / / 1 c o n s o l e . l o g ( o n e ) ; / / 2
57. TEMPLATE STRINGS String literals allowing embedded expressions Supports multi-line strings
58. / / E S 5 v a r n a m e = ' D a v e ' ; v a r g r e e t i n g = ' G o o d m o r n i n g ' + n a m e ; / / E S 6 l e t n a m e = ' D a v e ' ; l e t g r e e t i n g = ` G o o d m o r n i n g $ { n a m e } ` ;
59. / / E S 5 v a r a S t r i n g = ' s t r i n g t e x t l i n e \ n ' + ' s t r i n g t e x t l i n e 2 \ n ' ; / / E S 6 l e t a S t r i n g = ` s t r i n g t e x t l i n e 1 s t r i n g t e x t l i n e 2 ` ;
60. TAGGED TEMPLATE STRINGS Modify output of template strings with a function Function takes an array of string literals, and ...rest values
61. f u n c t i o n u p p e r ( s t r s , . . . v a l s ) { r e t u r n s t r s . r e d u c e ( f u n c t i o n ( p , c , i ) { i f ( i > 0 ) { p + = v a l s [ i - 1 ] . t o U p p e r C a s e ( ) ; } r e t u r n p + c ; } , ' ' ) ; } l e t h i m = ' D a v e ' , m e = ' H a l ' ; l e t s t r = u p p e r ` H e l l o $ { h i m } , i t ' s $ { m e } ` ; c o n s o l e . l o g ( s t r ) ; / / H e l l o D A V E , i t ' s H A L
62. f u n c t i o n r a w ( s t r s , . . . v a l s ) { c o n s o l e . l o g ( s t r s ) ; c o n s o l e . l o g ( s t r s . r a w ) ; } r a w ` F o o \ n B a r ` ; / / [ " F o o ↵B a r " ] / / [ " F o o \ n B a r " ] c o n s o l e . l o g ( S t r i n g . r a w ( ' F o o \ n B a r ' ) ) ; / / " F o o \ n B a r "
63. MODULES Standardized module syntax, sync and async Replaces CommonJS, AMD, and UMD CommonJS-like syntax
64. Named Exports / / f o o . j s e x p o r t b a r = ( b a z ) = > b a z ; e x p o r t b a z = ( f u m ) = > f u m ;
65. Default exports (favored) / / f o o . j s l e t b a r = ( b a z ) = > b a z ; l e t b a z = ( f u m ) = > f u m ; e x p o r t d e f a u l t { b a r , b a z } ;
66. Imports / / d e f a u l t e x p o r t s i m p o r t f o o f r o m ' . / f o o ' ; / / n a m e d e x p o r t s i m p o r t { b a r , b a z } f r o m ' . / f o o ' ; / / d e f a u l t + n a m e d e x p o r t s i m p o r t f o o , { b a r , b a z } f r o m ' . / f o o ' ; / / n a m e d e x p o r t s a s o b j e c t i m p o r t * a s f o o f r o m ' . / f o o ' ; / / l o a d m o d u l e b u t d o n ' t i m p o r t i m p o r t ' . / f o o ' ;
67. MODULE LOADER API Define, load, configure modules programmatically Each host environment implements 'System'
68. / / l o a d o n e m o d u l e ( w i t h E S 6 p r o m i s e s ) S y s t e m . i m p o r t ( ' m y M o d u l e ' ) . t h e n ( m y M o d u l e = > { / / u s e m y M o d u l e } ) ; / / l o a d m u l t i p l e m o d u l e s P r o m i s e . a l l ( [ ' m 1 ' , ' m 2 ' , ' m 3 ' ] . m a p ( m = > S y s t e m . i m p o r t ( m ) ) ) . t h e n ( ( [ m 1 , m 2 , m 3 ] ) = > { / / u s e m 1 , m 2 , m 3 } ) ;
69. USING ES6 MODULES TODAY Until loader API is implemented, build layer transpile/transform: Browserify WebPack JSPM/SystemJS
70. RESOURCES - Kyle Simpson - Dr. Axel Rauschmeyer - Nicholas Zakas ECMA-262 6th Edition, The 2015 ECMAScript Language Specification (Final Draft) YDKJS - ES6 & Beyond Using ECMAScript 6 Today Understanding ECMAScript 6 Learn ES6 - Babel Kangax compatibility table ES6 Fiddle
71. QUESTIONS?
72. THANKS! TIM DOHERTY @TimCDoherty timdoherty.net