ES6 Ghosts

Talk on ES6 features for Node.js meetup Thessaloniki - Mar 2016
https://sirodoht.xyz/es6-talk/

Transcript

1. ES6 GHOSTS / Node.js Meetup Thessaloniki @sirodoht
2. A little bit of history
7. l e t and c o n s t
8. Block scope variables in C i n t m a i n ( v o i d ) { i n t x = 3 ; { i n t y = 5 ; } x = y ; / / e r r o r : u s e o f u n d e c l a r e d i d e n t i f i e r ' y ' }
9. Function scope variables in JS f u n c t i o n f u n c ( ) { { v a r x = 1 ; i f ( x = = = 1 ) { v a r y = 2 ; } c o n s o l e . l o g ( y ) ; / / 2 v a r x = 2 ; / / n o e r r o r , e v e n t h o u g h a l r e a d y d e c l a r e d } } c o n s o l e . l o g ( x ) ; / / R e f e r e n c e E r r o r : x i s n o t d e f i n e d
10. Block scope variables in JS f u n c t i o n f u n c ( ) { { l e t x ; { l e t y = 1 ; } l e t x = " i n n e r " ; / / e r r o r , a l r e a d y d e c l a r e d i n b l o c k c o n s o l e . l o g ( y ) ; / / R e f e r e n c e E r r o r : y i s n o t d e f i n e d } } c o n s o l e . l o g ( x ) ;
11. Immutable variables f u n c t i o n f u n c ( ) { { c o n s t x = " s n e a k y " ; x = " f o o " ; / / T y p e E r r o r : A s s i g n m e n t t o c o n s t a n t v a r i a b l e . } }
12. Only the variable binding is immutable, not the content! c o n s t x = { o n e : 2 , t h r e e : 4 } ; x . f i v e = " s e v e n " ; / / n o p r o b l e m ! x . e i g h t = 9 ; / / s a m e x = { f i v e : " s i x " } ; / / T y p e E r r o r : A s s i g n m e n t t o c o n s t a n t v a r i a b l e .
13. Arrow functions
14. Succinct anonymous functions / / # E S 5 [ 1 , 2 , 3 ] . m a p ( f u n c t i o n ( n ) { r e t u r n n * 2 ; } , t h i s ) ; / / - > [ 2 , 4 , 6 ] / / # E S 6 [ 1 , 2 , 3 ] . m a p ( n = > n * 2 ) ; / / - > [ 2 , 4 , 6 ]
15. More than one parameters [ 1 , 2 , 3 ] . m a p ( ( n , i n d e x ) = > { c o n s t r e s u l t = n * i n d e x ; r e t u r n r e s u l t ; } ) ; / / - > [ 0 , 2 , 6 ]
16. Dynamic scope-ish t h i s f u n c t i o n P e r s o n ( ) { v a r s e l f = t h i s ; s e l f . a g e = 0 ; s e t I n t e r v a l ( f u n c t i o n g r o w U p ( ) { s e l f . a g e + + ; } , 1 0 0 0 ) ; }
17. Lexical scope t h i s f u n c t i o n P e r s o n ( ) { t h i s . a g e = 0 ; s e t I n t e r v a l ( ( ) = > { t h i s . a g e + + ; / / | t h i s | p r o p e r l y r e f e r s t o t h e p e r s o n o b j e c t } , 1 0 0 0 ) ; }
18. c l a s s keyword
19. Pseudo-classical inheritance f u n c t i o n P e r s o n ( n a m e , a g e , g e n d e r ) { t h i s . n a m e = n a m e ; t h i s . a g e = a g e ; t h i s . g e n d e r = g e n d e r ; } P e r s o n . p r o t o t y p e . i n c r e m e n t A g e = f u n c t i o n ( ) { r e t u r n t h i s . a g e + = 1 ; } ;
20. Pseudo-classical inheritance with c l a s s P e r s o n { c o n s t r u c t o r ( n a m e , a g e , g e n d e r ) { t h i s . n a m e = n a m e ; t h i s . a g e = a g e ; t h i s . g e n d e r = g e n d e r ; } i n c r e m e n t A g e ( ) { t h i s . a g e + = 1 ; } }
21. Pseudo-classical inheritance (subclass) f u n c t i o n P e r s o n a l ( n a m e , a g e , g e n d e r , o c c u p a t i o n , h o b b y ) { P e r s o n . c a l l ( t h i s , n a m e , a g e , g e n d e r ) ; t h i s . o c c u p a t i o n = o c c u p a t i o n ; t h i s . h o b b y = h o b b y ; } P e r s o n a l . p r o t o t y p e = O b j e c t . c r e a t e ( P e r s o n . p r o t o t y p e ) ; P e r s o n a l . p r o t o t y p e . c o n s t r u c t o r = P e r s o n a l ; P e r s o n a l . p r o t o t y p e . i n c r e m e n t A g e = f u n c t i o n ( ) { P e r s o n . p r o t o t y p e . i n c r e m e n t A g e . c a l l ( t h i s ) ; t h i s . a g e + = 2 0 ; c o n s o l e . l o g ( t h i s . a g e ) ; } ;
22. Pseudo-classical inheritance (subclass) with c l a s s P e r s o n a l e x t e n d s P e r s o n { c o n s t r u c t o r ( n a m e , a g e , g e n d e r , o c c u p a t i o n , h o b b y ) { s u p e r ( n a m e , a g e , g e n d e r ) ; t h i s . o c c u p a t i o n = o c c u p a t i o n ; t h i s . h o b b y = h o b b y ; } i n c r e m e n t A g e ( ) { s u p e r . i n c r e m e n t A g e ( ) ; t h i s . a g e + = 2 0 ; c o n s o l e . l o g ( t h i s . a g e ) ; } }
23. Destructuring Assignment
24. Using Arrays v a r [ a , b ] = [ 1 , 2 ] ; c o n s o l e . l o g ( a ) ; / / 1 c o n s o l e . l o g ( b ) ; / / 2 v a r f o o = [ " b a r " , " z o o " , " m o o " ] ; v a r [ o n e , t w o , t h r e e ] = f o o ; c o n s o l e . l o g ( o n e ) ; / / " b a r " c o n s o l e . l o g ( t w o ) ; / / " z o o " c o n s o l e . l o g ( t h r e e ) ; / / " m o o "
25. Using the spread operator [ a , b , . . . r e s t ] = [ 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 ( b ) ; / / 2 c o n s o l e . l o g ( r e s t ) ; / / [ 3 , 4 , 5 ]
26. Using Objects v a r { f o o , b a r } = { f o o : ' l o r e m ' , b a r : ' i p s u m ' } ; / / f o o = > l o r e m a n d b a r = > i p s u m ( { a , b } = { a : 1 , b : 2 } ) ; c o n s o l e . l o g ( a ) ; / / 1 c o n s o l e . l o g ( b ) ; / / 2
27. Using functions and omitting arguments f u n c t i o n f ( ) { r e t u r n [ 1 , 2 , 3 ] ; } v a r [ a , , c ] = f ( ) ; c o n s o l e . l o g ( a ) ; / / 1 c o n s o l e . l o g ( c ) ; / / 3
28. Default parameters
29. Handling u n d e f i n e d variables / / E S 5 f u n c t i o n a d d T w o N u m b e r s ( x , y ) { x = x | | 0 ; y = y | | 0 ; r e t u r n x + y ; } / / E S 6 f u n c t i o n a d d T w o N u m b e r s ( x = 0 , y = 0 ) { r e t u r n x + y ; }
30. Named Parameters
31. jQuery o p t i o n s -like behaviour / / E S 5 f u n c t i o n i n i t i a l i z e C a n v a s ( o p t i o n s ) { v a r h e i g h t = o p t i o n s . h e i g h t | | 6 0 0 ; v a r w i d t h = o p t i o n s . w i d t h | | 4 0 0 ; v a r l i n e S t r o k e = o p t i o n s . l i n e S t r o k e | | ' b l a c k ' ; } / / E S 6 f u n c t i o n i n i t i a l i z e C a n v a s ( { h e i g h t = 6 0 0 , w i d t h = 4 0 0 } ) { / / U s e v a r i a b l e s h e i g h t , w i d t h h e r e }
32. Rest parameters
33. Spread operator gives us a real array! / / E S 5 f u n c t i o n l o g A r g u m e n t s ( ) { f o r ( v a r i = 0 ; i < a r g u m e n t s . l e n g t h ; i + + ) { c o n s o l e . l o g ( a r g u m e n t s [ i ] ) ; } } / / E S 6 f u n c t i o n l o g A r g u m e n t s ( . . . a r g s ) { f o r ( l e t a r g o f a r g s ) { c o n s o l e . l o g ( a r g ) ; } }
34. Generators
35. In the simplest form f u n c t i o n * s i l l y G e n e r a t o r ( ) { y i e l d 1 ; y i e l d 2 ; y i e l d 3 ; y i e l d 4 ; } v a r g e n e r a t o r = s i l l y G e n e r a t o r ( ) ; c o n s o l e . l o g ( g e n e r a t o r . n e x t ( ) ) ; / / { v a l u e : 1 , d o n e : f a l s e } c o n s o l e . l o g ( g e n e r a t o r . n e x t ( ) ) ; / / { v a l u e : 2 , d o n e : f a l s e } c o n s o l e . l o g ( g e n e r a t o r . n e x t ( ) ) ; / / { v a l u e : 3 , d o n e : f a l s e } c o n s o l e . l o g ( g e n e r a t o r . n e x t ( ) ) ; / / { v a l u e : 4 , d o n e : f a l s e } c o n s o l e . l o g ( g e n e r a t o r . n e x t ( ) ) ; / / { v a l u e : u n d e f i n e d , d o n e : t r u e }
36. Infinite generator f u n c t i o n * i d M a k e r ( ) { v a r i n d e x = 0 ; w h i l e ( t r u e ) { y i e l d i n d e x + + ; } } v a r g e n = i d M a k e r ( ) ; c o n s o l e . l o g ( g e n . n e x t ( ) . v a l u e ) ; / / 0 c o n s o l e . l o g ( g e n . n e x t ( ) . v a l u e ) ; / / 1 c o n s o l e . l o g ( g e n . n e x t ( ) . v a l u e ) ; / / 2
37. Fibonacci ! f u n c t i o n * f i b o n a c c i ( ) { v a r f n 1 = 0 ; v a r f n 2 = 1 ; w h i l e ( t r u e ) { v a r c u r r e n t = f n 1 ; f n 1 = f n 2 ; f n 2 = c u r r e n t + f n 1 ; v a r r e s e t = y i e l d c u r r e n t ; i f ( r e s e t ) { f n 1 = 0 ; f n 2 = 1 ; } } } v a r s e q u e n c e = f i b o n a c c i ( ) ; c o n s o l e . l o g ( s e q u e n c e . n e x t ( ) . v a l u e ) ; / / 0 c o n s o l e . l o g ( s e q u e n c e . n e x t ( ) . v a l u e ) ; / / 1
38. Fibonacci with destructuring f u n c t i o n * f i b o n a c c i ( ) { l e t [ p r e v , c u r r ] = [ 0 , 1 ] ; w h i l e ( t r u e ) { [ p r e v , c u r r ] = [ c u r r , p r e v + c u r r ] ; l e t r e s e t = y i e l d c u r r ; i f ( r e s e t ) { [ p r e v , c u r r ] = [ 0 , 1 ] ; } } }
39. Fibonacci with destructuring - usage with f o r . . . o f f o r ( l e t n o f f i b o n a c c i ( ) ) { c o n s o l e . l o g ( n ) ; i f ( n > = 1 0 0 0 ) { b r e a k ; } }
40. Spread operator can also run a generator f u n c t i o n * f i b o n a c c i ( n ) { c o n s t i n f i n i t e = ! n & & n ! = = 0 ; l e t c u r r e n t = 0 ; l e t n e x t = 1 ; w h i l e ( i n f i n i t e | | n - - ) { y i e l d c u r r e n t ; [ c u r r e n t , n e x t ] = [ n e x t , c u r r e n t + n e x t ] ; } } l e t [ . . . f i r s t 1 0 ] = f i b o n a c c i ( 1 0 ) ; c o n s o l e . l o g ( f i r s t 1 0 ) ; / / [ 0 , 1 , 1 , 2 , 3 , 5 , 8 , 1 3 , 2 1 , 3 4 ]
41. Koa middleware a p p . u s e ( f u n c t i o n * ( n e x t ) { v a r s t a r t = n e w D a t e ; y i e l d n e x t ; v a r m s = n e w D a t e - s t a r t ; t h i s . s e t ( ' X - R e s p o n s e - T i m e ' , m s + ' m s ' ) ; } ) ;
42. Talked about let and const Arrow func ons class keyword Destructuring Assignment and Spread Operator Default/Name/Rest Parameters Generators
43. There is more! Promises Modules String templates Sets (and WeakSets) Maps (and WeakMaps) Symbols (Iterators) Reflec on
44. Questions
45. Thank you! /sirodoht/es6‐talk