Data Structures in JavaScript (ES2015)

Presented at the Orlando JavaScript meetup group.

Transcript

1. Data Structures in JavaScript Carlos Souza @caike
2. Arrays, Maps and Sets * *
3. Arrays Arrays, Maps and Sets are collections of elements
4. // all strings let names = ["Sam", "Tyler", "Brook"]; // all numbers let temperatures = [90, 89, 88, 87]; // mix up let radioStations = [101.1, "XL 106.7"]; // objects let gitQuestions = [ { command: "git co quick-bug-fix", points: 10 }, { command: "git log -p app.js" , points: 15 }, ]; Arrays - Creating
5. Arrays - Reading // Accessing by index let names = ["Sam", "Tyler", "Brook"]; console.log( names[0] ); // Sam console.log( names[1] ); // Tyler console.log( names[2] ); // Brook // Array Destructuring let [first] = names; console.log( first ); // Sam let [first, second] = names; console.log( first, second ); // Sam Tyler
6. Arrays - Reading // 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
7. Arrays - Reading 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}]
8. Arrays - Reading 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
9. Arrays - Reading let gitQuestions = [ //... ]; for(let question of gitQuestions){ let command = question.command; let points = question.points; //... } // Object Destructuring
 for(let question of gitQuestions){ let { command, points } = question; //... } for(let { command, points } of gitQuestions){ //... }
10. Arrays - Bending the Rules gitQuestions.totalPoints = getTotalPoints(); for(let question of gitQuestions){ console.log( question ); } let gitQuestions = [ { command: "git co quick-bug-fix", points: 10 }, { command: "git log -p app.js" , points: 15 }, ]; // {"command":"git co quick-bug-fix","points":10} // {"command":"git log -p app.js","points":15}
11. Arrays Arrays, Maps and Sets are collections of elements ....and sometimes more than that
12. Maps Arrays, Maps and Sets are collections of key/value pairs, 
 useful to store simple data
13. Maps with objects is a bad idea let guitarReviews = {}; let sg = { company: "Gibson", model: "SG" }; let strat = { company: "Tonante", model: "Stratocaster" }; guitarReviews[sg] = "Good";
 guitarReviews[strat] = "Bad";
14. Maps with objects is a bad idea let guitarReviews = {}; let sg = { company: "Gibson", model: "SG" }; let strat = { company: "Tonante", model: "Stratocaster" }; guitarReviews[sg] = "Good";
 guitarReviews[strat] = "Bad"; guitarReviews[sg]; // Bad guitarReviews[strat]; // Bad
15. Maps - Creating let sg = { company: "Gibson", model: "SG" }; let strat = { company: "Tonante", model: "Stratocaster" }; 
 let guitarReviews = new Map(); guitarReviews.set( sg, "Good" )
 guitarReviews.set( strat, "Bad" );
16. Maps - Reading let guitarReviews = new Map(); let sg = { company: "Gibson", model: "SG" }; let strat = { company: "Tonante", model: "Stratocaster" }; guitarReviews.set( sg, "Good" )
 guitarReviews.set( strat, "Bad" ); guitarReviews.get( sg ); // Good guitarReviews.get( strat ); // Bad
17. WeakMaps a type of Map where only objects 
 can be passed as keys
18. WeakMaps - Creating let guitarReviews = new WeakMap(); let sg = { company: "Gibson", model: "SG" }; let strat = { company: "Tonante", model: "Stratocaster" }; guitarReviews.set( sg, "Good" )
 guitarReviews.set( strat, "Bad" ); guitarReviews.set( "tele", "ok" ); (more memory efficient for objs) TypeError: Invalid value 
 used as weak map key
19. WeakMaps - Reading (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" )
 guitarReviews.set( strat, "Bad" ); guitarReviews.get( sg ); // Good guitarReviews.get( strat ); // Bad strat sg always use WeakMaps when all keys are objects garbage collector
20. Map vs WeakMap // let map = new Map(); // or // let map = new WeakMap();
 const MAX_LOOP = 200000; function runBenchmark(){ for(let i=0; i < MAX_LOOP; i++){ let item = { number: i }; map.set( item, "item" ); } } runBenchmark(); https://developer.chrome.com/devtools/docs/javascript-memory-profiling
21. Maps Arrays, Maps and Sets are collections of key/value pairs, 
 useful to store simple data
22. Arrays, Maps and Sets Sets stores unique values of any type, 
 primitives or object references.
23. Can't guarantee uniqueness in Array let tags = []; tags.push( "JavaScript" ); tags.push( "Web" ); tags.push( "Web" ); tags.length; // 3
24. let tags = new Set(); tags.add( "JavaScript" ); tags.add( "Web" ); tags.add( "Web" ); tags.size; // 2 Sets - Creating duplicates are not 
 added to the Set
25. Sets - Creating let tags = new Set(); tags.add( "JavaScript" ); tags.add( "Web" ); tags.add( "Programming" ); tags.add( { version: "2015" } ); tags.size; // 4
26. Sets - Reading let tags = new Set(); tags.add( "JavaScript" ); tags.add( "Web" ); tags.add( "Programming" ); tags.add( { version: "2015" } ); // for...of for(let tag of tags){ console.log( tag ); // JavaScript } // Programming // { version: '2015' } // Web // destructuring
 let [a,b,c,d] = tags; console.log( a, b, c, d ); 
 // JavaScript Programming { version: '2015' } Web
27. WeakSets a type of Set where only objects 
 can be passed as keys
28. WeakSets - Creating TypeError: Invalid value 
 used in weak set let tags = new WeakSet(); tags.add( { version: "2015" } ); tags.add( "JavaScript" );
29. WeakSets - "Reading" 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
30. // let set = new Set(); // or // let set = new WeakSet(); const MAX_LOOP = 200000; function runBenchmark(){ for(let i=0; i < MAX_LOOP; i++){ let item = { number: i }; set.add( item ); } } runBenchmark(); https://developer.chrome.com/devtools/docs/javascript-memory-profiling Set vs WeakSet
31. WeakSets - "Reading" in practice let sg = { model: "SG" }; let lesPaul = { model: "Les Paul" }; let nighthawk = { model: "Nighthawk" }; let sold = new WeakSet(); 
 // add to WeakSet when guitar is sold sold.add( sg ); sold.add( lesPaul );
32. WeakSets - "Reading" in practice 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" ); }
33. Arrays, Maps and Sets Sets stores unique values of any type, 
 primitives or object references.
34. codeschool.com
35. new course coming soon!
36. fivejs.codeschool.com
37. frontendfive.codeschool.com
38. javascript.com
39. Data Structures in JavaScript Carlos Souza @caike