Your SlideShare is downloading. ×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Future of JavaScript (SXSW '07)

2,702

Published on

Andrew Dupont and I discuss improvements to JavaScript available in versions 1.6 and 1.7.

Andrew Dupont and I discuss improvements to JavaScript available in versions 1.6 and 1.7.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,702
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
150
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Andrew & Aaron present: The Future of JavaScript
  • 2. JavaScript 1.6 Based on ECMA-262, edition 3 ● Implemented in Firefox 1.5 ● Added ● ECMAScript for XML (aka E4X; ECMA-357) – Array extras – Array and String generics –
  • 3. Array extras Location methods: ● indexOf() – lastIndexOf() – Iterative methods: ● every() – filter() – forEach() – map() – some() –
  • 4. Iteration examples var ids = [ 1, 2, 3 ]; var els = ids.map( function( i ){ return document.getElementById( 'item_' + i ); } ); for( var i = 0; i < els.length; i++ ){ els[i].style.border = '1px solid'; } and var lis = document.getElementsByTagName( 'li' ); var evenLis = Array.filter( lis, function( li, i ){ return i % 2 == 1; } ); for( var i = 0; i < evenLis.length; i++ ){ evenLis[i].style.background = '#ccc'; }
  • 5. JavaScript 1.7 Based on ECMA-262, edition 3 ● Includes JS1.6 enhancements ● Introduced ● Generators & Iterators – Array comprehensions – Block scope variables – Destructuring assignment –
  • 6. Using JS 1.7 Implemented in Firefox 2 only ● Enable via MIME type: ● <script type="application/javascript;version=1.7"> // code goes here </script> or <script type="application/javascript;version=1.7" » src="/path/to/my.js"></script>
  • 7. Traditional iterative generation for( var i = 1; i < 4; i++ ){ var ul = document.createElement( 'ul' ); for( var j = 1; j <= i; j++ ){ var li = document.createElement( 'li' ); li.appendChild( document.createTextNode( j ) ); ul.appendChild( li ); } document.getElementsByTagName( 'body' » )[0].appendChild( ul ); }
  • 8. Which gives us 1 ● 1 ● 2 ● 1 ● 2 ● 3 ●
  • 9. Optimized iterative generation var $ul = document.createElement( 'ul' ); var $li = document.createElement( 'li' ); for( var i = 1; i < 4; i++ ){ var ul = $ul.cloneNode( true ); for( var j = 1; j <= i; j++ ){ var li = $li.cloneNode( true ); li.appendChild( document.createTextNode( j ) ); ul.appendChild( li ); } document.getElementsByTagName( 'body' » )[0].appendChild( ul ); }
  • 10. Generator-Iterators function $el( tag ){ var el = document.createElement( tag ); while( true ){ yield el.cloneNode( true ); } } var $ul = $el( 'ul' ), $li = $el( 'li' ); for( var i = 1; i < 4; i++ ){ var ul = $ul.next(); for( var j = 1; j <= i; j++ ){ var li = $li.next(); li.appendChild( document.createTextNode( j ) ); ul.appendChild( li ); } document.getElementsByTagName( 'body' » )[0].appendChild( ul ); }
  • 11. Straight Iteration var me = { name: 'Aaron Gustafson', age: 29, 'eye color': 'blue', height: '5ft 11in' }; var it = Iterator( me ); var ul = $ul.next(), li; try{ while( true ){ li = $li.next(); li.appendChild( document.createTextNode( » it.next() ) ); ul.appendChild( li ); } }catch( err if err instanceof StopIteration ){ document.getElementsByTagName( 'body' » )[0].appendChild( ul ); }catch( err ){ alert( 'error: '+err.description ); }
  • 12. Which gives us name,Aaron Gustafson ● age,29 ● eye color,blue ● height,5ft 11in ●
  • 13. Alternation var li = document.getElementsByTagName( 'li' ); for( var i = 0; i < li.length; i++ ){ if( i % 2 == 0 ){ li[i].className = 'even'; } }
  • 14. Generators and array creation function range( start, end ){ for( var i = start; i < end; i++ ){ yield i; } } var li = document.getElementsByTagName( 'li' ); var evens = [i for ( i in range( 0, li.length ) ) » if ( i % 2 ==0 ) ]; for( num in evens ) li[evens[num]].className = 'even';
  • 15. let is the new black Only way we currently get block scope: ● function foo(){ var x = 5; ( function(){ var x = 10; alert( x ); //-> 10 } )(); alert( x ); //-> 5 }
  • 16. let blocks function foo(){ var x = 5; let( x = 10 ){ alert( x ); //-> 10 } alert( x ); //-> 5 } or if you wanna get really crazy ● function foo(){ var x = 5; let( x = x + 5 ){ alert( x ); //-> 10 } alert( x ); //-> 5 }
  • 17. let expressions function foo() { var x = 5; alert( let( x = 10 ) x ); //-> 10 alert( x ); //-> 5 }
  • 18. let in loops for( let i = 0; i < array.length; i++ ) doSomethingWith( array[i] ); alert( i ); //-> undefined or for( let i = 0, subArray; i<array.length; i++ ){ subArray = array[i]; for( let i = 0; i < subArray.length; i++ ) alert( subArray[i] ); }
  • 19. Like a key party in your code Destructuring assignment: ● var a = 1; var b = 2; [a, b]= [b, a]; or var [c, d] = [a, b];
  • 20. Return with greater flexibility We’ve always been able to return arrays ● var result = returnsArray(); var a = result[0]; var b = result[1]; But now ● var [a,b] = returnsArray(); or even var [,b] = returnsArray();
  • 21. That’s not all, let’s play with JSON var me = { name: 'Aaron Gustafson', age: 29, 'eye color': 'blue', height: '5ft 11in' }; var ul = $ul.next(); for( let [ key, value ] in me ){ let li = $li.next(); li.appendChild( document.createTextNode( 'Key: ' + key + ', Value: ' + value ) ); ul.appendChild( li ); } document.getElementsByTagName( 'body' » )[0].appendChild( ul );
  • 22. Resulting in Key: name, Value: Aaron Gustafson ● Key: age, Value: 29 ● Key: eye color, Value: blue ● Key: height, Value: 5ft 11in ●
  • 23. Or iterate safely over an Object Object.prototype.HAHAHA = "I AM THE HASH DESTRUCTOR"; for( let [ key, value ] in me ) alert( key ); /* 'name', 'age', 'eye color', 'height', 'HAHAHA' */ function SafeHashIterator( hash, keysOnly ){ for( let [key, value] in hash ){ if( !hash.hasOwnProperty( key ) ) continue; yield keysOnly ? key : [key, value]; } throw StopIteration; } for( let [key, value] in SafeHashIterator( me ) ) alert( key ); // 'name', 'age', 'eye color', 'height'
  • 24. So why should I care?

×