30 Days Of JavaScript

Twitter Follow Author: Asabeneh Yetayeh
January, 2020
[<< Day 9](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/09_Day/09_day_higher_order_functions.md) | [Day 11>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/11_Day/11_day_destructuring_and_spread.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 a collection of elements. Set can only contains unique elements. Lets see how to create a set ### Creating an empty set ```js const companies = new Set() console.log(companies) ``` ```sh {} ``` ### Creating set from array ```js const languages = [ 'English', 'Finnish', 'English', 'French', 'Spanish', 'English', 'French' ] const setOfLangauges = new Set(languages) console.log(setOfLangauges) ``` ```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 setOfLangauges = new Set(languages) for (const language of setOfLangauges) { 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 {} ``` 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 union 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 exist 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"] ``` ```sh 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](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/09_Day/09_day_higher_order_functions.md) | [Day 11>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/11_Day/11_day_destructuring_and_spread.md)