v a r l e t i = ' a l p h a ' ; . . . f o r ( l e t i = 0 ; i < 1 0 ; i + + ) { . . . } / / i = = = ' a l p h a ' . . . i f ( i = = = ' a l p h a ' ) { l e t i = 1 0 ; . . . } / / i = = ' a l p h a ' / * C A V E A T : n o h o i s t i n g c h a r a c t e r i s t i c s ! * / i f ( c o n d i t i o n ) { c o n s o l e . l o g ( v a l u e ) ; / / R e f e r e n c e E r r o r ! l e t v a l u e = " b l u e " ; }
be initialized at declaration c o n s t M A X _ I T E M S = 3 0 ; c o n s t N A M E ; / / S y n t a x e r r o r : m i s s i n g i n i t i a l i z a t i o n constants are block scoped i f ( c o n d i t i o n ) { c o n s t M A X _ I T E M S = 5 ; . . . }
o n r e n d e r ( o b j , o p t i o n s = g e t D e f a u l t s ( ) ) { / / e s 5 : o p t i o n s = o p t i o n s | | g e t D e f a u l t s ( ) ; . . . } . . . r e n d e r ( m y O b j ) ; / / - > r e n d e r ( m y O b j , g e t D e f a u l t R e n d e r O p t i o n s ( ) ) caveat : u n d e f i n e d will be replaced by default parameter f u n c t i o n r e n d e r ( o b j , o p t i o n s = g e t D e f a u l t s ( ) , c a l l b a c k ) { . . . } r e n d e r ( m y O b j , u n d e f i n e d , m y C a l l b a c k ) ; / / - > r e n d e r ( m y O b j , g e t D e f a u l t s ( ) , m y C a l l b a c k )
r r a y instead of a r g u m e n t s f u n c t i o n f o o ( f i r s t , . . . r e s t ) { r e t u r n r e s t . c o n c a t ( ' l a s t ' ) ; } c o n s o l e . l o g ( f o o ( 1 , 2 , 3 ) ) ; / / - > [ 2 , 3 , ' l a s t ' ] caveat : no other named arguments can follow in function declaration f u n c t i o n f o o ( f i r s t , . . . n u m b e r s , l a s t ) { / / - > S y n t a x e r r o r : C a n ' t h a v e a n a m e d p a r a m e t e r a f t e r r e s t p a r a m e t e r s
v = [ 2 5 , 5 0 ] , m a x ; m a x = M a t h . m a x ( . . . v ) ; / / e s 5 : M a t h . m a x ( v [ 0 ] , v [ 1 ] ) ; m a x = M a t h . m a x ( 1 7 , . . . v , 2 7 ) ; / / e s 5 : M a t h . m a x ( 1 7 , v [ 0 ] , v [ 1 ] , 2 7 ) ; a r r a y 2 . p u s h ( . . . v ) ; / / e s 5 : a r r a y 2 . p u s h ( v [ 0 ] , v [ 1 ] ) ; Tip : convert array like structures into a true A r r a y on the fly [ . . . d o c u m e n t . q u e r y S e l e c t o r A l l ( " d i v . b i g " ) ] . f o r E a c h ( / / j Q u e r y ( ' d i v . b i g ' ) e l m = > e l m . c l a s s L i s t . r e m o v e ( ' b i g ' ) / / . r e m o v e C l a s s ( ' b i g ' ) ) ;
n c t i o n c r e a t e P e r s o n ( n a m e , a g e ) { r e t u r n { n a m e , / / e s 5 : n a m e : n a m e , f a m i l y N a m e , / / e s 5 : f a m i l y N a m e : f a m i l y N a m e , f u l l N a m e ( ) { / / e s 5 : f u l l N a m e : f u n c t i o n ( ) { r e t u r n t h i s . n a m e + ' ' + t h i s . f a m i l y N a m e ; } } ; Compound property names v a r p r o p e r t y = " f o o " , v a l u e = " b a r " ; v a r o b j = { / / e s 5 : v a r o b j = { } ; [ p r o p e r t y + ' _ b a r ' ] : v a l u e / / o b j [ p r o p e r t y + ' _ b a r ' ] = v a l u e ; }
a y 's [ a , b ] = [ b , a ] ; / / e s 5 : l e t t m p = a ; a = b ; b = t m p ; l e t [ x , y ] = f ( ) ; / / - > f ( ) r e t u r n s a n a r r a y [ 2 ] c o n s o l e . l o g ( ' x = ' , x , ' , y = ' + y ) ; / / e s 5 : v a r m a t c h = / ( \ d + ) - ( d + ) - ( \ d + ) / . m a t c h ( ' 2 0 1 4 - 6 - 3 0 ' ) ; / / v a r y e a r = m a t c h [ 1 ] , m o n t h = m a t c h [ 2 ] , d a y = m a t c h [ 3 ] ; l e t [ , y e a r , m o n t h , d a y ] = / ( \ d + ) - ( \ d + ) - ( \ d + ) / . m a t c h ( ' 2 0 1 4 - 6 - 3 0 ' ) ; syntactic sugar for O b j e c t 's v a r { p r o t o c o l , h o s t n a m e , p o r t } = d o c u m e n t . l o c a t i o n ; / / d i r e c t m a p p i n g v a r { h o s t n a m e : s e r v e r , p o r t } = d o c u m e n t . l o c a t i o n ; / / m a p p e d t o { s e r v e r , p o r t }
n a m e } ` Template strings featuring multiline strings and expression substitution l e t u r l = " h t t p : / / e x a m p l e . c o m " ; l e t d e c o r a t i o n = { / * t a r g e t : " _ b l a n k " , * / l a b e l : " e x a m p l e " } ; l e t a n c h o r = ` < a u r l = " $ { u r l } " t a r g e t = " $ { d e c o r a t i o n . t a r g e t | | ' b l a n k ' } " > $ { d e c o r a t i o n . l a b e l } < / a > ` ; Tag can be used for custom DSL building (real world example : XRegExp - multiline regular expression definition) f u n c t i o n s a f e h t m l ( l i t e r a l s , . . . v a l u e s ) { / / p r o c e s s e v a l u a t e d l i t e r a l s a n d v a l u e s a n r e t u r n a s a f e h t m l e n c o d e d s t r i n g . . . } l e t a n c h o r = s a f e h t m l ` < a u r l = " $ { u r l } " t a r g e t = " $ { d e c o r a t i o n . t a r g e t | | ' b l a n k ' } " > $ { d e c o r a t i o n . l a b e l } < / a > ` ;
r y ( " b u t t o n " ) . o n ( " 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 a r g e t ) ) ; l e t b a s e = ( ) = > d o c u m e n t . l o c a t i o n . h r e f ; / / n o a r g u m e n t s r e q u i r e p a r e n t h e s i s c o n s o l e . l o g ( b a s e ( ) ) ; l e t t o U p p e r = s = > s . t o U p p e r C a s e ( ) ; / / s i n g l e a r g u m e n t r e q u i r e d o e s n t r e q u i r e p a r e n t h e s i s c o n s o l e . l o g ( t o U p p e r ( " h u h u " ) ) ; / / " H U H U " v a r v a l u e s = [ 9 , 7 , 1 , 5 ] ; / / m u l t i p l e a r g u m e n t s r e q u i r e p a r e n t h e s i s v a l u e s . s o r t ( ( a , b ) = > a - b ) ; / / = > [ 1 , 5 , 7 , 9 ] ; v a l u e s . s o r t ( ( a , b ) = > { / / t r a d i t i o n a l s t y l e d a r r o w f u n c t i o n w i t h r e t u r n s t a t e m e n t r e t u r n a - b ; } ) ; *Implicit t h i s binding to definition scope. c a l l ( ) , a p p l y ( ) , b i n d ( ) will have no effect. Arrow functions cannot be used with n e w .
f . . . ) statement A r r a y , I t e r a t o r /I t e r a b l e support f o r ( l e t v o f [ 1 , 3 , 5 , 7 ] ) { . . . f o r ( l e t [ i n d e x , v a l u e ] o f [ " a " , " b " , " c " ] . e n t r i e s ( ) ) { . . . A r r a y , I t e r a t o r /I t e r a b l e comprehension l e t s q u a r e d = [ f o r ( x o f [ 1 , 2 , 3 ] ) x * x ] ; / / - > [ 1 , 4 , 9 ] l e t s q u a r e d O d d = [ f o r ( x o f [ 1 , 2 , 3 ] ) i f ( x % 2 ) x * x ] ; / / - > [ 1 , 9 ] l e t v = [ f o r ( [ i n d e x , v a l u e ] o f [ " a " , " b " , " c " ] . e n t r i e s ( ) ) [ v a l u e . t o U p p e r C a s e ( ) , i n d e x ] ] ; / / v = [ [ " A " , 0 ] , [ " B " , 1 ] , [ " C " , 2 ] ]
* Generator A Generator is a function y i e l d ing an unlimited amount of values wrapped in a automagic I t e r a t o r instance. f u n c t i o n * g e n e r a t e ( ) { l e t i = 0 ; w h i l e ( i < 5 ) { y i e l d i + + ; } } f o r ( l e t v o f g e n e r a t e ( ) ) { / / u s i n g f o r . . . o f s t a t e m e n t c o n s o l e . l o g ( v ) ; / / - > 0 , 1 , 2 , 3 , 4 } l e t i t e r = g e n e r a t e ( ) , n e x t ; / / u s i n g w h i l e s t a t e m e n t w h i l e ( ! ( n e x t = i t e r . n e x t ( ) ) . d o n e ) { c o n s o l e . l o g ( n e x t . v a l u e ) ; / / - > 0 , 1 , 2 , 3 , 4 }
* Generator y i e l d * delegates control to another G e n e r a t o r f u n c t i o n * w a l k ( n o d e ) { f o r ( l e t c h i l d o f n o d e . c h i l d r e n ( ) ) { y i e l d * w a l k ( c h i l d ) ; } y i e l d n o d e ; } f o r ( l e t n o f w a l k ( r o o t ) ) { c o n s o l e . l o g ( n ) ; }
* Generator Passing arguments between consumer and I t e r a t o r around f u n c t i o n * s u m m a r i z e ( s u m = 0 ) { w h i l e ( t r u e ) { s u m + = y i e l d s u m ; c o n s o l e . l o g ( s u m ) ; } } l e t t o t a l = s u m m a r i z e ( 1 0 ) ; t o t a l . n e x t ( ) ; f o r ( l e t v o f [ 1 , 3 , 6 ] ) { t o t a l . n e x t ( v ) ; } / / " 1 1 " , " 1 4 " , " 2 0 "
* Generator Bonus : use y i e l d * to execute async functions sequential ! f u n c t i o n s p a w n ( g e n ) { v a r i t e r = g e n ( m s g = > i t e r . n e x t ( m s g . t o U p p e r C a s e ( ) ) ) ; i t e r . n e x t ( ) ; / / r e s u m e ( a k a s t a r t ) } s p a w n ( f u n c t i o n * ( r e s u m e ) { c o n s o l e . l o g ( " b e f o r e " ) ; c o n s o l e . l o g ( y i e l d s e t T i m e o u t ( ( ) = > r e s u m e ( " h e l l o " ) , 1 0 0 0 ) ) ; / / s u s p e n d c o n s o l e . l o g ( y i e l d s e t T i m e o u t ( ( ) = > r e s u m e ( " w o r l d " ) , 1 0 0 0 ) ) ; / / s u s p e n d c o n s o l e . l o g ( " a f t e r " ) ; } ) ; / / " b e f o r e " / / " H E L L O " / / " W O R L D " / / " a f t e r "
a s s P o s i t i o n { c o n s t r u c t o r ( x , y ) { t h i s . d a t a = { x , y } ; } s e t x ( x ) { t h i s . d a t a . x = x ; } g e t x ( ) { r e t u r n t h i s . d a t a . x ; } t o S t r i n g ( ) { r e t u r n ` P o s i t i o n ( = $ { t h i s . x } , $ { t h i s . d a t a . y } ) ` ; } . . . } l e t p = n e w P o s i t i o n ( 0 , 2 0 ) ; p . x = 1 5 ; c o n s o l e . l o g ( ` p i s $ { p } ` ) ; / / " p i s P o s i t i o n ( = 1 5 , 2 0 ) " . . .
. c l a s s S h a p e e x t e n d s P o s i t i o n { c o n s t r u c t o r ( x , y , w i d t h , h e i g h t ) { s u p e r ( x , y ) ; O b j e c t . a s s i g n ( t h i s . d a t a , { w i d t h , h e i g h t } ) ; } g e t d i m e n s i o n ( ) { r e t u r n { w i d t h : t h i s . d a t a . w i d t h , h e i g h t : t h i s . d a t a . h e i g h t } ; } t o S t r i n g ( ) { r e t u r n ` S h a p e ( = $ { s u p e r . t o S t r i n g ( ) } , $ { t h i s . d i m e n s i o n . w i d t h } , $ { t h i s . d i m e n s i o n . h e i g h t } ) ` ; } } l e t s = n e w S h a p e ( 0 , 2 0 , 1 0 0 , 7 0 } ) ; s . x = 1 5 ; s . w i d t h = 5 0 ; c o n s o l e . l o g ( ` s i s $ { s } ` ) ; / / " s i s S h a p e ( = P o s i t i o n ( = 1 5 , 2 0 ) , 5 0 , 7 0 ) " c o n s o l e . l o g ( s i n s t a n c e o f P o s i t i o n , s i n s t a n c e o f S h a p e ) ; / / " t r u e t r u e " Inheritance, s u p e r access
with explicit e x p o r t s, i m p o r t specific exported names from those modules, and keep these name separate. / / l i b / f o o . j s e x p o r t d e f a u l t c l a s s F o o { . . . } e x p o r t c o n s t V E R S I O N = ' 1 . 0 ' ; e x p o r t v a r u t i l = { e s c a p e ( s ) { . . . } } ; / / l i b / b a r . j s e x p o r t f u n c t i o n b a r ( ) { . . . } e x p o r t c o n s t V E R S I O N = ' 1 . 2 ' ; i m p o r t F o o f r o m ' . / l i b / f o o ' ; / / i m p o r t d e f a u l t e x p o r t i m p o r t { u t i l , V E R S I O N a s U T I L _ V E R S I O N } f r o m ' . / l i b / f o o ' ; / / i m p o r t u t i l a s u t i l , V E R S I O N a s U T I L _ V E R S I O N i m p o r t { b a r , V E R S I O N a s B A R _ V E R S I O N } f r o m ' . / l i b / b a r ' ; c o n s o l e . l o g ( U T I L _ V E R S I O N , B A R _ V E R S I O N ) ; / / " 1 . 0 1 . 2 " u t i l . e s c a p e ( " h e l l o w o r l d " ) ;
* ) ES6 defines a module loader interface for loading scripts dynamically (in the browser) < s c r i p t > P r o m i s e . a l l ( [ S y s t e m . i m p o r t ( ' . / l i b / f o o ' ) , S y s t e m . i m p o r t ( ' . / l i b / b a r ' ) ] ) . t h e n ( f u n c t i o n ( [ f o o , b a r ] ) { v a r o b j = n e w f o o . F o o ( ) ; c o n s o l e . l o g ( f o o . V E R S I O N , b a r . V E R S I O N ) ; / / " 1 . 0 1 . 2 " f o o . u t i l . e s c a p e ( " h e l l o w o r l d " ) ; } ) . c a t c h ( e r r ) { t h r o w e ; } ) ; < / s c r i p t >
ES6 partially (see ECMAScript 6 compatibility table) NodeJS supports many ES6 features (- - h a r m o n y flag) es6-shim provides ES6 API for legacy JavaScript engines Native supported ES6 features growing monthly
Traceur is a JavaScript.next-to-JavaScript-of-today compiler that allows you to use future Ecmascript features today. Traceur transpiles most* ES6 + some of ES7 features into today's Javascript (ES5). * except of non shimmable/transpilable features like P r o x y , O b j e c t . o b s e r v e ( ) , new R e g E x p flags ...
be used as commandline tool, Grunt task or GulpJS task : v a r g u l p = r e q u i r e ( ' g u l p ' ) , t r a c e u r = r e q u i r e ( ' g u l p - t r a c e u r ' ) ; g u l p . t a s k ( ' d e f a u l t ' , f u n c t i o n ( ) { r e t u r n g u l p . s r c ( ' s r c / a p p . j s ' ) . p i p e ( t r a c e u r ( { s o u r c e M a p : t r u e } ) ) . p i p e ( g u l p . d e s t ( ' d i s t ' ) ) ; } ) ; supports AMD, CommonJS, SystemJS or all-in-one ES5 code as output. Sourcemap support for easy debugging. provides new ES6 API's (S e t , M a p , P r o m i s e etc.). Compile ES6 on the fly. Testing ES6 today is easy using Mocha/Jasmine and Karma/Protractor : i m p o r t N e s t e d M a p f r o m " . . / . . / s r c / c o r e / n e s t e d m a p " ; d e s c r i b e ( " N e s t e d M a p " , ( ) = > { i t ( " c o n s t r u c t o r " , ( ) = > { l e t n m = n e w N e s t e d M a p ( ) ; e x p e c t ( n m . p a r e n t ) . t o B e N u l l ( ) ; l e t _ n m = n e w N e s t e d M a p ( n m ) ; e x p e c t ( _ n m . p a r e n t ) . t o B e ( n m ) ; } ) ; } ) ;
s t a l l t r a c e u r make Traceur the default JS loader for NodeJS / / t e s t . e s 6 i m p o r t { b } f r o m ' . / r e s o u r c e s / b . e s 6 ' ; c o n s o l e . l o g ( b ) ; / / r e s o u r c e s / b . e s 6 e x p o r t v a r b = ' B B B ' ; / / a p p . j s v a r t r a c e u r = r e q u i r e ( ' t r a c e u r ' ) ; t r a c e u r . r e q u i r e . m a k e D e f a u l t ( f u n c t i o n ( f i l e n a m e ) { r e t u r n f i l e n a m e . e n d s W i t h ( ' . e s 6 ' ) ; } ) ; r e q u i r e ( ' . / t e s t . e s 6 ' ) ;
i p t s r c = " h t t p s : / / t r a c e u r - c o m p i l e r . g o o g l e c o d e . c o m / g i t / b i n / t r a c e u r . j s " t y p e = " t e x t / j a v a s c r i p t " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / t r a c e u r - c o m p i l e r . g o o g l e c o d e . c o m / g i t / s r c / b o o t s t r a p . j s " t y p e = " t e x t / j a v a s c r i p t " > < / s c r i p < s c r i p t > t r a c e u r . o p t i o n s . e x p e r i m e n t a l = t r u e ; < / s c r i p t > < s c r i p t t y p e = " m o d u l e " > c l a s s G r e e t e r { c o n s t r u c t o r ( m e s s a g e ) { t h i s . m e s s a g e = m e s s a g e ; } g r e e t ( ) { d o c u m e n t . q u e r y S e l e c t o r ( ' # m e s s a g e ' ) . i n n e r H T M L = t h i s . m e s s a g e ; } } ; l e t g r e e t e r = n e w G r e e t e r ( ' H e l l o , w o r l d ! ' ) ; g r e e t e r . g r e e t ( ) ; < / s c r i p t > or using already transpiled files : < s c r i p t s r c = " b i n / t r a c e u r - r u n t i m e . j s " > < / s c r i p t > < s c r i p t s r c = " o u t / g r e e t e r . j s " > < / s c r i p t >
vanilla code much improved readability will result in better productivity less legacy dependencies (like jQuery, Underscore etc.) making your code more future proof less code rewrites over the years huge performance speedup when ES6 will be arrived natively at browsers ES6 modules simplify larger applications sourece code management ES6 adaption in browsers and NodeJS is increasing monthly CONTRA using ES6 today in legacy JS engines makes your toolchain more complicated Traceur is just a workaround : transpiled code is larger and slower than it's ES6 source. Native ES6 language features will not be used in generated code ES6 is a huge step requiring learning to use new language features the right way
toolchain is well done (GulpJS, gulp-watch, Traceur, Jasmine/Karma for testing) ES6 is a pleasure to use. Learning curve is steep. Traceur is getting very stable. My guess ES6 will be adapted by most browsers until 2016 - including Internet Explorer. NodeJS will support ES6 mostly in 2014. ES6 features will be adapted very fast by popular NodeJS modules (see Koa as an good ES6 example) because of its massive simplifying async features. Modern browser libraries like AngularJS 2.0 will be based on ES6 (not a guess - reality !) My advise Start learning ! Use it in non critical/inhouse applications/modules to get experienced. Be prepared when everybody supports ES6.
lgersman
karugamo
ttskch
syumai
blueswen
masayaaoyama
uetyo
orgachem
yue4u
dunglas
chencmd
soyuka
kimura_m_29
smashingmag
sugarenia
vanstee
moore
colly
yeseniaperezcruz
paulrobertlloyd
csswizardry
aki_iinuma
sachag
eileencodes
mraible
