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

EcmaScript 6: The Future of JavaScript

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

EcmaScript 6: The Future of JavaScript

A talk on the new features in ES6.

Avatar for Chris Schmitz

Chris Schmitz

July 22, 2014
Tweet

More Decks by Chris Schmitz

Other Decks in Programming

Transcript

  1. How did we get here? The language was written in

    10 days. Attempts to standardize, IE sucks. Everything is moving to the web. It's getting popular on the server. Enough people care now that the language is moving forward quickly.
  2. l e t Block scoping i f ( t r

    u e ) { v a r c o n d i t i o n V a r i a b l e = ' t e s t ' ; } c o n s o l e . l o g ( c o n d i t i o n V a r i a b l e ) ; / / ' t e s t ' i f ( t r u e ) { l e t c o n d i t i o n V a r i a b l e = ' t e s t ' ; } c o n s o l e . l o g ( c o n d i t i o n V a r i a b l e ) ; / / u n d e f i n e d
  3. l e t Creating its own scope l e t

    ( a = 1 ) { c o n s o l e . l o g ( a ) ; / / 1 } c o n s o l e . l o g ( a ) ; / / u n d e f i n e d
  4. c o n s t c o n s t

    a = 1 ; a = 2 ; c o n s o l e . l o g ( a ) ; / / 1
  5. f o r - o f The old way: v

    a r m y A r r a y = [ ' a ' , ' b ' , ' c ' ] ; f o r ( v a r i i n m y A r r a y ) { c o n s o l e . l o g ( i ) ; / / 0 , 1 , 2 c o n s o l e . l o g ( s o m e A r r a y [ i ] ) ; / / ' a ' , ' b ' , ' c ' } The new way: v a r m y A r r a y = [ ' a ' , ' b ' , ' c ' ] ; f o r ( l e t i o f m y A r r a y ) { c o n s o l e . l o g ( i ) ; / / ' a ' , ' b ' , ' c ' }
  6. Array Comprehensions The old way: v a r a r

    r = [ 1 , 2 , 3 , 4 , 5 ] ; v a r s q u a r e d = a r r . m a p ( f u n c t i o n ( i ) { r e t u r n i * i ; / / [ 1 , 4 , 9 , 1 6 , 2 5 ] } ) ; The new way: l e t a r r = [ 1 , 2 , 3 , 4 , 5 ] ; l e t s q u a r e d = [ f o r ( x o f a r r ) x * x ] ; / / 1 , 4 , 9 , 1 6 , 2 5
  7. Arrow Functions The old way: [ 1 , 2 ,

    3 , 4 , 5 ] . m a p ( f u n c t i o n ( i ) { r e t u r n i * i ; } ) ; The new way: [ 1 , 2 , 3 , 4 , 5 ] . m a p ( i = > i * i ) ;
  8. Spread Operator The old way: v a r a r

    r a y 1 = [ 1 , 2 , 3 ] , a r r a y 2 = [ 4 , 5 , 6 ] ; A r r a y . p r o t o t y p e . p u s h . a p p l y ( a r r a y 1 , a r r a y 2 ) ; / / [ 1 , 2 , 3 , 4 , 5 , 6 ] The new way: v a r a r r a y 1 = [ 1 , 2 , 3 ] , a r r a y 2 = [ 4 , 5 , 6 ] ; a r r a y 1 . p u s h ( . . . a r r a y 2 ) ; c o n s o l e . l o g ( a r r a y 2 ) ; / / [ 1 , 2 , 3 , 4 , 5 , 6 ] c o n s o l e . l o g ( . . . a r r a y 2 ) ; / / 1 2 3 4 5 6
  9. Rest Parameters The old way: f u n c t

    i o n m u l t i p l y ( m u l t i p l i e r ) { v a r a r g s = A r r a y . p r o t o t y p e . s l i c e . c a l l ( a r g u m e n t s , 1 ) ; r e t u r n a r g s . m a p ( f u n c t i o n ( i ) { r e t u r n m u l t i p l i e r * i ; } ) ; } c o n s o l e . l o g ( m u l t i p l y ( 1 0 , 1 , 5 , 9 , 8 0 ) ) ; / / [ 1 0 , 5 0 , 9 0 , 8 0 0 ] The new way: f u n c t i o n m u l t i p l y ( m u l t i p l i e r , . . . a r g s ) { r e t u r n a r g s . m a p ( i = > m u l t i p l i e r * i ) ; } c o n s o l e . l o g ( m u l t i p l y ( 1 0 , 1 , 5 , 9 , 8 0 ) ) ; / / [ 1 0 , 5 0 , 9 0 , 8 0 0 ]
  10. Default Parameters The old way: f u n c t

    i o n g e t F a v o r i t e F o o d ( f o o d ) { f o o d = f o o d | | ' p i z z a ' ; r e t u r n f o o d ; } c o n s o l e . l o g ( g e t F a v o r i t e F o o d ( ) ) ; / / ' p i z z a ' The new way: f u n c t i o n g e t F a v o r i t e F o o d ( f o o d = ' p i z z a ' ) { r e t u r n f o o d ; } c o n s o l e . l o g ( g e t F a v o r i t e F o o d ( ) ) ; / / ' p i z z a '
  11. The old way: f u n c t i o

    n P e r s o n ( n a m e ) { t h i s . n a m e = n a m e | | ' J o h n D o e ' ; } ; P e r s o n . p r o t o t y p e . s a y = f u n c t i o n ( m e s s a g e ) { r e t u r n t h i s . n a m e + ' : ' + m e s s a g e ; } ; v a r c h r i s = n e w P e r s o n ( ' C h r i s S c h m i t z ' ) ; c h r i s . s a y ( ' H e y t h e r e ! ' ) ; / / ' C h r i s S c h m i t z : H e y t h e r e ! ' The new way: c l a s s P e r s o n { p u b l i c n a m e : ' J o h n D o e ' ; 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 ; } s a y ( m e s s a g e ) { r e t u r n t h i s . n a m e + ' : ' + m e s s a g e ; } } v a r c h r i s = n e w P e r s o n ( ' C h r i s S c h m i t z ' ) ; c h r i s . s a y ( ' H e y t h e r e ! ' ) ; / / ' C h r i s S c h m i t z : H e y t h e r e ! '
  12. Class Inheritance c l a s s P o l

    y g o n { c o n s t r u c t o r ( h e i g h t , w i d t h ) { t h i s . n a m e = ' P o l y g o n ' ; t h i s . h e i g h t = h e i g h t ; t h i s . w i d t h = w i d t h ; } s a y N a m e ( ) { c o n s o l e . l o g ( ' H i , I a m a ' , t h i s . n a m e + ' . ' ) ; } } c l a s s S q u a r e e x t e n d s P o l y g o n { c o n s t r u c t o r ( l e n g t h ) { s u p e r ( l e n g t h , l e n g t h ) ; t h i s . n a m e = ' S q u a r e ' ; } g e t a r e a ( ) { r e t u r n t h i s . h e i g h t * t h i s . w i d t h ; } } v a r s = n e w S q u a r e ( 5 ) ; s . s a y N a m e ( ) ; / / ' H i , I a m a s q u a r e . ' c o n s o l e . l o g ( s . a r e a ) ; / / 2 5
  13. / / p o i n t . j s

    m o d u l e " p o i n t " { e x p o r t c l a s s P o i n t { c o n s t r u c t o r ( x , y ) { p u b l i c x = x ; p u b l i c y = y ; } } } / / a p p . j s m o d u l e p o i n t f r o m " / p o i n t . j s " ; i m p o r t P o i n t f r o m " p o i n t " ; v a r o r i g i n = n e w P o i n t ( 0 , 0 ) ;
  14. Maps The old way: v a r m a p

    = { a : 1 , b : 2 , c : 3 } ; f o r ( v a r k i n m a p ) { i f ( m a p . h a s O w n P r o p e r t y ( k ) ) { c o n s o l e . l o g ( m a p [ k ] ) ; } } / / 1 2 3 The new way: v a r m a p = n e w M a p ; m a p . s e t ( " a " , 1 ) ; m a p . s e t ( " b " , 2 ) ; m a p . s e t ( " c " , 3 ) ; f o r ( v a r v i n m a p . v a l u e s ( ) ) { c o n s o l e . l o g ( v ) ; } / / 1 2 3
  15. Sets v a r m y S e t =

    n e w S e t ( ) ; m y S e t . a d d ( 1 ) ; m y S e t . a d d ( 5 ) ; m y S e t . a d d ( " s o m e t e x t " ) ; m y S e t . h a s ( 1 ) ; / / t r u e m y S e t . h a s ( 3 ) ; / / f a l s e m y S e t . h a s ( 5 ) ; / / t r u e m y S e t . h a s ( M a t h . s q r t ( 2 5 ) ) ; / / t r u e m y S e t . h a s ( " S o m e T e x t " . t o L o w e r C a s e ( ) ) ; / / t r u e m y S e t . s i z e ; / / 3 m y S e t . d e l e t e ( 5 ) ; m y S e t . h a s ( 5 ) ; / / f a l s e m y S e t . s i z e ; / / 2
  16. l e t l o n g F n =

    f u n c t i o n ( ) { r e t u r n n e w P r o m i s e ( f u n c t i o n ( 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 , 1 0 0 0 ) ; } ) ; } ; l o n g F n ( ) . t h e n ( f u n c t i o n ( ) { / / d o s o m e t h i n g a f t e r 1 , 0 0 0 m i l l i s e c o n d s } ) ;
  17. f u n c t i o n * t

    i c k e t 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 ; } v a r t a k e A N u m b e r = t i c k e t G e n e r a t o r ( ) ; t a k e A N u m b e r . n e x t ( ) ; / / { v a l u e : 1 , d o n e : f a l s e } t a k e A N u m b e r . n e x t ( ) ; / / { v a l u e : 2 , d o n e : f a l s e } t a k e A N u m b e r . n e x t ( ) ; / / { v a l u e : 3 , d o n e : f a l s e } t a k e A N u m b e 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 }
  18. f u n c t i o n s y

    n c ( g e n ) { v a r i t e r a b l e , r e s u m e ; r e s u m e = f u n c t i o n ( r e s p o n s e ) { i t e r a b l e . n e x t ( r e t V a l ) ; / / g e t s r e t u r n e d a n d a s s i g n e d } ; / / k i c k s t h i n g s o f f i t e r a b l e = g e n ( r e s u m e ) ; i t e r a b l e . n e x t ( ) ; } s y n c ( f u n c t i o n * ( r e s u m e ) { v a r x = f i r s t A s y n c ( r e s u m e ) ; v a r y = s e c o n d A s y n c ( r e s u m e ) ; v a r z = t h i r d A s y n c ( r e s u m e ) ; / / d o s o m e t h i n g w i t h y o u r d a t a } ) ;
  19. f u n c t i o n c r

    e a t e D e f e n s i v e O b j e c t ( t a r g e t ) { r e t u r n n e w P r o x y ( t a r g e t , { g e t : f u n c t i o n ( t a r g e t , p r o p e r t y ) { i f ( p r o p e r t y i n t a r g e t ) { r e t u r n t a r g e t [ p r o p e r t y ] ; } e l s e { t h r o w n e w R e f e r e n c e E r r o r ( " P r o p e r t y \ " " + p r o p e r t y + " \ " d o e s n o t e x i s t . " ) ; } } } ) ; } v a r d e f e n s i v e P e r s o n = c r e a t e D e f e n s i v e O b j e c t ( { n a m e : " C h r i s S c h m i t z " } ) ; c o n s o l e . l o g ( d e f e n s i v e P e r s o n . n a m e ) ; / / " C h r i s S c h m i t z " c o n s o l e . l o g ( d e f e n s i v e P e r s o n . a g e ) ; / / ! ! E R R O R ! !
  20. The old way: v a r p e r s

    o n = { n a m e : ' C h r i s S c h m i t z ' } , t e m p l a t e = ' M y n a m e i s ' + p e r s o n . n a m e + ' . ' ; c o n s o l e . l o g ( t e m p l a t e ) ; / / ' M y n a m e i s C h r i s S c h m i t z ' ; The new way: v a r p e r s o n = { n a m e : ' C h r i s S c h m i t z ' } , t e m p l a t e = ` M y n a m e i s $ { p e r s o n . n a m e } . ` ; c o n s o l e . l o g ( t e m p l a t e ) ; / / ' M y n a m e i s C h r i s S c h m i t z ' ;