30 Days Of JavaScript: Sets and Maps

Twitter Follow Author: Asabeneh Yetayeh
January, 2020
[<< Day 9](../09_Day_Higher_order_functions/09_day_higher_order_functions.md) | [Day 11>>](../11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) ![Day 10](../images/banners/day_1_10.png) - [Day 10](#day-10) - [Set](#set) - [Creating an empty set](#creating-an-empty-set) - [Creating set from array](#creating-set-from-array) - [Adding an element to a set](#adding-an-element-to-a-set) - [Deleting an element a set](#deleting-an-element-a-set) - [Checking an element in the set](#checking-an-element-in-the-set) - [Clearing the set](#clearing-the-set) - [Union of sets](#union-of-sets) - [Intersection of sets](#intersection-of-sets) - [Difference of sets](#difference-of-sets) - [Map](#map) - [Creating an empty Map](#creating-an-empty-map) - [Creating an Map from array](#creating-an-map-from-array) - [Adding values to the Map](#adding-values-to-the-map) - [Getting a value from Map](#getting-a-value-from-map) - [Checking key in Map](#checking-key-in-map) - [Exercises](#exercises) - [Exercises:Level 1](#exerciseslevel-1) - [Exercises:Level 2](#exerciseslevel-2) - [Exercises:Level 3](#exerciseslevel-3) # Day 10 ## Set Set is a collection of elements. Set can only contains unique elements. Let us see how to create a set in the section below. ### Creating an empty set ```js const companies = new Set() console.log(companies) ``` ```sh Set(0) {} ``` ### Creating set from array ```js const languages = [ 'English', 'Finnish', 'English', 'French', 'Spanish', 'English', 'French', ] const setOfLanguages = new Set(languages) console.log(setOfLanguages) ``` ```sh Set(4) {"English", "Finnish", "French", "Spanish"} ``` Set is an iterable object and we can iterate through each elements. ```js const languages = [ 'English', 'Finnish', 'English', 'French', 'Spanish', 'English', 'French', ] const setOfLanguages = new Set(languages) for (const language of setOfLanguages) { console.log(language) } ``` ```sh English Finnish French Spanish ``` ### Adding an element to a set ```js const companies = new Set() // creating an empty set console.log(companies.size) // 0 companies.add('Google') // add element to the set companies.add('Facebook') companies.add('Amazon') companies.add('Oracle') companies.add('Microsoft') console.log(companies.size) // 5 elements in the set console.log(companies) ``` ```sh Set(5) {"Google", "Facebook", "Amazon", "Oracle", "Microsoft"} ``` We can also use loop to add element to a set. ```js const companies = ['Google', 'Facebook', 'Amazon', 'Oracle', 'Microsoft'] setOfCompanies = new Set() for (const company of companies) { setOfCompanies.add(company) } ``` ```sh Set(5) {"Google", "Facebook", "Amazon", "Oracle", "Microsoft"} ``` ### Deleting an element a set We can delete an element from a set using a delete method. ```js console.log(companies.delete('Google')) console.log(companies.size) // 4 elements left in the set ``` ### Checking an element in the set The has method can help to know if a certain element exists in a set. ```js console.log(companies.has('Apple')) // false console.log(companies.has('Facebook')) // true ``` ### Clearing the set It removes all the elements from a set. ```js companies.clear() console.log(companies) ``` ```sh Set(0) {} ``` See the example below to learn how to use set. ```js const languages = [ 'English', 'Finnish', 'English', 'French', 'Spanish', 'English', 'French', ] const langSet = new Set(languages) console.log(langSet) // Set(4) {"English", "Finnish", "French", "Spanish"} console.log(langSet.size) // 4 const counts = [] const count = {} for (const l of langSet) { const filteredLang = languages.filter((lng) => lng === l) console.log(filteredLang) // ["English", "English", "English"] counts.push({ lang: l, count: filteredLang.length }) } console.log(counts) ``` ```js [ { lang: 'English', count: 3 }, { lang: 'Finnish', count: 1 }, { lang: 'French', count: 2 }, { lang: 'Spanish', count: 1 }, ] ``` Other use case of set. For instance to count unique item in an array. ```js const numbers = [5, 3, 2, 5, 5, 9, 4, 5] const setOfNumbers = new Set(numbers) console.log(setOfNumbers) ``` ```sh Set(5) {5, 3, 2, 9, 4} ``` ### Union of sets To find a union to two sets can be achieved using spread operator. Lets find the union of set A and set B (A U B) ```js let a = [1, 2, 3, 4, 5] let b = [3, 4, 5, 6] let c = [...a, ...b] let A = new Set(a) let B = new Set(b) let C = new Set(c) console.log(C) ``` ```sh Set(6) {1, 2, 3, 4, 5,6} ``` ### Intersection of sets To find an intersection of two sets can be achieved using filter. Lets find the intersection of set A and set B (A ∩ B) ```js let a = [1, 2, 3, 4, 5] let b = [3, 4, 5, 6] let A = new Set(a) let B = new Set(b) let c = a.filter((num) => B.has(num)) let C = new Set(c) console.log(C) ``` ```sh Set(3) {3, 4, 5} ``` ### Difference of sets To find an the difference between two sets can be achieved using filter. Lets find the different of set A and set B (A \ B) ```js let a = [1, 2, 3, 4, 5] let b = [3, 4, 5, 6] let A = new Set(a) let B = new Set(b) let c = a.filter((num) => !B.has(num)) let C = new Set(c) console.log(C) ``` ```sh Set(2) {1, 2} ``` ## Map ### Creating an empty Map ```js const map = new Map() console.log(map) ``` ```sh Map(0) {} ``` ### Creating an Map from array ```js countries = [ ['Finland', 'Helsinki'], ['Sweden', 'Stockholm'], ['Norway', 'Oslo'], ] const map = new Map(countries) console.log(map) console.log(map.size) ``` ```sh Map(3) {"Finland" => "Helsinki", "Sweden" => "Stockholm", "Norway" => "Oslo"} 3 ``` ### Adding values to the Map ```js const countriesMap = new Map() console.log(countriesMap.size) // 0 countriesMap.set('Finland', 'Helsinki') countriesMap.set('Sweden', 'Stockholm') countriesMap.set('Norway', 'Oslo') console.log(countriesMap) console.log(countriesMap.size) ``` ```sh Map(3) {"Finland" => "Helsinki", "Sweden" => "Stockholm", "Norway" => "Oslo"} 3 ``` ### Getting a value from Map ```js console.log(countriesMap.get('Finland')) ``` ```sh Helsinki ``` ### Checking key in Map Check if a key exists in a map using _has_ method. It returns _true_ or _false_. ```js console.log(countriesMap.has('Finland')) ``` ```sh true ``` Getting all values from map using loop ```js for (const country of countriesMap) { console.log(country) } ``` ```sh (2) ["Finland", "Helsinki"] (2) ["Sweden", "Stockholm"] (2) ["Norway", "Oslo"] ``` ```js for (const [country, city] of countriesMap){ console.log(country, city) } ``` ```sh Finland Helsinki Sweden Stockholm Norway Oslo ``` 🌕 You established a big milestone, you are unstoppable. Keep going! You have just completed day 10 challenges and you are 10 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle. ## Exercises ### Exercises:Level 1 ```js const a = [4, 5, 8, 9] const b = [3, 4, 5, 7] const countries = ['Finland', 'Sweden', 'Norway'] ``` 1. create an empty set 2. Create a set containing 0 to 10 using loop 3. Remove an element from a set 4. Clear a set 5. Create a set of 5 string elements from array 6. Create a map of countries and number of characters of a country ### Exercises:Level 2 1. Find a union b 2. Find a intersection b 3. Find a with b ### Exercises:Level 3 1. How many languages are there in the countries object file. 1. \*\*\* Use the countries data to find the 10 most spoken languages: ```js // Your output should look like this console.log(mostSpokenLanguages(countries, 10)) [ { English: 91 }, { French: 45 }, { Arabic: 25 }, { Spanish: 24 }, { Russian: 9 }, { Portuguese: 9 }, { Dutch: 8 }, { German: 7 }, { Chinese: 5 }, { Swahili: 4 }, { Serbian: 4 } ] // Your output should look like this console.log(mostSpokenLanguages(countries, 3)) [ {English:91}, {French:45}, {Arabic:25} ] ``` 🎉 CONGRATULATIONS ! 🎉 [<< Day 9](../09_Day_Higher_order_functions/09_day_higher_order_functions.md) | [Day 11 >>](../11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md)