├── .github └── FUNDING.yml ├── README.md ├── img ├── set_and_array.png └── set_vs_array.png ├── index.html ├── index.js ├── package.json ├── style.css └── tsconfig.json /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [atapas] 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # js-collections-map-set 2 | 3 | Repository for example code to demonstrate JavaScript Map and Set data structures. 4 | 5 | # Set vs Array 6 | set vs array 7 | 8 | # Set + Array = Better Together! 9 | set and array 10 | 11 | -------------------------------------------------------------------------------- /img/set_and_array.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atapas/js-collections-map-set/c4f5b9cf57d2f23306e2b9dc831219446b995c92/img/set_and_array.png -------------------------------------------------------------------------------- /img/set_vs_array.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atapas/js-collections-map-set/c4f5b9cf57d2f23306e2b9dc831219446b995c92/img/set_vs_array.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // Import stylesheets 2 | import './style.css'; 3 | 4 | // Write Javascript code! 5 | const appDiv = document.getElementById('app'); 6 | appDiv.innerHTML = `

Copy the code and see it in Browser Console

`; 7 | 8 | 9 | // Map 10 | 11 | // Initialize a Map 12 | console.log('******** Initialize a Map ********'); 13 | const map = new Map(); 14 | console.log(map); // Map(0) {} 15 | 16 | // Adding values to a Map 17 | console.log('******** Adding values to a Map ********'); 18 | map.set('name', 'greenroots'); 19 | map.set('type', 'blog'); 20 | map.set('owner', 'Tapas Adhikary'); 21 | console.log(map); 22 | 23 | // Getting values from a Map 24 | console.log('******** Getting values from a Map ********'); 25 | console.log(`${map.get('name')} ${map.get('type')} by ${map.get('owner')}`); 26 | 27 | // Initialize a map with values 28 | console.log('******** Initialize a map with values ********'); 29 | const greenrootsBlog = new Map([ 30 | ['name', 'greenroots'], 31 | ['type', 'blog'], 32 | ['owner', 'Tapas Adhikary'], 33 | ]); 34 | console.log(greenrootsBlog); 35 | 36 | // Map Keys 37 | console.log('******** MAP Keys ********'); 38 | const funMap = new Map(); 39 | funMap.set(360, 'My House Number'); 40 | funMap.set(true, 'I write blogs!'); 41 | funMap.set({'name': 'tapas'}, true); 42 | console.log(funMap); 43 | console.log(funMap.get(360)); 44 | console.log(funMap.get('360')); 45 | 46 | const funObj = {}; 47 | funObj[360] = 'My House Number'; 48 | console.log(funObj); 49 | console.log(funObj[360] === funObj['360']); 50 | funObj[{'name': 'tapas'}] = true; 51 | console.log(funObj); 52 | 53 | // add same key twice 54 | funMap.set('name', 'tapas'); 55 | funMap.set('name', 'someone else'); 56 | console.log(funMap); 57 | 58 | // Map built-in properties 59 | console.log('******** Map built-in properties ********'); 60 | console.log('size of the funMap is', funMap.size); 61 | console.log(funMap.has(360)); 62 | console.log(funMap.has('360')); 63 | console.log(funMap.delete('360')); 64 | console.log(funMap.delete(360)); 65 | console.log('size of the funMap is', funMap.size); 66 | funMap.clear(); 67 | console.log(funMap); 68 | 69 | // MapIterator 70 | console.log('******** MapIterator ********'); 71 | const ageMap = new Map([ 72 | ['Jack', 20], 73 | ['Alan', 34], 74 | ['Bill', 10], 75 | ['Sam', 9] 76 | ]); 77 | console.log(ageMap.keys()); 78 | console.log(ageMap.values()); 79 | console.log(ageMap.entries()); 80 | 81 | // Iterating over Map 82 | console.log('******** Iterating over Map ********'); 83 | 84 | // with forEach 85 | ageMap.forEach((value, key) => { 86 | console.log(`${key} is ${value} years old!`); 87 | }); 88 | // with for-of 89 | for(const [key, value] of ageMap) { 90 | console.log(`${key} is ${value} years old!`); 91 | } 92 | 93 | // Object to Map 94 | console.log('******** Object to Map ********'); 95 | const address = { 96 | 'Tapas': 'Bangalore', 97 | 'James': 'Huston', 98 | 'Selva': 'Srilanka' 99 | }; 100 | const addressMap = Object.entries(address); 101 | console.log(addressMap); 102 | 103 | // Map to Object 104 | console.log('******** Map to Object ********'); 105 | console.log(Object.fromEntries(map)); 106 | 107 | // Map to Array 108 | console.log('******** Map to Array ********'); 109 | console.log(Array.from(map)); 110 | console.log([...map]); 111 | 112 | // Set 113 | 114 | // initialize 115 | const set = new Set(); 116 | console.log(set); 117 | 118 | // Initialize with values 119 | const fruteSet = new Set(['🍉', '🍎', '🍈', '🍏']); 120 | console.log(fruteSet); 121 | 122 | // Set methods - Lets make salad! 123 | const saladSet = new Set(); 124 | saladSet.add('🍅'); 125 | saladSet.add('🥑'); 126 | saladSet.add('🥕'); 127 | saladSet.add('🥒'); 128 | console.log(saladSet); 129 | saladSet.add('🥒'); 130 | console.log(saladSet); 131 | console.log('Does the Salad has Carrot?', saladSet.has('🥕')); 132 | console.log('Does the Salad has Broccoli?', saladSet.has('🥦')); 133 | saladSet.delete('🥑'); 134 | console.log('I do not like 🥑, remove from the salad', saladSet); 135 | saladSet.clear(); 136 | console.log('Finished it', saladSet); 137 | 138 | // Iteration with Set 139 | const houseNos = new Set([360, 567, 101]); 140 | console.log(houseNos.keys()); 141 | console.log(houseNos.values()); 142 | console.log(houseNos.entries()); 143 | 144 | houseNos.forEach((value) => { 145 | console.log(value); 146 | }); 147 | 148 | for(const value of houseNos) { 149 | console.log(value); 150 | } 151 | 152 | // set to an array 153 | const arr = [...houseNos]; 154 | console.log(arr); 155 | 156 | // Unique values from array using Set 157 | const mixedFruit = ['🍉', '🍎', '🍉', '🍈', '🍏', '🍎', '🍈',]; 158 | const mixedFruitSet = new Set(mixedFruit); 159 | console.log(mixedFruitSet); 160 | 161 | // Set and object 162 | const person = { 163 | 'name': 'Alex', 164 | 'age': 32 165 | }; 166 | const pSet = new Set(); 167 | pSet.add(person); 168 | console.log(pSet); 169 | person.name = 'Bob'; 170 | pSet.add(person); 171 | console.log(pSet); 172 | 173 | // Set Operations 174 | const first = new Set([1, 2, 3]); 175 | const second = new Set([3, 4, 5]); 176 | 177 | // Union 178 | const union = new Set([...first, ...second]); 179 | console.log('Union', union); 180 | 181 | // Intersection 182 | const intersection = new Set([...first].filter(elem => second.has(elem))); 183 | console.log('Intersection', intersection); 184 | 185 | // Difference 186 | const difference = new Set([...first].filter(elem => !second.has(elem))); 187 | console.log('Difference', difference); 188 | 189 | // Is a superset? 190 | const isSuperset = (set, subset) => { 191 | for (let elem of subset) { 192 | if (!set.has(elem)) { 193 | return false; 194 | } 195 | } 196 | return true; 197 | } 198 | console.log('Is superset', isSuperset(first, second)); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js", 3 | "version": "0.0.0", 4 | "private": true, 5 | "dependencies": {} 6 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | h1, h2 { 2 | font-family: Lato; 3 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext" 4 | } 5 | } --------------------------------------------------------------------------------