Upgrade to Pro — share decks privately, control downloads, hide ads and more …

enterjs 2014 : ECMAScript 6 – the whole thruth

enterjs 2014 : ECMAScript 6 – the whole thruth

Extended version of my slides for enterjs 2014 conference (http://www.enterjs.de/abstracts#ecmascript6–the-future-is-now)

lgersman

July 01, 2014
Tweet

More Decks by lgersman

Other Decks in Programming

Transcript

  1. About me Lars Gersmann Senior Software Developer : Content Management

    AG AngularJS, Node.js, Gulp, ES6, HTML5 / Less.js, Sass / Docker / Bleeding edge browser technologies
  2. Language enhancements l e t statement block scoped variant of

    v a r l e t i = ' a l p h a ' ; . . . f o r ( l e t i = 0 ; i < 1 0 ; i + + ) { . . . } / / i = = = ' a l p h a ' . . . i f ( i = = = ' a l p h a ' ) { l e t i = 1 0 ; . . . } / / i = = ' a l p h a ' caveat : no hoisting characteristics i f ( c o n d i t i o n ) { c o n s o l e . l o g ( v a l u e ) ; / / R e f e r e n c e E r r o r ! l e t v a l u e = " b l u e " ; }
  3. Language enhancements c o n s t statement constants must

    be initialized at declaration c o n s t M A X _ I T E M S = 3 0 ; c o n s t N A M E ; / / S y n t a x e r r o r : m i s s i n g i n i t i a l i z a t i o n constants are block scoped i f ( c o n d i t i o n ) { c o n s t M A X _ I T E M S = 5 ; . . . }
  4. Language enhancements Default parameters f u n c t i

    o n r e n d e r ( o b j , o p t i o n s = g e t D e f a u l t s ( ) ) { / / e s 5 : o p t i o n s = o p t i o n s | | g e t D e f a u l t s ( ) ; . . . } . . . r e n d e r ( m y O b j ) ; / / - > r e n d e r ( m y O b j , g e t D e f a u l t R e n d e r O p t i o n s ( ) ) caveat : u n d e f i n e d will be replaced by default parameter f u n c t i o n r e n d e r ( o b j , o p t i o n s = g e t D e f a u l t s ( ) , c a l l b a c k ) { . . . } r e n d e r ( m y O b j , u n d e f i n e d , m y C a l l b a c k ) ; / / - > r e n d e r ( m y O b j , g e t D e f a u l t s ( ) , m y C a l l b a c k )
  5. Language enhancements Rest parameters Rest parameter is an true A

    r r a y instead of a r g u m e n t s f u n c t i o n f o o ( f i r s t , . . . r e s t ) { r e t u r n r e s t . c o n c a t ( ' l a s t ' ) ; } c o n s o l e . l o g ( f o o ( 1 , 2 , 3 ) ) ; / / - > [ 2 , 3 , ' l a s t ' ] caveat : no other named arguments can follow in function declaration f u n c t i o n f o o ( f i r s t , . . . n u m b e r s , l a s t ) { / / - > S y n t a x e r r o r : C a n ' t h a v e a n a m e d p a r a m e t e r a f t e r r e s t p a r a m e t e r s
  6. Language enhancements . . . Spread operator v a r

    v = [ 2 5 , 5 0 ] , m a x ; m a x = M a t h . m a x ( . . . v ) ; / / e s 5 : M a t h . m a x ( v [ 0 ] , v [ 1 ] ) ; m a x = M a t h . m a x ( 1 7 , . . . v , 2 7 ) ; / / e s 5 : M a t h . m a x ( 1 7 , v [ 0 ] , v [ 1 ] , 2 7 ) ; a r r a y 2 . p u s h ( . . . v ) ; / / e s 5 : a r r a y 2 . p u s h ( v [ 0 ] , v [ 1 ] ) ; Tip : convert array like structures into a true A r r a y on the fly [ . . . d o c u m e n t . q u e r y S e l e c t o r A l l ( " d i v . b i g " ) ] . f o r E a c h ( / / j Q u e r y ( ' d i v . b i g ' ) e l m = > e l m . c l a s s L i s t . r e m o v e ( ' b i g ' ) / / . r e m o v e C l a s s ( ' b i g ' ) ) ;
  7. Language enhancements Object literal improvements Method initializer shorthand f u

    n c t i o n c r e a t e P e r s o n ( n a m e , a g e ) { r e t u r n { n a m e , / / e s 5 : n a m e : n a m e , f a m i l y N a m e , / / e s 5 : f a m i l y N a m e : f a m i l y N a m e , f u l l N a m e ( ) { / / e s 5 : f u l l N a m e : f u n c t i o n ( ) { r e t u r n t h i s . n a m e + ' ' + t h i s . f a m i l y N a m e ; } } ; Compound property names v a r p r o p e r t y = " f o o " , v a l u e = " b a r " ; v a r o b j = { / / e s 5 : v a r o b j = { } ; [ p r o p e r t y + ' _ b a r ' ] : v a l u e / / o b j [ p r o p e r t y + ' _ b a r ' ] = v a l u e ; }
  8. Language enhancements Destructuring assignment syntactic sugar for A r r

    a y 's [ a , b ] = [ b , a ] ; / / e s 5 : l e t t m p = a ; a = b ; b = t m p ; l e t [ x , y ] = f ( ) ; / / - > f ( ) r e t u r n s a n a r r a y [ 2 ] c o n s o l e . l o g ( ' x = ' , x , ' , y = ' + y ) ; / / e s 5 : v a r m a t c h = / ( \ d + ) - ( d + ) - ( \ d + ) / . m a t c h ( ' 2 0 1 4 - 6 - 3 0 ' ) ; / / v a r y e a r = m a t c h [ 1 ] , m o n t h = m a t c h [ 2 ] , d a y = m a t c h [ 3 ] ; l e t [ , y e a r , m o n t h , d a y ] = / ( \ d + ) - ( \ d + ) - ( \ d + ) / . m a t c h ( ' 2 0 1 4 - 6 - 3 0 ' ) ; syntactic sugar for O b j e c t 's v a r { p r o t o c o l , h o s t n a m e , p o r t } = d o c u m e n t . l o c a t i o n ; / / d i r e c t m a p p i n g v a r { h o s t n a m e : s e r v e r , p o r t } = d o c u m e n t . l o c a t i o n ; / / m a p p e d t o { s e r v e r , p o r t } Wait - there's more fun ! l e t s o u r c e = { a : 1 , b : { c : 2 } } ; . . . l e t { a : x , b : { c : y } } = s o u r c e ; / / x = 1 , y = 2 . . . [ s o u r c e ] . f o r E a c h ( f u n c t i o n ( { a : x , b : { c : y } } ) { c o n s o l e . l o g ( x , y ) ; / / - > " 1 , 2 " } ) ;
  9. Language enhancements 0 o 7 1 Octal / 0 b

    1 0 1 Binary literals making use of octal/binary values less error prone / / E C M A S c r i p t 3 v a r n u m b e r = 0 7 1 ; / / 5 7 i n d e c i m a l v a r v a l u e 1 = p a r s e I n t ( " 7 1 " ) ; / / 7 1 v a r v a l u e 2 = p a r s e I n t ( " 0 7 1 " ) ; / / 5 7 / / E C M A S c r i p t 5 v a r n u m b e r = 0 7 1 ; / / 5 7 i n d e c i m a l v a r v a l u e 1 = p a r s e I n t ( " 7 1 " ) ; / / 7 1 v a r v a l u e 2 = p a r s e I n t ( " 0 7 1 " ) ; / / 7 1 v a r v a l u e 3 = p a r s e I n t ( " 0 7 1 " , 8 ) ; / / 5 7 / / E C M A S c r i p t 6 v a r v a l u e 1 = 0 o 7 1 ; / / 5 7 i n d e c i m a l v a r v a l u e 2 = 0 b 1 0 1 ; / / 5 i n d e c i m a l f u n c t i o n g e t V a l u e ( ) { " u s e s t r i c t " ; r e t u r n 0 7 1 ; / / s y n t a x e r r o r } caveat : parsing octal/binary values / / p a r s e I n t ( ) d o e s n ' t h a n d l e s t r i n g s t h a t l o o k l i k e o c t a l o r b i n a r y l i t e r a l s c o n s o l e . l o g ( p a r s e I n t ( " 0 o 7 1 " ) ) ; / / 0 c o n s o l e . l o g ( p a r s e I n t ( " 0 b 1 0 1 " ) ) ; / / 0 / / u s e t h e N u m b e r c o n s t r u c t o r i n s t e a d
  10. c o n s o l e . l o

    g ( N u m b e r ( " 0 o 7 1 " ) ) ; / / 5 7 c o n s o l e . l o g ( N u m b e r ( " 0 b 1 0 1 " ) ) ; / / 5 Language enhancements ` h e l l o $ { n a m e } ` Template strings featuring multiline strings and expression substitution l e t u r l = " h t t p : / / e x a m p l e . c o m " ; l e t d e c o r a t i o n = { / / t a r g e t : " _ b l a n k " , l a b e l : " e x a m p l e " } ; l e t a n c h o r = ` < a u r l = " $ { u r l } " t a r g e t = " $ { d e c o r a t i o n . t a r g e t | | ' b l a n k ' } " > $ { d e c o r a t i o n . l a b e l } < / a > ` ; tags can be used for custom DSL building f u n c t i o n s a f e h t m l ( l i t e r a l s , . . . v a l u e s ) { / / p r o c e s s e v a l u a t e d l i t e r a l s a n d v a l u e s a n r e t u r n a s a f e h t m l e n c o d e d s t r i n g . . . } l e t a n c h o r = s a f e h t m l ` < a u r l = " $ { u r l } " t a r g e t = " $ { d e c o r a t i o n . t a r g e t | | ' b l a n k ' } " > $ { d e c o r a t i o n . l a b e l } < / a > ` ;
  11. Language enhancements = > Arrow functions j Q u e

    r y ( " b u t t o n " ) . o n ( " c l i c k " , e v e n t = > c o n s o l e . l o g ( e v e n t . t a r g e t ) ) ; l e t b a s e = ( ) = > d o c u m e n t . l o c a t i o n . h r e f ; / / n o a r g u m e n t s r e q u i r e p a r e n t h e s i s c o n s o l e . l o g ( b a s e ( ) ) ; l e t t o U p p e r = s = > s . t o U p p e r C a s e ( ) ; / / s i n g l e a r g u m e n t r e q u i r e d o e s n t r e q u i r e p a r e n t h e s i s c o n s o l e . l o g ( t o U p p e r ( " h u h u " ) ) ; / / " H U H U " v a r v a l u e s = [ 9 , 7 , 1 , 5 ] ; / / m u l t i p l e a r g u m e n t s r e q u i r e p a r e n t h e s i s v a l u e s . s o r t ( ( a , b ) = > a - b ) ; / / = > [ 1 , 5 , 7 , 9 ] ; v a l u e s . s o r t ( ( a , b ) = > { / / t r a d i t i o n a l s t y l e d a r r o w f u n c t i o n w i t h r e t u r n s t a t e m e n t r e t u r n a - b ; } ) ; *Implicit t h i s binding to definition scope. c a l l ( ) , a p p l y ( ) , b i n d ( ) will have no effect. Arrow functions cannot be used with n e w .
  12. Language enhancements f o r ( . . . o

    f . . . ) statement f o r ( l e t v o f [ 1 , 3 , 5 , 7 ] ) { c o n s o l e . l o g ( v ) ; / / - > p r i n t s o u t a r r a y v a l u e s } I t e r a t o r /I t e r a b l e support f o r ( l e t [ i n d e x , v a l u e ] o f [ " a " , " b " , " c " ] . e n t r i e s ( ) ) { . . . } A r r a y comprehension l e t s q u a r e d = [ f o r ( x o f [ 1 , 2 , 3 ) x * x ] ; / / - > [ 1 , 4 , 9 ] l e t s q u a r e d O d d = [ f o r ( x o f a r r ) i f ( x % 2 ) x * x ] ; / / - > [ 1 , 9 ] l e t v = [ f o r ( [ i n d e x , v a l u e ] o f [ " a " , " b " , " c " ] . e n t r i e s ( ) ) [ v a l u e . t o U p p e r C a s e ( ) , i n d e x ] ] ; / / v = [ [ " A " , 0 ] , [ " B " , 1 ] , [ " C " , 2 ] ]
  13. Language enhancements f u n c t i o n

    * Generator A Generator is a function y i e l d ing an unlimited amount of values wrapped in a automagic I t e r a t o r instance. f u n c t i o n * g e n e r a t e ( ) { l e t i = 0 ; w h i l e ( i < 5 ) { y i e l d i + + ; } } / / u s i n g f o r . . . o f s t a t e m e n t f o r ( l e t v o f g e n e r a t e ( ) ) { c o n s o l e . l o g ( v ) ; / / - > 0 , 1 , 2 , 3 , 4 } / / u s i n g w h i l e s t a t e m e n t l e t i t e r = g e n e r a t e ( ) , n e x t ; w h i l e ( ! ( n e x t = i t e r . n e x t ( ) ) . d o n e ) { c o n s o l e . l o g ( n e x t . v a l u e ) ; / / - > 0 , 1 , 2 , 3 , 4 } Caveat r e t u r n "closes" the iterator returned by a generator function. The return expression value will be ignored.
  14. Language enhancements f u n c t i o n

    * Generator y i e l d * delegates control to another G e n e r a t o r f u n c t i o n * w a l k ( n o d e ) { f o r ( l e t c h i l d o f n o d e . c h i l d r e n ( ) ) { y i e l d * w a l k ( c h i l d ) ; } y i e l d n o d e ; } f o r ( l e t n o f w a l k ( r o o t ) ) { c o n s o l e . l o g ( n ) ; }
  15. Language enhancements f u n c t i o n

    * Generator Passing arguments between consumer and I t e r a t o r around f u n c t i o n * s u m m a r i z e ( s u m = 0 ) { w h i l e ( t r u e ) { s u m + = y i e l d s u m ; c o n s o l e . l o g ( s u m ) ; } } l e t t o t a l = s u m m a r i z e ( 1 0 ) ; t o t a l . n e x t ( ) ; f o r ( l e t v o f [ 1 , 3 , 6 ] ) { t o t a l . n e x t ( v ) ; } / / " 1 1 " / / " 1 4 " / / " 2 0 "
  16. Language enhancements f u n c t i o n

    * Generator Bonus : use y i e l d * to execute async functions sequential ! f u n c t i o n r u n ( g e n ) { v a r i t e r = g e n ( m s g = > i t e r . n e x t ( m s g . t o U p p e r C a s e ( ) ) ) ; i t e r . n e x t ( ) ; / / r e s u m e ( a k a s t a r t ) } r u n ( f u n c t i o n * ( r e s u m e ) { c o n s o l e . l o g ( " b e f o r e " ) ; c o n s o l e . l o g ( y i e l d s e t T i m e o u t ( ( ) = > r e s u m e ( " h e l l o " ) , 1 0 0 0 ) ) ; / / s u s p e n d c o n s o l e . l o g ( y i e l d s e t T i m e o u t ( ( ) = > r e s u m e ( " w o r l d " ) , 1 0 0 0 ) ) ; / / s u s p e n d c o n s o l e . l o g ( " a f t e r " ) ; } ) ; / / " b e f o r e " / / " H E L L O " / / " W O R L D " / / " a f t e r "
  17. Language enhancements C l a s s es c l

    a s s P o s i t i o n { c o n s t r u c t o r ( x , y ) { t h i s . d a t a = { x , y } ; } s e t x ( x ) { t h i s . d a t a . x = x ; } g e t x ( ) { r e t u r n t h i s . d a t a . x ; } t o S t r i n g ( ) { r e t u r n ` P o s i t i o n ( = $ { t h i s . x } , $ { t h i s . d a t a . y } ) ` ; } . . . } l e t p = n e w P o s i t i o n ( 0 , 2 0 ) ; p . x = 1 5 ; c o n s o l e . l o g ( ` p i s $ { p } ` ) ; / / " p i s P o s i t i o n ( = 1 5 , 2 0 ) " . . .
  18. Language enhancements Classes . . . c l a s

    s S h a p e e x t e n d s P o s i t i o n { c o n s t r u c t o r ( x , y , w i d t h , h e i g h t ) { s u p e r ( x , y ) ; O b j e c t . a s s i g n ( t h i s . d a t a , { w i d t h , h e i g h t } ) ; } g e t d i m e n s i o n ( ) { r e t u r n { w i d t h : t h i s . d a t a . w i d t h , h e i g h t : t h i s . d a t a . h e i g h t } ; } t o S t r i n g ( ) { r e t u r n ` S h a p e ( = $ { s u p e r . t o S t r i n g ( ) } , $ { t h i s . d i m e n s i o n . w i d t h } , $ { t h i s . d i m e n s i o n . h e i g h t } ) ` ; } } l e t s = n e w S h a p e ( 0 , 2 0 , 1 0 0 , 7 0 } ) ; s . x = 1 5 ; s . w i d t h = 5 0 ; c o n s o l e . l o g ( ` s i s $ { s } ` ) ; / / " s i s S h a p e ( = P o s i t i o n ( = 1 5 , 2 0 ) , 5 0 , 7 0 ) " c o n s o l e . l o g ( s i n s t a n c e o f P o s i t i o n , s i n s t a n c e o f S h a p e ) ; / / " t r u e t r u e " Inheritance, s u p e r access
  19. Language enhancements Classes l e t a r r =

    [ ] ; a r r [ 3 ] = " f o o " ; c o n s o l e . l o g ( a r r . l e n g t h ) ; / / " 4 " c l a s s M y A r r a y e x t e n d s A r r a y { c o n s t r u c t o r ( . . . a r g s ) { s u p e r ( . . . a r g s ) ; } } a r r = n e w M y A r r a y ( ) ; a r r [ 3 ] = " f o o " ; c o n s o l e . l o g ( a r r . l e n g t h ) ; / / E S 5 : " 0 " / / E S 6 : " 4 " ... true native JS Object inheritance
  20. Class enhancements Classes c l a s s H u

    m a n { c o n s t r u c t o r ( n a m e ) { t h i s . n a m e = n a m e ; } h i ( ) { r e t u r n ` H e l l o , I a m $ { t h i s . n a m e } . ` ; } } c l a s s E m p l o y e e e x t e n d s H u m a n { t o S t r i n g ( ) { r e t u r n ` e m p l o y e e ( = $ { t h i s . n a m e } ) ` ; } } c l a s s M a n a g e r e x t e n d s E m p l o y e e { t o S t r i n g ( ) { r e t u r n ` m a n a g e r ( = $ { t h i s . n a m e } ) ` ; } } l e t m i k e = n e w E m p l o y e e ( " m i k e " ) ; c o n s o l e . l o g ( ` $ { m i k e } : " $ { m i k e . h i ( ) } " ` , m i k e i n s t a n c e o f M a n a g e r , m i k e i n s t a n c e o f E m p l o y e e ) ; / / ' e m p l o y e e ( = m i k e ) : " H e l l o , I a m m i k e . " f a l s e t r u e ' O b j e c t . s e t P r o t o t y p e O f ( m i k e , n e w M a n a g e r ( ) ) ; c o n s o l e . l o g ( ` $ { m i k e } : " $ { m i k e . h i ( ) } " ` , m i k e i n s t a n c e o f M a n a g e r , m i k e i n s t a n c e o f E m p l o y e e ) ; / / ' m a n a g e r ( = m i k e ) : " H e l l o , I a m m i k e . " t r u e t r u e ' ... O b j e c t . s e t P r o t o t y p e O f relink objects after creation via prototype chain
  21. Class enhancements O b j e c t .* O

    b j e c t . i s ( l , r ) fixes some inconsistences of JS equality. Values are considered as "equivalent". O b j e c t . i s ( + 0 , - 0 ) ; / / f a l s e O b j e c t . i s ( N a N , N a N ) ; / / t r u e O b j e c t . i s ( 5 , 5 ) ; / / t r u e O b j e c t . i s ( 5 , " 5 " ) ; / / f a l s e O b j e c t . a s s i g n ( t a r g e t , . . . s o u r c e s ) copies all direct properties (i.e. not inherited properties)into the target object. l e t b a s e = { a : 1 } ; l e t s o u r c e 1 = { b : 2 , c : 3 } ; O b j e c t . s e t P r o t o t y p e O f ( s o u r c e 1 , b a s e ) ; l e t s o u r c e 2 = { c : 4 , d : 5 } ; l e t t a r g e t = { a : - 1 , b : - 2 } ; O b j e c t . a s s i g n ( t a r g e t , s o u r c e 1 , s o u r c e 2 ) ; c o n s o l e . l o g ( t a r g e t ) ; / / " O b j e c t { a : - 1 , b : 2 , c : 4 , d : 5 } "
  22. Class enhancements N u m b e r .* N

    u m b e r . i s F i n i t e ( a r g ) always return false when passed a non-number value i s F i n i t e ( 2 5 ) ; / / t r u e i s F i n i t e ( " 2 5 " ) ; / / t r u e / / n e w i n E S 6 ! N u m b e r . i s F i n i t e ( 2 5 ) ; / / t r u e N u m b e r . i s F i n i t e ( " 2 5 " ) ; / / f a l s e N u m b e r . i s N a N ( a r g ) always return false when passed a non-number value i s N a N ( N a N ) ; / / t r u e i s N a N ( " N a N " ) ; / / t r u e N u m b e r . i s N a N ( N a N ) ; / / t r u e N u m b e r . i s N a N ( " N a N " ) ; / / f a l s e N u m b e r . i s I n t e g e r ( a r g ) N u m b e r . i s I n t e g e r ( 2 5 ) ; / / t r u e N u m b e r . i s I n t e g e r ( 2 5 . 0 ) ; / / t r u e N u m b e r . i s I n t e g e r ( 2 5 . 1 ) ; / / f a l s e Safe integers are numbers between -253 and 253. Outside of this "safe" range, binary representations end up reused for multiple numeric values. l e t s a f e = N u m b e r . M A X _ S A F E _ I N T E G E R , u n s a f e = s a f e + 1 ;
  23. c o n s o l e . l o

    g ( N u m b e r . i s I n t e g e r ( s a f e ) , N u m b e r . i s S a f e I n t e g e r ( s a f e ) ) ; / / " t r u e , t r u e " c o n s o l e . l o g ( N u m b e r . i s I n t e g e r ( u n s a f e ) , N u m b e r . i s S a f e I n t e g e r ( u n s a f e ) ) ; / / " t r u e , f a l s e " N u m b e r . p a r s e I n t ( a r g ) and N u m b e r . p a r s e I n t ( a r g ) behave exactly the same as the global functions of the same name. Class enhancements M a t h .* M a t h . a c o s h ( a r g ) Returns the inverse hyperbolic cosine of x. M a t h . a s i n h ( a r g ) Returns the inverse hyperbolic sine of x. M a t h . a t a n h ( a r g ) Returns the inverse hyperbolic tangent of x M a t h . c b r t ( a r g ) Returns the cubed root of x. M a t h . c l z 3 2 ( a r g ) Returns the number of leading zero bits in the 32-bit integer representation of x. M a t h . c o s h ( a r g ) Returns the hyperbolic cosine of x. M a t h . e x p m 1 ( a r g ) Returns the result of subtracting 1 from the exponential function of x M a t h . f r o u n d ( a r g ) Returns the nearest single-precision float of x. M a t h . h y p o t ( . . . a r g s ) Returns the square root of the sum of the squares of each argument. M a t h . i m u l ( x , y ) Returns the result of performing true 32-bit multiplication of the two arguments. M a t h . l o g 1 p ( a r g ) Returns the natural logarithm of 1 + x. M a t h . l o g 1 0 ( a r g ) Returns the base 10 logarithm of x. M a t h . l o g 2 ( a r g ) Returns the base 2 logarithm of x. M a t h . s i g n ( a r g ) Returns -1 if the x is negative 0 if x is +0 or -0, or 1 if x is positive. M a t h . s i n h ( a r g ) Returns the hyperbolic sine of x. M a t h . t a n h ( a r g ) Returns the hyperbolic tangent of x. M a t h . t r u n c ( a r g ) Removes fraction digits from a float and returns an integer.
  24. Class enhancements S t r i n g .* S

    t r i n g . s t a r t s W i t h ( s t r , o f s ? ) v a r m s g = " H e l l o w o r l d ! " ; m s g . s t a r t s W i t h ( " H e l l o " ) ; / / t r u e m s g . s t a r t s W i t h ( " o " ) ; / / f a l s e m s g . s t a r t s W i t h ( " o " , 4 ) ; / / t r u e S t r i n g . c o n t a i n s ( s t r , o f s ? ) v a r m s g = " H e l l o w o r l d ! " ; m s g . c o n t a i n s ( " o " ) ; / / t r u e m s g . c o n t a i n s ( " x " ) ; / / f a l s e m s g . c o n t a i n s ( " o " , 8 ) ; / / f a l s e S t r i n g . e n d s W i t h ( n t i m e s ) v a r m s g = " H e l l o w o r l d ! " ; m s g . e n d s W i t h ( " ! " ) ; / / t r u e m s g . e n d s W i t h ( " w o r l d ! " ) / / t r u e m s g . e n d s W i t h ( " o " , 8 ) ; / / f a l s e S t r i n g . r e p e a t ( n t i m e s ) " # " . r e p e a t ( 5 ) ; / / " # # # # # "
  25. Class enhancements A r r a y .* A r

    r a y . f i n d ( c a l l b a c k , t h i s A r g ? ) , A r r a y . f i n d I n d e x ( c a l l b a c k , t h i s A r g ? ) [ ' h e l l o ' , ' w o r l d ' , ' ! ' ] . f i n d ( s = > s . s t a r t s W i t h ( ' w ' ) ) ; / / " w o r l d " [ ' h e l l o ' , ' w o r l d ' , ' ! ' ] . f i n d ( s = > s . s t a r t s W i t h ( ' k ' ) ) ; / / u n d e f i n e d [ ' h e l l o ' , ' w o r l d ' , ' ! ' ] . f i n d I n d e x ( s = > s . s t a r t s W i t h ( ' w ' ) ) ; / / 1 [ ' h e l l o ' , ' w o r l d ' , ' ! ' ] . f i n d I n d e x ( s = > s . s t a r t s W i t h ( ' k ' ) ) ; / / - 1 A r r a y . f r o m ( a r r a y L i k e , m a p F u n c ? , t h i s A r g ? ) converts array like or I t e r a t o r objects into an A r r a y l e t a r r = A r r a y . f r o m ( d o c u m e n t . q u e r y S e l e c t o r A l l ( ' p ' ) ) ; / / l e t a r r = [ . . . d o c u m e n t . q u e r y S e l e c t o r A l l ( ' p ' ) ] ; a s s h o r t a l t e r n a t i v e A r r a y . o f ( . . . a r g s ) is an less error prone alternative to the A r r a y constructor / / b e f o r e E S 6 n e w A r r a y ( 3 , 2 , 1 ) ; / / - > [ 3 , 2 , 1 ] n e w A r r a y ( 3 ) ; / / - > [ , , ] / / E S 6 a r r = A r r a y . o f ( 1 , 2 , 3 ) ; / / - > [ 1 , 2 , 3 ] a r r = A r r a y . o f ( 3 ) ; / / - > [ 3 ] A r r a y . e n t r i e s ( ) , A r r a y . k e y s ( ) , A r r a y . v a l u e s ( ) return I t e r a t o r 's A r r a y . f i l l ( v a l u e , s t a r t = 0 , e n d = t h i s . l e n g t h ) fills all the elements of an array from a start index to an end index with
  26. a static value. Additional classes I t e r a

    t o r interface I t e r a t o r exposes a n e x t ( ) function . . . n e x t ( ) { . . . r e t u r n { v a l u e : { . . . } , d o n e : t r u e ; / / o r f a l s e f o r f i n i s h e d } ; } I t e r a t o r is a generic interface for object iteration using f o r ( . . o f . . ) loop l e t s e t = n e w S e t ( [ " f o o " , " b a r " ] ) ; f o r ( l e t i t e m o f s e t . e n t r i e s ( ) ) { . . . } . . . l e t m a p = n e w M a p ( [ [ " f o o " , " 1 " ] , [ " b a r " , " 2 " ] ] ) ; f o r ( l e t i t e m o f m a p . e n t r i e s ( ) ) { . . . }
  27. Additional classes I t e r a b l e

    interface Any class/object having a [ S y m b o l . i t e r a t o r ] property can be iterated using f o r ( . . o f . . ) loop l e t o b j = { * [ S y m b o l . i t e r a t o r ] ( ) { y i e l d 1 ; y i e l d 2 ; y i e l d 3 ; } } ; f o r ( l e t i o f o b j ) { c o n s o l e . l o g ( i ) ; } 1 2 3
  28. Additional classes Collection classes v a r m = n

    e w M a p ( [ [ 1 , ' h u h u ' ] , [ ' 1 ' : ' e i n s ' ] , [ ' 1 . 0 ' : ' e i n s k o m m a n u l l ' ] ] ) ; c o n s o l e . l o g ( m . s i z e ) ; / / " 3 " m . s e t ( 1 . 0 , ' e i n s - k o m m a - n u l l ' ) ; / / - > m . s i z e = = = 4 M a p The M a p object is a true key/value map. Any value (both objects and primitive values) may be used as key. S e t The S e t object lets you store unique values of any type, whether primitive values or object references. v a r s = n e w S e t ( [ 1 , ' 1 ' ] ) ; c o n s o l e . l o g ( m . s i z e ) ; / / " 2 " s . d e l e t e ( 1 ) ; / / m . s i z e = = = 1 W e a k M a p , W e a k S e t W e a k M a p keys and W e a k S e t values are collections of objects only and not of arbitrary values of any type. If there is no other reference to an object stored in the W e a k S e t (i.e the key in a W e a k M a p ), they can be garbage collected. W e a k M a p and W e a k S e t are not iterable for that reason.
  29. Additional classes S y m b o l S y

    m b o l is a primitive type originally invented to create private object members. l e t f o o = S y m b o l ( ) , f o o 2 = S y m b o l ( " f o o " ) ; c o n s o l e . l o g ( f o o , f o o 2 ) ; / / S y m b o l ( ) S y m b o l ( f o o ) l e t o b j = { [ f o o ] : ' b a r ' , [ f o o 2 ] : ' b a r 2 ' , ' f o o ' : ' _ b a r ' } ; c o n s o l e . l o g ( O b j e c t . k e y s ( o b j ) ) ; / / [ " f o o " ] c o n s o l e . l o g ( O b j e c t . g e t O w n P r o p e r t y N a m e s ( o b j ) ) ; / / [ " f o o " ] c o n s o l e . l o g ( O b j e c t . g e t O w n P r o p e r t y S y m b o l s ( o b j ) ) ; / / [ S y m b o l V a l u e , S y m b o l V a l u e ] c o n s o l e . l o g ( o b j [ f o o ] ) ; / / " b a r " Caveats : Symbol object members will not be enumerated as object keys. Symbols are primitive values, new Symbol() throws an error when called. Shared symbols S y m b o l 's can be shared in a global registry by get/create them using S y m b o l . f o r ( n a m e ) and looked up using S y m b o l . k e y F o r ( n a m e ) l e t f o o = S y m b o l . f o r ( " f o o " ) ; / / s y m b o l ( f o o ) c o n s o l e . l o g ( S y m b o l . k e y F o r ( f o o ) ) ; / / " f o o " l e t f o o 2 = S y m b o l . f o r ( " f o o " ) ; / / s y m b o l ( f o o ) c o n s o l e . l o g ( f o o = = = f o o 2 ) ; / / t r u e
  30. v a r f o o 3 = S y

    m b o l ( " f o o " ) ; / / u n s h a r e d s y m b o l c o n s o l e . l o g ( S y m b o l . k e y F o r ( f o o 3 ) ) ; / / u n d e f i n e d Additional classes P r o m i s e A promise represents the eventual result of an asynchronous operation. P r o m i s e is a builtin class implementing the Promises/A+ specification. v a r p r o m i s e = n e w P r o m i s e ( ( r e s o l v e , r e j e c t ) = > { / / d o s o m e t h i n g , p o s s i b l y a s y n c . . . i f ( / * e v e r y t h i n g t u r n e d o u t f i n e * / ) r e s o l v e ( " S t u f f w o r k e d ! " ) ; e l s e r e j e c t ( n e w E r r o r ( " I t b r o k e " ) ) ; } ) ; . . . p r o m i s e . t h e n ( r e s u l t = > c o n s o l e . l o g ( r e s u l t ) , e r r = > c o n s o l e . l o g ( e r r ) ) ; P r o m i s e s can be chained together. f u n c t i o n l o a d C h a p t e r ( c h a p t e r ) r e t u r n P r o m i s e . r e s o l v e ( $ . g e t ( ' m e t a d a t a ' ) ) . t h e n ( j q X H R = > P r o m i s e . r e s o l v e ( $ . g e t ( ' c h a p t e r s / ' + J S O N . p a r s e ( j q X H R . r e s p o n s e T e x t ) . u r l s [ c h a p t e r - 1 ] ) ) } ) . t h e n ( j q X H R = > J S O N . p a r s e ( j q X H R . r e s p o n s e T e x t ) ) . c o n t e n t s ) ) ; . . . l o a d C h a p t e r ( 4 ) . t h e n ( c o n t e n t s = > d o c u m e n t . b o d y . i n n e r H T M L = c o n t e n t s , e r r = > a l e r t ( ` F a i l e d t o r e t r i e v e c h a p t e r $ { c h a p t e r } : $ { e r r . m e s s a g e } ` ) ) ;
  31. Additional classes P r o m i s e P

    r o m i s e . r e s o l v e ( t h e n a b l e ) can cast anything promise-like (or thenable in promise-speak) into a native Promise object ( j Q u e r y . D e f e r r e d ( ) , Angular Deferred $ q . d e f e r ( ) etc.) v a r j s P r o m i s e = P r o m i s e . r e s o l v e ( j Q u e r y . a j a x ( ' / w h a t e v e r . j s o n ' ) ) ; Caveat : Only the first resolve/reject argument of casted promise-like objects will be available in resolve/reject callbacks. P r o m i s e . r e s o l v e ( o b j ) ; creates a promise that fulfills to obj. P r o m i s e . r e s o l v e ( { m s g : " I s u c c e e d e d ! " } ) . t h e n ( o b j = > c o n s o l e . l o g ( o b j . m s g ) ) ; / / " i s u c c e e d e d ! " P r o m i s e . r e j e c t ( o b j ) ; returns a promise that rejects to obj (obj should be an instanceof Error). P r o m i s e . r e j e c t ( n e w E r r o r ( " I f a i l e d : - ( " ) . t h e n ( m s g = > c o n s o l e . l o g ( " s u c c e s s ! " ) , e r r o r = > c o n s o l e . l o g ( ` S o r r y - $ { e r r o r . m e s s a g e } ` ) ) ; / / " S o r r y - I f a i l e d : - ( P r o m i s e . a l l ( a r r a y ) ; creates a promise that fulfills when every item in the array fulfills, and rejects if (and when) any item rejects. P r o m i s e . a l l ( [ $ . g e t ( " f o o . j s o n " ) , $ . g e t ( " b a r . j s o n " ) , $ . g e t ( " s u m m a r y . j s o n " ) ] ) . t h e n ( ( [ f o o X H R , b a r X H R , s u m m a r y X H R ] ) = > c o n s o l e . l o g ( f o o . r e s p o n s e T e x t , b a r . r e s p o n s e T e x t , s u m m a r y . r e s p o n s e T e x t ) , e r r = > c o n s o l e . l o g ( ` F a i l e d r e c e i v i n g $ { e r r . m e s s a g e } ` ) ) ; / / o u t p u t o f d a t a f r o m a l l a j a x r e q u e s t s
  32. P r o m i s e . r a

    c e ( a r r a y ) ; return a Promise that fulfills as soon as any item fulfills, or rejects as soon as any item rejects, whichever happens f Additional classes P r o x y P r o x y 's let you track/modify/intercept almost any operation on a JS object. f u n c t i o n c r e a t e T r a c k e r ( o b j ) { v a r t o u c h e d = n e w S e t ( ) ; v a r p r o x y = P r o x y ( t a r g e t , { s e t ( t a r g e t , p r o p e r t y , v a l u e ) { t o u c h e d . a d d ( p r o p e r t y ) ; t a r g e t [ p r o p e r t y ] = v a l u e ; } } ) ; r e t u r n [ p r o x y , t o u c h e d ] ; } . . . v a r m o d e l { i d : 0 8 1 5 , n a m e : " J o h n " , ' g e n d e r : m a l e ' } ; v a r [ f a c a d e , t o u c h e d ] = c r e a t e T r a c k e r ( m o d e l ) ; f a c a d e . n a m e = " J o h n D o e " ; / / t o u c h e d = [ " n a m e " ] / / m o d e l . n a m e = " J o h n D o e " ; . . . i f ( t o u c h e d . s i z e ) { b a c k e n d . s a v e ( m o d e l , t o u c h e d ) ; / / s a v e b a c k a l l c h a n g e d p r o p e r t i e s } P r o x y supports many more handler like s e t , d e l e t e etc. for intercepting any possible modification of a JS object. See here for more.
  33. Modules import / export Modules allows the definition of code

    with explicit e x p o r t s, i m p o r t specific exported names from those modules, and keep these names sepa / / l i b / f o o . j s e x p o r t d e f a u l t c l a s s F o o { . . . } ; e x p o r t c o n s t V E R S I O N = ' 1 . 0 ' ; e x p o r t v a r u t i l = { e s c a p e ( s ) { . . . } } ; / / l i b / b a r . j s e x p o r t f u n c t i o n b a r ( ) { . . . } ; e x p o r t c o n s t V E R S I O N = ' 1 . 2 ' ; i m p o r t F o o f r o m ' . / l i b / f o o ' ; / / i m p o r t d e f a u l t e x p o r t i m p o r t { u t i l , V E R S I O N a s U T I L _ V E R S I O N } f r o m ' . / l i b / f o o ' ; / / i m p o r t u t i l a s u t i l , V E R S I O N a s U T I L _ V E R S I i m p o r t { b a r , V E R S I O N a s B A R _ V E R S I O N } f r o m ' . / l i b / b a r ' ; c o n s o l e . l o g ( U T I L _ V E R S I O N , B A R _ V E R S I O N ) ; / / " 1 . 0 1 . 2 " u t i l . e s c a p e ( " h e l l o w o r l d " ) ;
  34. Modules Module Loader (S y s t e m .

    * ) ES6 defines a module loader interface for loading scripts dynamically (in the browser) < s c r i p t > P r o m i s e . a l l ( [ S y s t e m . i m p o r t ( ' . / l i b / f o o ' ) , S y s t e m . i m p o r t ( ' . / l i b / b a r ' ) ] ) . t h e n ( f u n c t i o n ( [ f o o , b a r ] ) { v a r o b j = n e w f o o . F o o ( ) ; c o n s o l e . l o g ( f o o . V E R S I O N , b a r . V E R S I O N ) ; / / " 1 . 0 1 . 2 " f o o . u t i l . e s c a p e ( " h e l l o w o r l d " ) ; } ) . c a t c h ( e r r ) { t h r o w e ; } ) ; < / s c r i p t >
  35. What's next ? ES7 O b j e c t

    . o b s e r v e ( c h a n g e s ) lets you listen to changes on a object. Will speed up libraries like AngularJS, EmberJS or Backbone massively. v a r o b j = { } ; O b j e c t . o b s e r v e ( o b j , c h a n g e s = > { c h a n g e s . f o r E a c h ( c h a n g e = > { / / d o s t u f f w i t h c h a n g e . c o n s o l e . l o g ( c h a n g e . t y p e , c h a n g e . n a m e , c h a n g e . o l d V a l u e , c h a n g e . o b j e c t [ c h a n g e . n a m e ] ) ; } ) ; } ) ; . . . o b j . f o o = 1 ; / / " a d d f o o u n d e f i n e d 1 " o b j . f o o = 5 ; / / " u p d a t e f o o 1 5 " d e l e t e o b j . f o o ; / / " d e l e t e f o o 5 " a s y n c / a w a i t is syntactic sugar for working with P r o m i s e objects a s y n c f u n c t i o n l o a d C h a p t e r ( c h a p t e r ) { v a r m e t a d a t a = a w a i t $ . g e t ( ' m e t a d a t a ' ) ; v a r c h a p t e r = a w a i t $ . g e t ( ' c h a p t e r s / ' + J S O N . p a r s e ( m e t a d a t a . r e s p o n s e T e x t ) . u r l s [ c h a p t e r - 1 ] ) ; r e t u r n J S O N . p a r s e ( c h a p t e r . r e s p o n s e T e x t ) ) . c o n t e n t s ; } . . . ( a s y n c f u n c t i o n ( ) { t r y { c o n s o l e . l o g ( a w a i t l o a d C h a p t e r ( 4 ) ) ; } c a t c h ( e r r ) { c o n s o l e . l o g ( e r r . m e s s a g e ) ; } } ) ( ) ; / / s a m e e f f e c t a s I I F E a b o v e
  36. l o a d C h a p t e

    r ( 4 ) . t h e n ( c h a p t e r = > c o n s o l e . l o g ( c h a p t e r ) , e r r = > c o n s o l e . l o g ( e r r . m e s s a g e ) ) ; What's next ? ES7 Type support f u n c t i o n i n d e n t ( t e x t : s t r i n g , c o u n t : n u m b e r = 4 , i n d e n t : s t r i n g = ' ' ) : s t r i n g { r e t u r n i n d e n t . r e p e a t ( c o u n t ) . c o n c a t ( t e x t ) ; } c o n s o l e . l o g ( " h u h u " ) ; / / " h u h u " c o n s o l e . l o g ( i n d e n t ( { } ) ) ; / / " E r r o r : I n v a l i d a r g u m e n t s g i v e n ! / / - 1 s t a r g u m e n t h a s t o b e a n i n s t a n c e o f s t r i n g , g o t { } " c o n s o l e . l o g ( i n d e n t ( " h u h u " , " 2 " ) ) ; / / " E r r o r : I n v a l i d a r g u m e n t s g i v e n ! / / - 2 n d a r g u m e n t h a s t o b e a n i n s t a n c e o f n u m b e r , g o t " 2 " Annotations will bring transparent Dependency Injection / / c o f f e e _ m a k e r . j s i m p o r t { I n j e c t } f r o m ' d i / a n n o t a t i o n s ' ; i m p o r t { H e a t e r } f r o m ' . / h e a t e r ' ; @ I n j e c t ( H e a t e r ) e x p o r t c l a s s C o f f e e M a k e r { c o n s t r u c t o r ( h e a t e r ) { h e a t e r . s t a r t ( ) ; } } / / - > [ n e w I n j e c t ( h e a d e r ) ] = = C o f f e e M a k e r . a n n o t a t i o n s ; / / m a i n . j s i m p o r t { I n j e c t o r } f r o m ' d i / i n j e c t o r ' ; i m p o r t { C o f f e e M a k e r } f r o m ' . / c o f f e e _ m a k e r ' ; f u n c t i o n m a i n ( ) { v a r c o f f e e M a k e r = ( n e w I n j e c t o r ( ) ) . g e t ( C o f f e e M a k e r ) ;
  37. } Can I use it today ? Most modern browsers

    supports ES6 partially (see ECMAScript 6 compatibility table) NodeJS supports many ES6 features (- - h a r m o n y flag) es6-shim provides ES6 API for legacy JavaScript engines Native supported ES6 features is growing monthly
  38. Can I use it today ? YES, You Can !

    Traceur is a JavaScript.next-to-JavaScript-of-today compiler that allows you to use features from the future today. Traceur transpiles most* ES6 + some of ES7 features into today's Javascript (ES5). * except of non shimmable/transpilable features like P r o x y , O b j e c t . o b s e r v e ( ) , new R e g E x p flags ...
  39. Traceur ES6 transpiler Tooling transpiles ES6 sourcecode to ES5 can

    be used as commandline tool, Grunt task or GulpJS task : v a r g u l p = r e q u i r e ( ' g u l p ' ) , t r a c e u r = r e q u i r e ( ' g u l p - t r a c e u r ' ) ; g u l p . t a s k ( ' d e f a u l t ' , f u n c t i o n ( ) { r e t u r n g u l p . s r c ( ' s r c / a p p . j s ' ) . p i p e ( t r a c e u r ( { s o u r c e M a p : t r u e } ) ) . p i p e ( g u l p . d e s t ( ' d i s t ' ) ) ; } ) ; supports AMD, CommonJS, SystemJS or all-in-one ES5 code as output Sourcemap support for easy debugging provides new ES6 API's (S e t , M a p , P r o m i s e etc.) can be used to compile ES6 on the fly Testing ES6 today is easy using Mocha/Jasmine and Karma/Protractor : i m p o r t N e s t e d M a p f r o m " . . / . . / s r c / c o r e / n e s t e d m a p " ; d e s c r i b e ( " N e s t e d M a p " , ( ) = > { i t ( " c o n s t r u c t o r " , ( ) = > { l e t n m = n e w N e s t e d M a p ( ) ; e x p e c t ( n m . p a r e n t ) . t o B e N u l l ( ) ; l e t _ n m = n e w N e s t e d M a p ( n m ) ; e x p e c t ( _ n m . p a r e n t ) . t o B e ( n m ) ; } ) ; } ) ;
  40. Traceur ES6 transpiler NodeJS $ n p m i n

    s t a l l t r a c e u r make Traceur the default JS loader for NodeJS / / t e s t . e s 6 i m p o r t { b } f r o m ' . / r e s o u r c e s / b ' ; c o n s o l e . l o g ( b ) ; / / r e s o u r c e s / b . j s e x p o r t v a r b = ' B B B ' ; / / a p p . j s v a r t r a c e u r = r e q u i r e ( ' t r a c e u r ' ) ; t r a c e u r . r e q u i r e . m a k e D e f a u l t ( f u n c t i o n ( f i l e n a m e ) { r e t u r n f i l e n a m e . e n d s W i t h ( ' . e s 6 ' ) ; } ) ; r e q u i r e ( ' . / t e s t . e s 6 ' ) ;
  41. Traceur ES6 transpiler Browser In-browser transpilation < s c r

    i p t s r c = " h t t p s : / / t r a c e u r - c o m p i l e r . g o o g l e c o d e . c o m / g i t / b i n / t r a c e u r . j s " t y p e = " t e x t / j a v a s c r i p t " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / t r a c e u r - c o m p i l e r . g o o g l e c o d e . c o m / g i t / s r c / b o o t s t r a p . j s " t y p e = " t e x t / j a v a s c r i p t " > < / s c r i p t < s c r i p t > t r a c e u r . o p t i o n s . e x p e r i m e n t a l = t r u e ; < / s c r i p t > < s c r i p t t y p e = " m o d u l e " > c l a s s G r e e t e r { c o n s t r u c t o r ( m e s s a g e ) { t h i s . m e s s a g e = m e s s a g e ; } g r e e t ( ) { l e t e l e m e n t = d o c u m e n t . q u e r y S e l e c t o r ( ' # m e s s a g e ' ) ; e l e m e n t . i n n e r H T M L = t h i s . m e s s a g e ; } } ; l e t g r e e t e r = n e w G r e e t e r ( ' H e l l o , w o r l d ! ' ) ; g r e e t e r . g r e e t ( ) ; < / s c r i p t > or using already transpiled files : < s c r i p t s r c = " b i n / t r a c e u r - r u n t i m e . j s " > < / s c r i p t > < s c r i p t s r c = " o u t / g r e e t e r . j s " > < / s c r i p t >
  42. Should I use ES6 today ? PRO small standard based

    vanilla code much improved readability will result in better productivity less legacy dependencies (like jQuery, Underscore etc.) making your code more future proof less code rewrites over the years huge performance speedup when ES6 will be arrived natively at browsers ES6 modules simplify larger applications sourece code management ES6 adaption in browsers and NodeJS is increasing monthly CONTRA using ES6 today in legacy JS engines makes your toolchain more complicated Traceur is just a workaround : transpiled code is larger and slower than it's ES6 source. Native ES6 language features will not be used in generated code ES6 is a huge step requiring learning to use new language features the right way
  43. Should I use ES6 today ? My experience My guess

    My advise If your toolchain is well done (GulpJS, gulp-watch, Traceur, Jasmine/Protractor for testing) ES6 is a pleasure to use. Learning curve is steep. Traceur is getting very stable, output will be much faster. ES6 will be adapted by most browsers until 2016 - including Internet Explorer. NodeJS will support ES6 mostly in 2014. ES6 features will be adapted very fast by popular NodeJS modules (see Koa as an good ES6 example) because of its massive simplifying async features. Modern browser libraries like AngularJS 2.0 will be based on ES6 (not a guess - reality !) Start learning ! Use it in non critical/inhouse applications/modules to get experienced. Be prepared when everybody supports ES6.
  44. FINI Thank you !! Slides / Updates will be available

    at orangevolt.blogspot.com Lars Gersmann ([email protected]) Github : https://github.com/lgersman Content Management AG (cm4all.com)