msb-public
/
30-Days-Of-JavaScript
mirror of https://github.com/Asabeneh/30-Days-Of-JavaScript
1
0
Code Issues Projects Releases Wiki Activity

day 9 fixes

Browse Source
pull/53/head
Asabeneh 5 years ago
parent ba53c499ff
commit 667129e94c
2 changed files with 302 additions and 173 deletions
Show Stats Download Patch File Download Diff File

294
09_Day/09_day_higher_order_functions.md
Unescape View File

@ -25,7 +25,7 @@
- [Higher Order Function](#higher-order-function)
- [Callback](#callback)
- [Returning function](#returning-function)
- [setTime](#settime)
- [setting time](#setting-time)
- [setInterval](#setinterval)
- [setTimeout](#settimeout)
- [Functional Programming](#functional-programming)
@ -42,6 +42,7 @@
- [Sorting Numeric values](#sorting-numeric-values)
- [Sorting Object Arrays](#sorting-object-arrays)
- [💻 Exercises](#%f0%9f%92%bb-exercises)
# Day 9
## Higher Order Function
@ -70,6 +71,7 @@ console.log(cube(square, 3))
Higher order functions return function as a value
​
```js
// Higher order function returning an other function
const higherOrder = n => {
@ -85,7 +87,7 @@ const higherOrder = n => {
console.log(higherOrder(2)(3)(10))
```
Let us see were we use call back functions.For instance the *forEach* method uses call back.
Let us see were we use call back functions.For instance the _forEach_ method uses call back.
```js
const numbers = [1, 2, 3, 4]
@ -102,6 +104,10 @@ const sumArray = arr => {
console.log(sumArray(numbers))
```
```sh
15
```
The above example can be simplified as follows:
```js
@ -118,7 +124,16 @@ const sumArray = arr => {
console.log(sumArray(numbers))
```
### setTime
```sh
15
```
### setting time
In JavaScript we can execute some activity on certain interval of time or we can schedule(wait) for sometime to execute some activities.
- setInterval
- setTimeout
#### setInterval
@ -133,7 +148,6 @@ setInterval(callback, duration)
```
```js
function sayHello() {
console.log('Hello')
}
@ -153,7 +167,6 @@ setTimeout(callback, duration) // duration in milliseconds
```
```js
function sayHello() {
console.log('Hello')
}
@ -162,11 +175,11 @@ setTimeout(sayHello, 2000) // it prints hello after it waits for 2 seconds.
## Functional Programming
Instead of writing regular loop, latest version of JavaScript introduced lots of built in methods which can help us to solve complicated problems. All builtin methods take callback function. In this section, we will see *forEach*, *map*, *filter*, *reduce*, *find*, *every*, *some*, and *sort*.
Instead of writing regular loop, latest version of JavaScript introduced lots of built in methods which can help us to solve complicated problems. All builtin methods take callback function. In this section, we will see _forEach_, _map_, _filter_, _reduce_, _find_, _every_, _some_, and _sort_.
### forEach
*forEach*: Iterate an array elements. We use *forEach* only with arrays. It takes a callback function with elements, index parameter and array itself. The index and the array optional.
_forEach_: Iterate an array elements. We use _forEach_ only with arrays. It takes a callback function with elements, index parameter and array itself. The index and the array optional.
```js
arr.forEach(function(element, index, arr) {
@ -180,11 +193,32 @@ arr.forEach((element, index, arr) => {
arr.forEach((element, index, arr) => console.log(index, element, arr))
```
```js
let sum = 0;
const numbers = [1,2,3,4,5];
numbers.forEach(num => console.log(num)))
console.log(sum)
```
```sh
1
2
3
4
5
```
```js
let sum = 0;
const numbers = [1,2,3,4,5];
numbers.forEach(num => sum += num))
// 15
console.log(sum)
```
```sh
15
```
```js
@ -202,7 +236,7 @@ ICELAND
### map
*map*: Iterate an array elements and modify the array elements. It takes a callback function with elements and index parameter and return the modified array.
_map_: Iterate an array elements and modify the array elements. It takes a callback function with elements and index parameter and return a new array.
```js
const modifiedArray = arr.map(function(element, index) {
@ -216,14 +250,23 @@ const modifiedArray = arr.map((element,index) => element);
*/
//Example
const numbers = [1, 2, 3, 4, 5]
const numbersSquare = numbers.map((num) => num * num)
console.log(numbersSquare) // [1,4,9,16,25]
const numbersSquare = numbers.map(num => num * num)
console.log(numbersSquare)
```
```sh
[1, 4, 9, 16, 25]
```
```js
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const namesToUpperCase = names.map((name) => name.toUpperCase())
console.log(namesToUpperCase) //['ASABENEH', 'MATHIAS', 'ELIAS', 'BROOK']
const namesToUpperCase = names.map(name => name.toUpperCase())
console.log(namesToUpperCase)
```
```sh
['ASABENEH', 'MATHIAS', 'ELIAS', 'BROOK']
```
```js
@ -240,13 +283,9 @@ const countries = [
'Japan',
'Kenya'
]
const countriesToUpperCase = countries.map(function(country){
let countryCode = country.toUpperCase().slice(0, 3)
let country = country.length
return []
})
const countriesToUpperCase = countries.map(country => country.toUpperCase())
console.log(countriesToUpperCase)
// ['ALBANIA', 'BOLIVIA', 'CANADA', 'DENMARK', 'ETHIOPIA', 'FINLAND', 'GERMANY', 'HUNGARY', 'IRELAND', 'JAPAN', 'KENYA']
/*
// Arrow function
const countriesToUpperCase = countries.map((country) => {
@ -255,24 +294,59 @@ const countriesToUpperCase = countries.map((country) => {
//Explicit return arrow function
const countriesToUpperCase = countries.map(country => country.toUpperCase());
*/
```
```sh
['ALBANIA', 'BOLIVIA', 'CANADA', 'DENMARK', 'ETHIOPIA', 'FINLAND', 'GERMANY', 'HUNGARY', 'IRELAND', 'JAPAN', 'KENYA']
```
```js
const countriesFirstThreeLetters = countries.map(country =>
country.toUpperCase().slice(0, 3)
)
```
```sh
 ["ALB", "BOL", "CAN", "DEN", "ETH", "FIN", "GER", "HUN", "IRE", "JAP", "KEN"]
```
### filter
*Filter*: Filter out items which full fill filtering conditions
_Filter_: Filter out items which full fill filtering conditions and return a new array.
```js
//Filter countries containing land
const countriesContainingLand = countries.filter(country => country.includes('land'));
console.log(countriesContainingLand ) //['Finland', 'Ireland']
const countriesContainingLand = countries.filter(country =>
country.includes('land')
)
console.log(countriesContainingLand)
```
```sh
['Finland', 'Ireland']
```
```js
const countriesEndsByia = countries.filter(country => country.includes('ia'))
console.log(countriesEndsByia)
```
```sh
['Albania', 'Bolivia','Ethiopia']
```
const countriesEndsByia = countries.filter(country => country.includes('ia'));
console.log(countriesEndsByia) //['Albania', 'Bolivia','Ethiopia']
```js
const countriesHaveFiveLetters = countries.filter(
country => country.length === 5
)
console.log(countriesHaveFiveLetters)
```
const countriesHaveFiveLetters = countries.filter(country => country.length === 5);
console.log(countriesHaveFiveLetters ) //  ['Japan', 'Kenya']
```sh
['Japan', 'Kenya']
```
```js
const scores = [
{ name: 'Asabeneh', score: 95 },
{ name: 'Mathias', score: 80 },
@ -281,56 +355,81 @@ const scores = [
{ name: 'John', score: 100 }
]
const scoresGreaterEight = scores.filter((score) => score.score > 80)
console.log(scoresGreaterEight) //[{name: 'Asabeneh', score: 95}, {name: 'Martha', score: 85},{name: 'John', score: 100}]
const scoresGreaterEight = scores.filter(score => score.score > 80)
console.log(scoresGreaterEight)
```
```sh
[{name: 'Asabeneh', score: 95}, {name: 'Martha', score: 85},{name: 'John', score: 100}]
```
### reduce
*reduce*: Reduce takes a callback function. The call back function takes accumulator and current value as a parameter and returns a single value:
_reduce_: Reduce takes a callback function. The call back function takes accumulator and current value as a parameter and returns a single value:
```js
const numbers = [1,2,3,4,5];
const numbers = [1, 2, 3, 4, 5]
const sum = numbers.reduce((accum, curr) => accum + curr)
console.log(sum) //15
console.log(sum)
```
```js
15
```
### every
*every*: Check if all the elements are similar in one aspect. It returns boolean
_every_: Check if all the elements are similar in one aspect. It returns boolean
```js
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const areAllStr = names.every((name) => typeof name ==='string');
console.log(arrAllStr) // true;
const areAllStr = names.every(name => typeof name === 'string')
console.log(arrAllStr)
```
```sh
true
```
```js
const areAllTrue = [true, true, true, true]
const areAllTrue = bools.every((b)=> {
return b === true;
const bools = [true, true, true, true]
const areAllTrue = bools.every(b => {
return b === true
})
console.log(areAllTrue) //true
```
```sh
true
```
### find
*find*: Return the first element which satisfies the condition
_find_: Return the first element which satisfies the condition
```js
const ages = [24, 22, 25, 32, 35, 18]
const age = ages.find(age => age < 20)
const ages = [24, 22,25,32,35,18];
const age = ages.find((age) => age < 20)
console.log(age) // 18
console.log(age)
```
```js
18
```
```js
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const result = names.find(name => name.length > 7)
console.log(result) // Asabeneh
console.log(result)
```
```sh
Asabeneh
```
```js
@ -342,35 +441,39 @@ const scores = [
{ name: 'John', score: 100 }
]
const score = scores.find((user) => {
const score = scores.find(user => {
return user.score > 80
})
console.log(score) // { name: "Asabeneh", score: 95 }
console.log(score)
```
```sh
{ name: "Asabeneh", score: 95 }
```
### some
*some*: Check if some of the elements are similar in one aspect. It returns boolean
_some_: Check if some of the elements are similar in one aspect. It returns boolean
```js
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const bools = [true, true, true, true]
const areSomeTrue = bools.some((b)=> {
return b === true;
const areSomeTrue = bools.some(b => {
return b === true
})
console.log(areSomeTrue) //true
```
```js
const areAllStr = names.some((name) => typeof name ==='number');
const areAllStr = names.some(name => typeof name === 'number')
console.log(areAllStr) // false
```
### findIndex
*findIndex*: Return the position of the first element which satisfies the condition
_findIndex_: Return the position of the first element which satisfies the condition
```js
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
@ -379,13 +482,13 @@ const ages = [24, 22,25,32,35,18]
const result = names.findIndex(name => name.length > 7)
console.log(result) // 0
const age = ages.findIndex((age) => age < 20)
const age = ages.findIndex(age => age < 20)
console.log(age) // 5
```
### sort
*sort*: The sort methods arranges the array elements either ascending or descending order. By default, the ***sort()*** method sorts values as strings.This works well for string array items but not for numbers. If number values are sorted as strings and it give us wrong result. Sort method modify the original array. It is recommended to copy the original document before you start sorting.
_sort_: The sort methods arranges the array elements either ascending or descending order. By default, the **_sort()_** method sorts values as strings.This works well for string array items but not for numbers. If number values are sorted as strings and it give us wrong result. Sort method modify the original array. It is recommended to copy the original data before you start using *sort* method.
#### Sorting string values
@ -408,6 +511,7 @@ return a - b
})
console.log(numbers) // [3.14, 9.81, 37, 100]
numbers.sort(function(a, b) {
return b - a
})
@ -422,33 +526,39 @@ When ever we sort objects in an array. We use the object key to compare. Lets se
objArr.sort(function(a, b) {
if (a.key < b.key) return -1
if (a.key > b.key) return 1
return 0;
return 0
})
// or
objArr.sort(function(a, b) {
if (a['key'] < b['key']) return -1;
if (a['key'] > b['key']) return 1;
return 0;
if (a['key'] < b['key']) return -1
if (a['key'] > b['key']) return 1
return 0
})
const users = [{name:'Asabeneh', age:150}, {name:'Brook', age:50}, {name:'Eyo', age:100},{name:'Elias', age:22}];
const users = [
{ name: 'Asabeneh', age: 150 },
{ name: 'Brook', age: 50 },
{ name: 'Eyo', age: 100 },
{ name: 'Elias', age: 22 }
]
users.sort((a, b) => {
if (a.age < b.age) return -1;
if (a.age > b.age) return 1;
return 0;
});
console.log(users); // sorted ascending
if (a.age < b.age) return -1
if (a.age > b.age) return 1
return 0
})
console.log(users) // sorted ascending
//[{…}, {…}, {…}, {…}]
```
🌕 You are doing great.Never give up because great things take time. You have just completed day 9 challenges and you are 9 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle.
## 💻 Exercises
```js
const countries = ['Finland', 'Sweden', 'Denmark', 'Norway', 'IceLand'];
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'];
const countries = ['Finland', 'Sweden', 'Denmark', 'Norway', 'IceLand']
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const products = [
{ product: 'banana', price: 3 },
@ -460,39 +570,39 @@ console.log(users); // sorted ascending
]
```
1. Explain the difference between ***forEach, map, filter, and reduce***.
1. Explain the difference between **_forEach, map, filter, and reduce_**.
2. Define a call function before you them in forEach, map, filter or reduce.
3. Use ***forEach*** to console.log each country in the countries array.
4. Use ***forEach*** to console.log each name in the names array.
5. Use ***forEach*** to console.log each number in the numbers array.
6. Use ***map*** to create a new array by changing each country to uppercase in the countries array.
7. Use ***map*** to create an array of countries length from countries array.
8. Use ***map*** to create a new array by changing each number to square in the numbers array
9. Use ***map*** to change to each name to uppercase in the names array
10. Use ***map*** to map the products array to its corresponding prices.
11. Use ***filter*** to filter out countries containing ***land***.
12. Use ***filter*** to filter out countries having six character.
13. Use ***filter*** to filter out countries containing six letters and more in the country array.
14. Use ***filter*** to filter out country start with 'E';
15. Use ***filter*** to filter out only prices with values.
3. Use **_forEach_** to console.log each country in the countries array.
4. Use **_forEach_** to console.log each name in the names array.
5. Use **_forEach_** to console.log each number in the numbers array.
6. Use **_map_** to create a new array by changing each country to uppercase in the countries array.
7. Use **_map_** to create an array of countries length from countries array.
8. Use **_map_** to create a new array by changing each number to square in the numbers array
9. Use **_map_** to change to each name to uppercase in the names array
10. Use **_map_** to map the products array to its corresponding prices.
11. Use **_filter_** to filter out countries containing **_land_**.
12. Use **_filter_** to filter out countries having six character.
13. Use **_filter_** to filter out countries containing six letters and more in the country array.
14. Use **_filter_** to filter out country start with 'E';
15. Use **_filter_** to filter out only prices with values.
16. Find the total price of products by chaining two or more array iterators(eg. arr.map(callback).filter(callback).reduce(callback))
17. Find the sum of price of products using only reduce reduce(callback))
18. Declare a function called getStringLists which takes an array as a parameter and then returns an array only with string items.
19. Use ***reduce*** to sum all the numbers in the numbers array.
20. Use ***reduce*** to concatenate all the countries and to produce this sentence: ***Estonia, Finland, Sweden, Denmark, Norway, and IceLand are north European countries***
21. Explain the difference between ***some*** and ***every***
22. Use ***some*** to check if some names' length greater than seven in names array
23. Use ***every*** to check if all the countries contain the word land
24. Explain the difference between ***find*** and ***findIndex***.
25. Use ***find*** to find the first country containing only six letters in the countries array
26. Use ***findIndex*** to find the position of the first country containing only six letters in the countries array
27. Use ***findIndex*** to find the position of ***Norway*** if it doesn't exist in the array you will get -1.
28. Use ***findIndex*** to find the position of ***Russia*** if it doesn't exist in the array you will get -1.
29. Declare a function called ***categorizeCountries*** which returns an array of countries which have some common pattern(you find the countries array in this repository as countries.js(eg 'land', 'ia', 'island','stan')).
19. Use **_reduce_** to sum all the numbers in the numbers array.
20. Use **_reduce_** to concatenate all the countries and to produce this sentence: **_Estonia, Finland, Sweden, Denmark, Norway, and IceLand are north European countries_**
21. Explain the difference between **_some_** and **_every_**
22. Use **_some_** to check if some names' length greater than seven in names array
23. Use **_every_** to check if all the countries contain the word land
24. Explain the difference between **_find_** and **_findIndex_**.
25. Use **_find_** to find the first country containing only six letters in the countries array
26. Use **_findIndex_** to find the position of the first country containing only six letters in the countries array
27. Use **_findIndex_** to find the position of **_Norway_** if it doesn't exist in the array you will get -1.
28. Use **_findIndex_** to find the position of **_Russia_** if it doesn't exist in the array you will get -1.
29. Declare a function called **_categorizeCountries_** which returns an array of countries which have some common pattern(you find the countries array in this repository as countries.js(eg 'land', 'ia', 'island','stan')).
30. Create a function which return an array of objects, which is the letter and the number of times the letter use to start with a name of a country.
31. Declare a ***getFirstTenCountries*** function and return an array of ten countries. Use different functional programming to work on the countries.js array
32. Declare a ***getLastTenCountries*** function which which returns the last ten countries in the countries array.
33. Find out which *letter* is used many *times* as initial for a country name from the countries array (eg. Finland, Fiji, France etc)
31. Declare a **_getFirstTenCountries_** function and return an array of ten countries. Use different functional programming to work on the countries.js array
32. Declare a **_getLastTenCountries_** function which which returns the last ten countries in the countries array.
33. Find out which _letter_ is used many _times_ as initial for a country name from the countries array (eg. Finland, Fiji, France etc)
34. Use the countries information, in the data folder. Sort countries by name, by capital, by population
35. \*\*\* Find the 10 most spoken languages:
@ -519,6 +629,8 @@ console.log(users); // sorted ascending
(25, 'Arabic')
]```
````
36. \*\*\* Use countries_data.js file create a function which create the ten most populated countries
````js

27
readMe.md
Unescape View File

@ -51,7 +51,7 @@
- [Checking Data types](#checking-data-types)
- [Comments](#comments)
- [Variables](#variables)
- [💻 Day 1: Exercises](#-day-1-exercises)
- [💻 Day 1: Exercises](#%f0%9f%92%bb-day-1-exercises)
# 📔Day 1
@ -544,17 +544,30 @@ let firstName = 'Asabeneh' // first name of a person
let lastName = 'Yetayeh' // last name of a person
let country = 'Finland' // country
let city = 'Helsinki' // capital city
let age = 100 // age in years
let isMarried = true
let isMarried = true // boolean data type
console.log(firstName, lastName, country, city, age, isMarried)
```
console.log(firstName, lastName, country, city, age, isMarried); //Asabeneh, Yetayeh, Finland, Helsinki, 100, True
```sh
Asabeneh Yetayeh Finland Helsinki 100 True
```
```js
// Declaring variables with number values
let age = 100 // age in years
const gravity = 9.81 // earth gravity in m/s2
const boilingPoint = 100 // water boiling point, temperature in oC
const PI = 3.14 // geometrical constant
console.log(gravity, boilingPoint, PI); // 9.81, 100, 3.14
console.log(gravity, boilingPoint, PI)
```
```sh
9.81 100 3.14
```
```js
// Variables can also be declaring in one line separated by comma
let name = 'Asabeneh', // name of a person
job = 'teacher',
@ -562,6 +575,10 @@ let name = 'Asabeneh', // name of a person
console.log(name, job, live);
```
```sh
Asabeneh teacher Finland
```
When you run the files on 01-Day folder you should get this:
![Day one](./images/day_1.png)

Write Preview
Loading…
Cancel
Save