EcmaScript 6 The future of JavaScript By ( ) Chris Schmitz @ccschmitz 

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. 

New Features Syntax Sugar 

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 

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 

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 

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

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 

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

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 

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 ] 

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 ' 

New Features Classes 

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

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 

New Features Modules 

/ / 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 ) ; 

New Features Collections 

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 

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 

New Features Promises 

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 } ) ; 

New Features Generators 

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 } 

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 } ) ; 

New Features Proxies 

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 ! ! 

New Features Template Strings 

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

Using ES6 Today Transpilers by Google Traceur 

THE END By Chris Schmitz chris-schmitz.com