|
|
<div align="center">
|
|
|
<h1> 30 Days Of JavaScript</h1>
|
|
|
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
|
|
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
|
|
</a>
|
|
|
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
|
|
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
|
|
</a>
|
|
|
|
|
|
<sub>Author:
|
|
|
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
|
|
<small> January, 2020</small>
|
|
|
</sub>
|
|
|
</div>
|
|
|
|
|
|
[<< 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](#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. \*\*\* Use the countries data to 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>>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/11_Day/11_day_destructuring_and_spread.md)
|
