Estruturas de Dados na Prática

Esta palestra aborda estruturas de dados nativas do JavaScript e como podemos usá-las de forma a escrever código mais eficiente. Apresentada no CEJS em Fortelza, Ceará.

Transcript

1. Carlos Souza 
 Code School Estruturas de Dados Na Prática @caike
2. Moro aqui Nasci aqui Morei aqui
3. Estruturas de dados, Sistemas de tipos (type systems) e como escrever JavaScript "that doesn't suck".
5. JavaScript no cliente, servidor e celular.
6. Arrays, Objects, Maps, and Sets
7. Estruturas de Dados * da melhor maneira possível e com o menor desperdício de tempo e esforço. como organizar dados de forma a serem usados de maneira eficiente*.
8. Coleção de elementos Arrays, Objects, Maps, and Sets Arrays
9. let names = ["Sam", "Tyler", "Brook"]; let temperatures = [90, 89, 88, 87]; Arrays - Criando // tudo é string // tudo é número
10. Arrays - Misturando Tipos let radioStations = [95.5, "Jovem Pan 94.70"]; // misturando números e strings
11. Arrays - Misturando Tipos let activeUsers = ["Sam", 10, "Tyler", 15]; // misturando números e strings
12. Quando dá erro // misturando números e strings let radioStations = [101.1, 98.1, "Jovem Pan 94.70", 107.7]; let minAndMax = findMinAndMax( radioStations ) console.log( minAndMax ); // [98.1, 107.7]; console.log( parseFloat("94.70") ); // 94.70 console.log( parseFloat("Jovem Pan 94.70") ); // NaN
13. • Tipagem Estática • Compilada Go(lang)
14. Sistema de Tipos regras para operações e manipulações de tipos de dados
15. TypeScript, Flow, Elm, Dart
16. Lembra aquele erro ? // misturando números e strings let radioStations = [101.1, 98.1, "Jovem Pan 94.70", 107.7]; let minAndMax = findMinAndMax( radioStations ) console.log( minAndMax ); // [98.1, 107.7];
17. // use sempre números let radioStations = [101.1, 98.1, 80.2, 107.7]; Arrays - Criando // ou sempre strings let radioStations = ["101.1", "98.1", "80.2", "107.7"]; let minAndMax = findMinAndMax( radioStations ) console.log( minAndMax ); // [80.2, 107.7]; let minAndMax = findMinAndMax( radioStations ) console.log( minAndMax ); // ["80.2", "107.7"];
18. Arrays - Lendo // Acessando via index let names = ["Sam", "Tyler", "Brook"]; console.log( names[0] ); // Sam console.log( names[1] ); // Tyler console.log( names[2] ); // Brook // Destructuring let [first] = names; console.log( first ); // Sam let [first, second] = names; console.log( first, second ); // Sam Tyler
19. Arrays - Lendo // Array Destructuring + Rest Parameters let names = ["Sam", "Tyler", "Brook"];
 let [first, ...theRest] = names; console.log( first, theRest ); // Sam ["Tyler", "Brook"]
 
 
 
 
 // for...of for(let name of names){ console.log( name ); // Sam } // Tyler // Brook
20. Arrays - Lendo let gitQuestions = [ { command: "git co quick-bug-fix", points: 10 }, { command: "git log -p app.js" , points: 15 }, ]; let [firstQ, ...theRestQ] = gitQuestions; console.log( firstQ, theRestQ ); // {"command":"git co quick-bug-fix","points":10} // [{"command":"git log -p app.js","points":15}]
21. Arrays - Lendo let gitQuestions = [ { command: "git co quick-bug-fix", points: 10 }, { command: "git log -p app.js" , points: 15 }, ]; for(let question of gitQuestions){ let command = question.command; let points = question.points; console.log( `command: ${command}\npoints: ${points}\n` ); } // command: git co quick-bug-fix // points: 10 // command: git log -p app.js // points: 15
22. Arrays - Lendo let gitQuestions = [ { command: "git co quick-bug-fix", points: 10 }, { command: "git log -p app.js" , points: 15 }, ]; // Object Destructuring
 for(let question of gitQuestions){ let { command, points } = question; //... } for(let { command, points } of gitQuestions){ //... }
23. Arrays - Dobrando as Regras gitQuestions.totalPoints = getTotalPoints(); for(let question of gitQuestions){ console.log( question ); } // {"command":"git co quick-bug-fix","points":10} // {"command":"git log -p app.js","points":15} console.log( gitQuestions.totalPoints ); // 25 let gitQuestions = [ { command: "git co quick-bug-fix", points: 10 }, { command: "git log -p app.js" , points: 15 }, ];
25. ...e um pouco mais do que isso Arrays, Objects, Maps, and Sets Arrays Coleção de elementos
26. Propriedades e comportamento Arrays, Objects, Maps, and Sets Objects
27. Arrays, Objects, Maps, and Sets Objects Propriedades e comportamento Utilizados de forma errada como key/value stores.
28. A Guitar Store with Reviews Guitar object reviews
29. Maps with objects is a bad idea let guitarReviews = {}; let sg = { company: "Gibson", model: "SG" }; let strat = { company: "Tonante", model: "Stratocaster" }; 
 guitarReviews[strat]; // ["Bad", "Terrible", "Awful"]; guitarReviews[sg] = ["Good", "Great", "Excellent"];
 guitarReviews[strat] = ["Bad", "Terrible", "Awful"]; guitarReviews[sg]; // ["Bad", "Terrible", "Awful"];
30. Maps with objects is a bad idea sg === strat // false
 guitarReviews[sg] = ...
 toString(sg) toString(strat) // "[object Object]" // "[object Object]" keys(guitarReviews) // ["[object Object]"] toString(sg) === toString(strat) // true guitarReviews[strat] = ... let guitarReviews = {}; let sg = { company: "Gibson", model: "SG" }; let strat = { company: "Tonante", model: "Stratocaster" }; 

31. Não devem ser utilizados como key/value stores. Arrays, Objects, Maps, and Sets Objects
32. http://www.devthought.com/2012/01/18/an-object-is-not-a-hash/
33. Arrays, Objects, Maps, and Sets Maps Coleções de key/value pairs.
34. Maps - Criando let sg = { company: "Gibson", model: "SG" }; let strat = { company: "Tonante", model: "Stratocaster" }; 
guitarReviews.set( sg, ["Good", "Great", "Excellent"] )
 guitarReviews.set( strat, ["Bad", "Terrible", "Awful"] ); let guitarReviews = 
 new Map();
35. Maps - Lendo let guitarReviews = new Map(); let sg = { company: "Gibson", model: "SG" }; let strat = { company: "Tonante", model: "Stratocaster" }; guitarReviews.set( sg, ["Good", "Great", "Excellent"] )
 guitarReviews.set( strat, ["Bad", "Terrible", "Awful"] ); guitarReviews.get( strat ); // ["Bad", "Terrible", "Awful"] guitarReviews.get( sg ); // ["Good", "Great", "Excellent"]
36. WeakMaps Tipos de Map onde apenas objects
 podem ser usados como keys.
37. WeakMaps - Criando let guitarReviews = new WeakMap(); let sg = { company: "Gibson", model: "SG" }; let strat = { company: "Tonante", model: "Stratocaster" }; guitarReviews.set( sg, ["Good", "Great", "Excellent"] );
 guitarReviews.set( strat, ["Bad", "Terrible", "Awful"] ); TypeError: Invalid value 
 used as weak map key guitarReviews.set( "tele", ["Ok", "Decent"] );
38. WeakMaps - Lendo (more memory efficient for objs) let guitarReviews = new WeakMap(); let sg = { company: "Gibson", model: "SG" }; let strat = { company: "Tonante", model: "Stratocaster" }; guitarReviews.set( sg, ["Good", "Great", "Excellent"] );
 guitarReviews.set( strat, ["Bad", "Terrible", "Awful"] ); guitarReviews.get( sg ); // ["Good", "Great", "Excellent"] guitarReviews.get( strat ); // ["Bad", "Terrible", "Awful"] strat sg sempre use WeakMaps quando as keys forem objects garbage collector
39. Map vs WeakMap // let map = new Map(); // or // let map = new WeakMap();
 const MAX_LOOP = 50000; function runBenchmark(){ for(let i=0; i < MAX_LOOP; i++){ let item = { number: i }; map.set( item, "item" ); } } runBenchmark();
40. Map vs WeakMap // let map = new Map(); // or // let map = new WeakMap();
 const MAX_LOOP = 100000; function runBenchmark(){ for(let i=0; i < MAX_LOOP; i++){ let item = { number: i }; map.set( item, "item" ); } } runBenchmark();
41. Map vs WeakMap // let map = new Map(); // or // let map = new WeakMap();
 const MAX_LOOP = 1000000; function runBenchmark(){ for(let i=0; i < MAX_LOOP; i++){ let item = { number: i }; map.set( item, "item" ); } } runBenchmark();
42. Arrays, Objects, Maps, and Sets Maps Coleções de key/value pairs.
43. Arrays, Objects, Maps, and Sets Sets Armazena valores únicos de qualquer tipo.
44. Array - Aceita valores repetidos let tags = []; tags.push( "JavaScript" ); tags.push( "Web" ); tags.push( "Web" ); tags.length; // 3
45. let tags = new Set(); tags.add( "JavaScript" ); tags.add( "Web" ); tags.add( "Web" ); tags.size; // 2 Sets - Criando primitivos repetidos não são adicionados
46. let tags = new Set(); tags.add( "JavaScript" ); tags.add( "Web" ); tags.add( "Programming" ); tags.add( { version: "2015" } );
 tags.add( { version: "2015" } ); tags.size; // 5 Sets - Criando objetos repetidos são adicionados // não misture tipos
47. Sets - Lendo let tags = new Set(); tags.add( "JavaScript" ); tags.add( "Web" ); tags.add( "Programming" ); // for...of for(let tag of tags){ console.log( tag ); // JavaScript } // Web // Programming // destructuring
 let [a,b,c] = tags; console.log( a, b, c ); 
 // JavaScript Web Programming
48. WeakSets um Set onde apenas objetos podem ser utilizados como key
49. WeakSets - Criando TypeError: Invalid value 
 used in weak set let tags = new WeakSet(); tags.add( { version: "2015" } ); tags.add( "JavaScript" );
50. WeakSets - "Lendo" let guitars = new WeakSet(); 
 let sg = { model: "SG" }; let lesPaul = { model: "Les Paul" }; let nighthawk = { model: "Nighthawk" }; 
 guitars.add( sg ); guitars.add( lesPaul ); guitars.has( sg ); // true guitars.has( lesPaul ); // true guitars.has( nighthawk ); // false lesPaul sg garbage collector
51. WeakSets - "Lendo" na prática let sg = { model: "SG" }; let lesPaul = { model: "Les Paul" }; let nighthawk = { model: "Nighthawk" }; let sold = new WeakSet(); sold.add( sg ); sold.add( lesPaul );
52. WeakSets - "Lendo" na prática sold guitar is it here ? is it here ? is it here ? guitar guitar let sg = { model: "SG" }; let lesPaul = { model: "Les Paul" }; let nighthawk = { model: "Nighthawk" }; let sold = new WeakSet(); sold.add( sg ); sold.add( lesPaul ); // checking against WeakSet if( sold.has(sg) ){ console.log( "sold" ); } if( !sold.has(nighthawk) ){ console.log( "not sold" ); } Immutable!
53. Arrays, Objects, Maps, and Sets Armazena valores únicos de qualquer tipo. Sets
54. Arrays, Objects, Maps, and Sets
56. Carlos Souza 
 Code School Estruturas de Dados Na Prática @caike https://www.flickr.com/photos/xtyler/3108575590