Data Structures in JavaScript (ES2015)

Slide 1

Slide 1 text

Data Structures in JavaScript Carlos Souza @caike

Slide 2

Slide 2 text

Arrays, Maps and Sets * *

Slide 3

Slide 3 text

Arrays Arrays, Maps and Sets are collections of elements

Slide 4

Slide 4 text

// 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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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}]

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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){ //... }

Slide 10

Slide 10 text

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}

Slide 11

Slide 11 text

Arrays Arrays, Maps and Sets are collections of elements ....and sometimes more than that

Slide 12

Slide 12 text

Maps Arrays, Maps and Sets are collections of key/value pairs,   useful to store simple data

Slide 13

Slide 13 text

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";

Slide 14

Slide 14 text

Slide 15

Slide 15 text

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" );

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

WeakMaps a type of Map where only objects   can be passed as keys

Slide 18

Slide 18 text

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 efﬁcient for objs) TypeError: Invalid value   used as weak map key

Slide 19

Slide 19 text

WeakMaps - Reading (more memory efﬁcient 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

Slide 20

Slide 20 text

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-proﬁling

Slide 21

Slide 21 text

Maps Arrays, Maps and Sets are collections of key/value pairs,   useful to store simple data

Slide 22

Slide 22 text

Arrays, Maps and Sets Sets stores unique values of any type,   primitives or object references.

Slide 23

Slide 23 text

Can't guarantee uniqueness in Array let tags = []; tags.push( "JavaScript" ); tags.push( "Web" ); tags.push( "Web" ); tags.length; // 3

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Sets - Creating let tags = new Set(); tags.add( "JavaScript" ); tags.add( "Web" ); tags.add( "Programming" ); tags.add( { version: "2015" } ); tags.size; // 4

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

WeakSets a type of Set where only objects   can be passed as keys

Slide 28

Slide 28 text

WeakSets - Creating TypeError: Invalid value   used in weak set let tags = new WeakSet(); tags.add( { version: "2015" } ); tags.add( "JavaScript" );

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

// 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-proﬁling Set vs WeakSet

Slide 31

Slide 31 text

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 );

Slide 32

Slide 32 text

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" ); }

Slide 33

Slide 33 text