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

EcmaScript 6: The Future of JavaScript

EcmaScript 6: The Future of JavaScript

A talk on the new features in ES6.

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 ' ;