From 8592102377a8182dd52c82b81590be8bc7606734 Mon Sep 17 00:00:00 2001 From: Asabeneh Date: Fri, 10 Jan 2020 23:36:17 +0200 Subject: [PATCH] day 9 fixes --- .gitignore | 1 - 10_Day/10_day_Set_and_Map.md | 420 +++++++++++++++++++++++++++++++++++ 2 files changed, 420 insertions(+), 1 deletion(-) create mode 100644 10_Day/10_day_Set_and_Map.md diff --git a/.gitignore b/.gitignore index 4aa296c..e1b0cb0 100644 --- a/.gitignore +++ b/.gitignore @@ -14,7 +14,6 @@ day9.md day10.md 01_02_03_days_backup.md test.md -10_Day 11_Day 12_Day test.html \ No newline at end of file diff --git a/10_Day/10_day_Set_and_Map.md b/10_Day/10_day_Set_and_Map.md new file mode 100644 index 0000000..850925e --- /dev/null +++ b/10_Day/10_day_Set_and_Map.md @@ -0,0 +1,420 @@ +
+

30 Days Of JavaScript

+ + GitHub stars + + + + + + 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>>](#) + +![Day 5](../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) + +# 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 + +```js +console.log(countriesMap.has('Finland')) +```` + +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 + +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 +7. \*\*\* Find the 10 most spoken languages: + + ````js + // Your output should look like this + console.log(mostSpokenLanguages(countries, 10)) + [(91, 'English'), + (45, 'French'), + (25, 'Arabic'), + (24, 'Spanish'), + (9, 'Russian'), + (9, 'Portuguese'), + (8, 'Dutch'), + (7, 'German'), + (5, 'Chinese'), + (4, 'Swahili'), + (4, 'Serbian')] + + // Your output should look like this + console.log(mostSpokenLanguages(countries, 3)) + [ + (91, 'English'), + (45, 'French'), + (25, 'Arabic') + ]``` + + ```` + +🎉 CONGRATULATIONS ! 🎉 + +[<< Day 9](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/09_Day/09_day_higher_order_functions.md) | [Day 11>>](#)