ECMAScript 6 - Introduction

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

B48000922680b510078188df438184dd?s=128

Piotr Lewandowski

March 20, 2015
Tweet

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

  8. None
  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/

  41. None
  42. Further reading 2ality.com kangax ES6 compatibility table babeljs.io/docs/learn-es6