ECMAScript 6 - Introduction

Introduction in ECMAScript 6 / 2015 containgin:
- Ideas behind the scenes of creating new language
- Modules

Syntax:
- Object enhancement
- Destructuring
- Spread operator
- let & const

Functions:
- Classes
- Arrow functions
- Lexical scope
- Default parameters
- Rest parameter

Compilers

Transcript

1. ECMAScript 6 Drama in 5 acts Piotr Lewandowski 20.03.2015
2. All temporary solutions become final Act 1 - Preludium
3. ES 4
4. ES 4 ES 6
5. ES 4 ES 6 ES 2015
6. Make JavaScript better for complex application for libraries as target of code generators
7. Pave the Cowpaths and don't break the web
9. Modules Act 2
10. Design goals Compact syntax Support cyclic dependencies Asynchronous loading Configurable
11. Design goals Compact syntax Support cyclic dependencies Asynchronous loading Configurable / / l i b / m a t h . j s e x p o r t f u n c t i o n s u m ( x , y ) { r e t u r n x + y ; } e x p o r t v a r p i = 3 . 1 4 1 5 9 3 ; / / a p p . j s i m p o r t * a s m a t h f r o m " l i b / m a t h " ; m a t h . s u m ( 2 2 , 2 0 ) ; / / 4 2
12. / / D e f a u l t e x p o r t s a n d n a m e d e x p o r t s i m p o r t m y L i b f r o m ' s r c / m y l i b ' ; i m p o r t { f u n c t i o n 1 , f u n c t i o n 2 } f r o m ' s r c / m y l i b ' ; Importing
13. / / D e f a u l t e x p o r t s a n d n a m e d e x p o r t s i m p o r t m y L i b f r o m ' s r c / m y l i b ' ; i m p o r t { f u n c t i o n 1 , f u n c t i o n 2 } f r o m ' s r c / m y l i b ' ; Importing / / R e n a m i n g : i m p o r t n a m e d 1 a s m y N a m e d 1 i m p o r t { f u n c t i o n 1 a s f n , f u n c t i o n 2 } f r o m ' s r c / m y l i b ' ;
14. / / D e f a u l t e x p o r t s a n d n a m e d e x p o r t s i m p o r t m y L i b f r o m ' s r c / m y l i b ' ; i m p o r t { f u n c t i o n 1 , f u n c t i o n 2 } f r o m ' s r c / m y l i b ' ; Importing / / R e n a m i n g : i m p o r t n a m e d 1 a s m y N a m e d 1 i m p o r t { f u n c t i o n 1 a s f n , f u n c t i o n 2 } f r o m ' s r c / m y l i b ' ; / / I m p o r t i n g t h e m o d u l e a s a n o b j e c t / / ( w i t h o n e p r o p e r t y p e r n a m e d e x p o r t ) i m p o r t * a s m y l i b f r o m ' s r c / m y l i b ' ;
15. / / D e f a u l t e x p o r t s a n d n a m e d e x p o r t s i m p o r t m y L i b f r o m ' s r c / m y l i b ' ; i m p o r t { f u n c t i o n 1 , f u n c t i o n 2 } f r o m ' s r c / m y l i b ' ; Importing / / R e n a m i n g : i m p o r t n a m e d 1 a s m y N a m e d 1 i m p o r t { f u n c t i o n 1 a s f n , f u n c t i o n 2 } f r o m ' s r c / m y l i b ' ; / / I m p o r t i n g t h e m o d u l e a s a n o b j e c t / / ( w i t h o n e p r o p e r t y p e r n a m e d e x p o r t ) i m p o r t * a s m y l i b f r o m ' s r c / m y l i b ' ; / / O n l y l o a d t h e m o d u l e , d o n ’ t i m p o r t a n y t h i n g i m p o r t ' s r c / m y l i b ' ;
16. Syntax Act 3
17. Object {} enhancement l e t f i r s t N a m e = ' J o e ' ; l e t l a s t N a m e = ' D o e ' ; l e t p e r s o n = { f i r s t N a m e , [ ' l a s t ' + ' N a m e ' ] : l a s t N a m e , g e t A g e ( ) { r e t u r n 4 2 ; } } ; p e r s o n . f i r s t N a m e / / J o e p e r s o n . l a s t N a m e / / D o e p e r s o n . g e t A g e ( ) / / 4 2 v a r f i r s t N a m e = ' J o e ' ; v a r l a s t N a m e = ' D o e ' ; v a r p e r s o n = { f i r s t N a m e : f i r s t N a m e , g e t A g e : f u n c t i o n ( ) { r e t u r n 4 2 ; } } ; p e r s o n [ ' l a s t ' + ' N a m e ' ] = l a s t N a m e ; p e r s o n . f i r s t N a m e / / J o e p e r s o n . l a s t N a m e / / D o e p e r s o n . g e t A g e ( ) / / 4 2 ES6 ES5
18. Destructuring l e t [ a , , b ] = [ 1 , 2 , 3 ] ;
19. Destructuring l e t [ a , , b ] = [ 1 , 2 , 3 ] ; [ a , b ] = [ b , a ]
20. l e t p e r s o n = { f i r s t N a m e : ' J o e ' , l a s t N a m e : ' D o e ' . a g e : 4 2 } ; l e t { f i r s t N a m e , l a s t N a m e } = p e r s o n ; f i r s t N a m e / / J o e l a s t N a m e / / D o e Destructuring l e t [ a , , b ] = [ 1 , 2 , 3 ] ; [ a , b ] = [ b , a ]
21. Spread operator M a t h . m a x ( . . . [ 1 , 2 , 3 ] ) ; / / t h e s a m e a s M a t h . m a x ( 1 , 2 , 3 ) ;
22. Spread operator M a t h . m a x ( . . . [ 1 , 2 , 3 ] ) ; / / t h e s a m e a s M a t h . m a x ( 1 , 2 , 3 ) ; l e t a r r 1 = [ 0 , 1 , 2 ] ; l e t a r r 2 = [ 3 , 4 , 5 ] ; a r r 1 . p u s h ( . . . a r r 2 ) ;
23. Spread operator M a t h . m a x ( . . . [ 1 , 2 , 3 ] ) ; / / t h e s a m e a s M a t h . m a x ( 1 , 2 , 3 ) ; l e t a r r 1 = [ 0 , 1 , 2 ] ; l e t a r r 2 = [ 3 , 4 , 5 ] ; a r r 1 . p u s h ( . . . a r r 2 ) ; [ h e a d , . . . t a i l ] = [ 1 , 2 , 3 , 4 , 5 ] ;
24. Scope - let & const f u n c t i o n f o o ( ) { a = 1 ; i f ( a ) { v a r a ; l e t b = a + 2 ;
25. Scope - let & const f u n c t i o n f o o ( ) { a = 1 ; i f ( a ) { v a r a ; l e t b = a + 2 ; c o n s o l e . l o g ( b ) ; } c o n s o l e . l o g ( a ) ; c o n s o l e . l o g ( b ) ; }
26. Scope - let & const f u n c t i o n f o o ( ) { a = 1 ; i f ( a ) { v a r a ; l e t b = a + 2 ; c o n s o l e . l o g ( b ) ; } c o n s o l e . l o g ( a ) ; c o n s o l e . l o g ( b ) ; } c o n s o l e . l o g ( b ) ; / / 3 } c o n s o l e . l o g ( a ) ; / / 1 c o n s o l e . l o g ( b ) ; / / R e f e r e n c e E r r o r : ` b ` i s n o t d e f i n e d } f u n c t i o n f o o ( ) { a = 1 ; / / c a r e f u l , ` a ` h a s b e e n h o i s t e d ! i f ( a ) { v a r a ; / / h o i s t e d t o f u n c t i o n s c o p e ! l e t b = a + 2 ; / / ` b ` b l o c k - s c o p e d t o ` i f ` b l o c k !
27. Scope - let & const f u n c t i o n f o o ( ) { a = 1 ; i f ( a ) { v a r a ; l e t b = a + 2 ; c o n s o l e . l o g ( b ) ; } c o n s o l e . l o g ( a ) ; c o n s o l e . l o g ( b ) ; } c o n s o l e . l o g ( b ) ; / / 3 } c o n s o l e . l o g ( a ) ; / / 1 c o n s o l e . l o g ( b ) ; / / R e f e r e n c e E r r o r : ` b ` i s n o t d e f i n e d } f u n c t i o n f o o ( ) { a = 1 ; / / c a r e f u l , ` a ` h a s b e e n h o i s t e d ! i f ( a ) { v a r a ; / / h o i s t e d t o f u n c t i o n s c o p e ! l e t b = a + 2 ; / / ` b ` b l o c k - s c o p e d t o ` i f ` b l o c k ! i f ( t r u e ) { c o n s t f o o = " f o o " ; / / e r r o r f o o = " b a r " ; }
28. Functions Act 4
29. Classes c l a s s P o i n t { c o n s t r u c t o r ( x , y ) { t h i s . x = x ; t h i s . y = y ; } t o S t r i n g ( ) { r e t u r n ' ( ' + t h i s . x + ' , ' + t h i s . y + ' ) ' ; } }
30. Classes c l a s s P o i n t { c o n s t r u c t o r ( x , y ) { t h i s . x = x ; t h i s . y = y ; } t o S t r i n g ( ) { r e t u r n ' ( ' + t h i s . x + ' , ' + t h i s . y + ' ) ' ; } } c l a s s C o l o r P o i n t e x t e n d s P o i n t { c o n s t r u c t o r ( x , y , c o l o r ) { s u p e r ( x , y ) ; t h i s . c o l o r = c o l o r ; } t o S t r i n g ( ) { r e t u r n s u p e r . t o S t r i n g ( ) + ' i n ' + t h i s . c o l o r ; } }
31. Classes c l a s s P o i n t { c o n s t r u c t o r ( x , y ) { t h i s . x = x ; t h i s . y = y ; } t o S t r i n g ( ) { r e t u r n ' ( ' + t h i s . x + ' , ' + t h i s . y + ' ) ' ; } } c l a s s C o l o r P o i n t e x t e n d s P o i n t { c o n s t r u c t o r ( x , y , c o l o r ) { s u p e r ( x , y ) ; t h i s . c o l o r = c o l o r ; } t o S t r i n g ( ) { r e t u r n s u p e r . t o S t r i n g ( ) + ' i n ' + t h i s . c o l o r ; } } l e t c p = n e w C o l o r P o i n t ( 2 5 , 8 , ' g r e e n ' ) ; c p . t o S t r i n g ( ) ; / / ' ( 2 5 , 8 ) i n g r e e n ' c o n s o l e . l o g ( c p i n s t a n c e o f C o l o r P o i n t ) ; / / t r u e c o n s o l e . l o g ( c p i n s t a n c e o f P o i n t ) ; / / t r u e c o n s o l e . l o g ( t y p e o f P o i n t ) ; / / f u n c t i o n
32. Arrow functions ( x , y ) = > x + y
33. Lexical scope c l a s s P e r s o n { c o n s t r u c t o r ( ) { t h i s . n a m e = ' J o e ' ; } / / . . . l o a d ( ) { x h r G e t ( d a t a = > { t h i s . n a m e = d a t a . n a m e ; } ) ; } } f u n c t i o n P e r s o n { t h i s . n a m e = ' J o e ' ; / / . . . t h i s . l o a d = f u n c t i o n ( ) { v a r t h a t = t h i s ; x h r G e t ( f u n c t i o n ( d a t a ) { t h a t . n a m e = d a t a . n a m e ; } ) ; } }
34. Lexical scope vs d o c u m e n t . b o d y . a d d E v e n t L i s t e n e r ( ' c l i c k ' , f u n c t i o n ( e v e n t ) { c o n s o l e . l o g ( e v e n t , t h i s ) / / E v e n t O b j e c t , B o d y E l e m e n t } ) ; d o c u m e n t . b o d y . a d d E v e n t L i s t e n e r ( ' 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 h i s ) / / E v e n t O b j e c t , W i n d o w E l e m e n t ) ;
35. Default parameters f u n c t i o n a d d ( x = 0 , y = 0 ) { r e t u r n x + y ; } f u n c t i o n a d d ( x , y ) { x = x | | 0 ; y = y | | 0 ; r e t u r n x + y ; } ES6 ES5
36. Rest parameter f u n c t i o n f r i e n d s ( . . . f r i e n d s ) { f r i e n d s . f o r E a c h ( f r i e n d = > { / / . . . } } f u n c t i o n f r i e n d s ( ) { v a r f r i e n d s = [ ] . s l i c e . c a l l ( a r g u m e n t s , 1 ) ; f r i e n d s . f o r E a c h ( f u n c t i o n ( f r i e n d ) { / / . . . } } ES6 ES5
37. Can I use it? Act 5 - Final
38. Compilators TypeScript Traceur Babel
39. Compilators TypeScript Traceur Babel for back-end Babel-node for node.js io.js - fork of node.js
40. Stay tuned and check compatibility table http://kangax.github.io/compat-table/es6/
42. Further reading 2ality.com kangax ES6 compatibility table babeljs.io/docs/learn-es6