Carlos Mario Mora Restrepo
6 years ago
committed by
GitHub
commit
5bfd4215b3
|
Before Width: | Height: | Size: 74 KiB |
@ -0,0 +1,17 @@
|
|||||||
|
// Declaring different variables of different data types
|
||||||
|
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
|
||||||
|
|
||||||
|
// Declaring variables with number values
|
||||||
|
const gravity = 9.81 // earth gravity in m/s2
|
||||||
|
const boilingPoint = 100 // water boiling point, temperature in oC
|
||||||
|
const PI = 3.14 // geometrical constant
|
||||||
|
|
||||||
|
// Variables can also be declaring in one line separated by comma
|
||||||
|
let name = 'Asabeneh', //name of a person
|
||||||
|
job = 'teacher',
|
||||||
|
live = 'Finland'
|
||||||
|
Before Width: | Height: | Size: 76 KiB |
@ -1,15 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<title>30DaysOfJavaScript</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<!-- import your scripts here -->
|
|
||||||
<script src="./scripts/main.js"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1 +0,0 @@
|
|||||||
// this is your main.js script
|
|
||||||
@ -1 +1,3 @@
|
|||||||
// this is your main.js script
|
// this is your main.js script
|
||||||
|
|
||||||
|
alert('Open the browser console whenever you work on JavaScript')
|
||||||
|
Before Width: | Height: | Size: 75 KiB |
@ -1,2 +1,3 @@
|
|||||||
console.log(countries)
|
console.log(countries)
|
||||||
|
alert('Open the browser console whenever you work on JavaScript')
|
||||||
alert('Open the console and check if the countries has been loaded')
|
alert('Open the console and check if the countries has been loaded')
|
||||||
@ -0,0 +1,439 @@
|
|||||||
|
<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 5](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/05_Day/05_day_arrays.md) | [Day 7 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/07_Day/07_day_functions.md)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- [📔 Day 6](#%f0%9f%93%94-day-6)
|
||||||
|
- [Loops](#loops)
|
||||||
|
- [for Loop](#for-loop)
|
||||||
|
- [while loop](#while-loop)
|
||||||
|
- [do while loop](#do-while-loop)
|
||||||
|
- [for of loop](#for-of-loop)
|
||||||
|
- [break](#break)
|
||||||
|
- [continue](#continue)
|
||||||
|
- [💻 Exercises:Day 6](#%f0%9f%92%bb-exercisesday-6)
|
||||||
|
|
||||||
|
# 📔 Day 6
|
||||||
|
|
||||||
|
## Loops
|
||||||
|
|
||||||
|
Most of the activities we do in life are full of repetitions. Imagine if I ask you to print out from 0 to 100 using console.log(). To implement this simple task it may take you 2 to 5 minutes, such kind of tedious and repetitive task can be carried out using loop.
|
||||||
|
|
||||||
|
In programming languages to carry out repetitive task we use different kinds of loop. The following examples are the commonly used loops.
|
||||||
|
|
||||||
|
### for Loop
|
||||||
|
|
||||||
|
```js
|
||||||
|
//For loop structure
|
||||||
|
for(initialization, condition, increment/decrement){
|
||||||
|
// code goes here
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
for(let i = 0; i <= 5; i++){
|
||||||
|
console.log(i)
|
||||||
|
}
|
||||||
|
// 0 1 2 3 4 5
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
for(let i = 5; i >= 0; i--){
|
||||||
|
console.log(i)
|
||||||
|
}
|
||||||
|
// 5 4 3 2 1 0
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
for(let i = 0; i <= 5; i++){
|
||||||
|
console.log(`${i} * ${i} = ${i * i}`)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh
|
||||||
|
0 * 0 = 0
|
||||||
|
1 * 1 = 1
|
||||||
|
2 * 2 = 4
|
||||||
|
3 * 3 = 9
|
||||||
|
4 * 4 = 16
|
||||||
|
5 * 5 = 25
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
const countries = ['Finland', 'Sweden', 'Denmark', 'Norway', 'Iceland']
|
||||||
|
const newArr = []
|
||||||
|
for(let i = 0; i < countries.length; i++){
|
||||||
|
newArr.push(countries[i].toUpperCase())
|
||||||
|
}
|
||||||
|
//["FINLAND", "SWEDEN", "DENMARK", "NORWAY", "ICELAND"]
|
||||||
|
```
|
||||||
|
|
||||||
|
Adding all elements in the array
|
||||||
|
|
||||||
|
```js
|
||||||
|
const numbers = [1, 2, 3, 4, 5]
|
||||||
|
let sum = 0
|
||||||
|
for(let i = 0; i < numbers.length; i++){
|
||||||
|
sum = sum + numbers[i] // can be shorten, sum += numbers[i]
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(sum) // 15
|
||||||
|
```
|
||||||
|
|
||||||
|
Creating a new array based on the existing array
|
||||||
|
|
||||||
|
```js
|
||||||
|
const numbers = [1, 2, 3, 4, 5]
|
||||||
|
const newArr = []
|
||||||
|
let sum = 0
|
||||||
|
for(let i = 0; i < numbers.length; i++){
|
||||||
|
newArr.push(i * i)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(newArr) // [1, 4, 9, 16, 25]
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']
|
||||||
|
const newArr = []
|
||||||
|
for(let i = 0; i < countries.length; i++){
|
||||||
|
newArr.push(countries[i].toUpperCase())
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(newArr) // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
|
||||||
|
```
|
||||||
|
|
||||||
|
### while loop
|
||||||
|
|
||||||
|
```js
|
||||||
|
let i = 0
|
||||||
|
while (i <= 5) {
|
||||||
|
console.log(i)
|
||||||
|
i++
|
||||||
|
}
|
||||||
|
// 0 1 2 3 4 5
|
||||||
|
```
|
||||||
|
|
||||||
|
### do while loop
|
||||||
|
|
||||||
|
```js
|
||||||
|
let i = 0
|
||||||
|
do {
|
||||||
|
console.log(i)
|
||||||
|
i++
|
||||||
|
} while (i <= 5)
|
||||||
|
// 0 1 2 3 4 5
|
||||||
|
```
|
||||||
|
|
||||||
|
### for of loop
|
||||||
|
|
||||||
|
We use for of loop for arrays. It is very hand way to iterate through an array if we are not interested in the index.
|
||||||
|
|
||||||
|
```js
|
||||||
|
for (const element of arr) {
|
||||||
|
// code goes here
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
const numbers = [1, 2, 3, 4, 5]
|
||||||
|
|
||||||
|
for (const num of numbers) {
|
||||||
|
console.log(num) //1 2 3 4 5
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const num of numbers) {
|
||||||
|
console.log(num * num) //1 4 9 16 25
|
||||||
|
}
|
||||||
|
|
||||||
|
// adding all the numbers in the array
|
||||||
|
let sum = 0
|
||||||
|
for (const num of numbers) {
|
||||||
|
sum += sum + num // can be also shorten like this, sum += num
|
||||||
|
}
|
||||||
|
console.log(sum) // 15
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const webTechs = [
|
||||||
|
'HTML',
|
||||||
|
'CSS',
|
||||||
|
'JavaScript',
|
||||||
|
'React',
|
||||||
|
'Redux',
|
||||||
|
'Node',
|
||||||
|
'MongoDB'
|
||||||
|
]
|
||||||
|
|
||||||
|
for (const tech of webTechs) {
|
||||||
|
console.log(tech.toUpperCase()) // HTML CSS JAVASCRIPT REACT NODE MONGODB
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const tech of webTechs) {
|
||||||
|
console.log(tech[0]) //get only the first letter of each element, H C J R N M
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']
|
||||||
|
const newArr = []
|
||||||
|
for(const country of countries){
|
||||||
|
newArr.push(country.toUpperCase())
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(newArr) // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
|
||||||
|
```
|
||||||
|
|
||||||
|
### break
|
||||||
|
|
||||||
|
content will be added soon
|
||||||
|
|
||||||
|
### continue
|
||||||
|
|
||||||
|
content will added soon
|
||||||
|
|
||||||
|
🌕 You are so brave, you made it to this far. Now, you have gained the power to automate repetitive and tedious tasks. You have just completed day 6 challenges and you are 6 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle.
|
||||||
|
|
||||||
|
## 💻 Exercises:Day 6
|
||||||
|
|
||||||
|
```js
|
||||||
|
const countries = [
|
||||||
|
'Albania',
|
||||||
|
'Bolivia',
|
||||||
|
'Canada',
|
||||||
|
'Denmark',
|
||||||
|
'Ethiopia',
|
||||||
|
'Finland',
|
||||||
|
'Germany',
|
||||||
|
'Hungary',
|
||||||
|
'Ireland',
|
||||||
|
'Japan',
|
||||||
|
'Kenya'
|
||||||
|
]
|
||||||
|
|
||||||
|
const webTechs = [
|
||||||
|
'HTML',
|
||||||
|
'CSS',
|
||||||
|
'JavaScript',
|
||||||
|
'React',
|
||||||
|
'Redux',
|
||||||
|
'Node',
|
||||||
|
'MongoDB'
|
||||||
|
]
|
||||||
|
|
||||||
|
const mernStack = ['MongoDB', 'Express', 'React', 'Node']
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Iterate 0 to 10 using for loop, do the same using while and do while loop
|
||||||
|
2. Iterate 10 to 0 using for loop, do the same using while and do while loop
|
||||||
|
3. Iterate 0 to n using for loop
|
||||||
|
4. Write a loop that makes the following pattern using console.log():
|
||||||
|
|
||||||
|
```js
|
||||||
|
#
|
||||||
|
##
|
||||||
|
###
|
||||||
|
####
|
||||||
|
#####
|
||||||
|
######
|
||||||
|
#######
|
||||||
|
```
|
||||||
|
|
||||||
|
5. Use loop to print the following pattern:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
0 x 0 = 0
|
||||||
|
1 x 1 = 1
|
||||||
|
2 x 2 = 4
|
||||||
|
3 x 3 = 9
|
||||||
|
4 x 4 = 16
|
||||||
|
5 x 5 = 25
|
||||||
|
6 x 6 = 36
|
||||||
|
7 x 7 = 49
|
||||||
|
8 x 8 = 64
|
||||||
|
9 x 9 = 81
|
||||||
|
10 x 10 = 100
|
||||||
|
```
|
||||||
|
|
||||||
|
6. Using loop print the following pattern
|
||||||
|
|
||||||
|
```sh
|
||||||
|
i i^2 i^3
|
||||||
|
0 0 0
|
||||||
|
1 1 1
|
||||||
|
2 4 8
|
||||||
|
3 9 27
|
||||||
|
4 16 64
|
||||||
|
5 25 125
|
||||||
|
6 36 216
|
||||||
|
7 49 343
|
||||||
|
8 64 512
|
||||||
|
9 81 729
|
||||||
|
10 100 1000
|
||||||
|
```
|
||||||
|
|
||||||
|
7. Use for loop to iterate from 0 to 100 and print only even numbers
|
||||||
|
8. Use for loop to iterate from 0 to 100 and print only odd numbers
|
||||||
|
9. Use for loop to iterate from 0 to 100 and print only prime numbers
|
||||||
|
10. Use for loop to iterate from 0 to 100 and print and print the sum of all numbers.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
The sum all numbers is 5050.
|
||||||
|
```
|
||||||
|
|
||||||
|
11. Use for loop to iterate from 0 to 100 and print the sum of all evens and the sum of all odds.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
The sum of all evens is 2550. And the sum of all odds is 2500.
|
||||||
|
```
|
||||||
|
|
||||||
|
12. Use for loop to iterate from 0 to 100 and print the sum of all evens and the sum of all odds. Print sum of evens and sum of odds as array
|
||||||
|
|
||||||
|
```sh
|
||||||
|
[2550, 2500]
|
||||||
|
```
|
||||||
|
|
||||||
|
13. Develop a small script which generate array of 5 random numbers
|
||||||
|
14. Develop a small script which generate array of 5 random numbers and the numbers must be unique
|
||||||
|
15. Develop a small script which generate a six characters random id:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
5j2khz
|
||||||
|
```
|
||||||
|
|
||||||
|
16. Develop a small script which generate any number of characters random id:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
fe3jo1gl124g
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh
|
||||||
|
xkqci4utda1lmbelpkm03rba
|
||||||
|
```
|
||||||
|
|
||||||
|
17. Write a script which generates a random hexadecimal number.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
'#ee33df'
|
||||||
|
```
|
||||||
|
|
||||||
|
18. Write a script which generates a random rgb color number.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
rgb(240,180,80)
|
||||||
|
```
|
||||||
|
|
||||||
|
19. Using the above countries array, create the following new array.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
["ALBANIA", "BOLIVIA", "CANADA", "DENMARK", "ETHIOPIA", "FINLAND", "GERMANY", "HUNGARY", "IRELAND", "JAPAN", "KENYA"]
|
||||||
|
```
|
||||||
|
|
||||||
|
20. Using the above countries array, create an array for countries length'.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
[7, 7, 6, 7, 8, 7, 7, 7, 7, 5, 5]
|
||||||
|
```
|
||||||
|
|
||||||
|
21. Use the countries array to create the following array of arrays:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
[
|
||||||
|
['Albania', 'ALB', 7],
|
||||||
|
['Bolivia', 'BOL', 7],
|
||||||
|
['Canada', 'CAN', 6],
|
||||||
|
['Denmark', 'DEN', 7],
|
||||||
|
['Ethiopia', 'ETH', 8],
|
||||||
|
['Finland', 'FIN', 7],
|
||||||
|
['Germany', 'GER', 7],
|
||||||
|
['Hungary', 'HUN', 7],
|
||||||
|
['Ireland', 'IRE', 7],
|
||||||
|
['Japan', 'JAP', 5],
|
||||||
|
['Kenya', 'KEN', 5]
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
22. In above countries array, check if there is a country or countries containing the word 'land'. If there are countries containing 'land', print it as array. If there is no country containing the word 'land', print 'These are countries without land'.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
['Finland', 'Iceland']
|
||||||
|
```
|
||||||
|
|
||||||
|
23. In above countries array, check if there a country or countries end with a substring 'ia'. If there are countries end with, print it as array. If there is no country containing the word 'land', print 'These are countries ends without ia'.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
['Albania', 'Bolivia','Ethiopia']
|
||||||
|
```
|
||||||
|
|
||||||
|
24. Using the above countries array, find the country containing the biggest number of characters.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
Ethiopia
|
||||||
|
```
|
||||||
|
|
||||||
|
25. Using the above countries array, find the country containing only 5 characters.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
['Japan', 'Kenya']
|
||||||
|
```
|
||||||
|
|
||||||
|
26. Find the longest word in the webTechs array
|
||||||
|
27. Use the webTechs are to create the following array of arrays:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
[["HTML", 4], ["CSS", 3],["JavaScript", 10],["React", 5],["Redux", 5],["Node", 4],["MongoDB", 7]]
|
||||||
|
```
|
||||||
|
|
||||||
|
28. An application created using MongoDB, Express, React and Node is called a MERN stack. Create the acronym MERN by using the array mernStack
|
||||||
|
|
||||||
|
29. Iterate through the array, ["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"] using a for loop or for of loop and print out the items.
|
||||||
|
30. This is a fruit array , ['banana', 'orange', 'mango', 'lemon'] reverse the order using loop without using a reverse method.
|
||||||
|
31. Print all the elements of array as shown below.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const fullStack = [
|
||||||
|
['HTML', 'CSS', 'JS', 'React'],
|
||||||
|
['Node', 'Express', 'MongoDB']
|
||||||
|
]
|
||||||
|
````
|
||||||
|
|
||||||
|
```sh
|
||||||
|
HTML
|
||||||
|
CSS
|
||||||
|
JS
|
||||||
|
REACT
|
||||||
|
NODE
|
||||||
|
EXPRESS
|
||||||
|
MONGODB
|
||||||
|
```
|
||||||
|
32. Copy countries array(Avoid mutation)
|
||||||
|
33. Arrays are mutable. Create a copy of array which does not modify the original. Sort the copied array and store in a variable sortedCountries
|
||||||
|
34. Sort the webTechs array and mernStack array
|
||||||
|
35. Extract all the countries contain the word 'land' from the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) and print it as array
|
||||||
|
36. Find the country containing the hightest number of characters in the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
|
||||||
|
37. Extract all the countries contain the word 'land' from the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) and print it as array
|
||||||
|
38. Extract all the countries containing only four characters from the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) and print it as array
|
||||||
|
39. Extract all the countries containing two or more words from the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) and print it as array
|
||||||
|
40. Reverse the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) and capitalize each country and stored it as an array
|
||||||
|
|
||||||
|
🎉 CONGRATULATIONS ! 🎉
|
||||||
|
|
||||||
|
[<< Day 5](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/05_Day/05_day_arrays.md) | [Day 7 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/07_Day/07_day_functions.md)
|
||||||
@ -0,0 +1,195 @@
|
|||||||
|
const countries = [
|
||||||
|
'Afghanistan',
|
||||||
|
'Albania',
|
||||||
|
'Algeria',
|
||||||
|
'Andorra',
|
||||||
|
'Angola',
|
||||||
|
'Antigua and Barbuda',
|
||||||
|
'Argentina',
|
||||||
|
'Armenia',
|
||||||
|
'Australia',
|
||||||
|
'Austria',
|
||||||
|
'Azerbaijan',
|
||||||
|
'Bahamas',
|
||||||
|
'Bahrain',
|
||||||
|
'Bangladesh',
|
||||||
|
'Barbados',
|
||||||
|
'Belarus',
|
||||||
|
'Belgium',
|
||||||
|
'Belize',
|
||||||
|
'Benin',
|
||||||
|
'Bhutan',
|
||||||
|
'Bolivia',
|
||||||
|
'Bosnia and Herzegovina',
|
||||||
|
'Botswana',
|
||||||
|
'Brazil',
|
||||||
|
'Brunei',
|
||||||
|
'Bulgaria',
|
||||||
|
'Burkina Faso',
|
||||||
|
'Burundi',
|
||||||
|
'Cambodia',
|
||||||
|
'Cameroon',
|
||||||
|
'Canada',
|
||||||
|
'Cape Verde',
|
||||||
|
'Central African Republic',
|
||||||
|
'Chad',
|
||||||
|
'Chile',
|
||||||
|
'China',
|
||||||
|
'Colombi',
|
||||||
|
'Comoros',
|
||||||
|
'Congo (Brazzaville)',
|
||||||
|
'Congo',
|
||||||
|
'Costa Rica',
|
||||||
|
"Cote d'Ivoire",
|
||||||
|
'Croatia',
|
||||||
|
'Cuba',
|
||||||
|
'Cyprus',
|
||||||
|
'Czech Republic',
|
||||||
|
'Denmark',
|
||||||
|
'Djibouti',
|
||||||
|
'Dominica',
|
||||||
|
'Dominican Republic',
|
||||||
|
'East Timor (Timor Timur)',
|
||||||
|
'Ecuador',
|
||||||
|
'Egypt',
|
||||||
|
'El Salvador',
|
||||||
|
'Equatorial Guinea',
|
||||||
|
'Eritrea',
|
||||||
|
'Estonia',
|
||||||
|
'Ethiopia',
|
||||||
|
'Fiji',
|
||||||
|
'Finland',
|
||||||
|
'France',
|
||||||
|
'Gabon',
|
||||||
|
'Gambia, The',
|
||||||
|
'Georgia',
|
||||||
|
'Germany',
|
||||||
|
'Ghana',
|
||||||
|
'Greece',
|
||||||
|
'Grenada',
|
||||||
|
'Guatemala',
|
||||||
|
'Guinea',
|
||||||
|
'Guinea-Bissau',
|
||||||
|
'Guyana',
|
||||||
|
'Haiti',
|
||||||
|
'Honduras',
|
||||||
|
'Hungary',
|
||||||
|
'Iceland',
|
||||||
|
'India',
|
||||||
|
'Indonesia',
|
||||||
|
'Iran',
|
||||||
|
'Iraq',
|
||||||
|
'Ireland',
|
||||||
|
'Israel',
|
||||||
|
'Italy',
|
||||||
|
'Jamaica',
|
||||||
|
'Japan',
|
||||||
|
'Jordan',
|
||||||
|
'Kazakhstan',
|
||||||
|
'Kenya',
|
||||||
|
'Kiribati',
|
||||||
|
'Korea, North',
|
||||||
|
'Korea, South',
|
||||||
|
'Kuwait',
|
||||||
|
'Kyrgyzstan',
|
||||||
|
'Laos',
|
||||||
|
'Latvia',
|
||||||
|
'Lebanon',
|
||||||
|
'Lesotho',
|
||||||
|
'Liberia',
|
||||||
|
'Libya',
|
||||||
|
'Liechtenstein',
|
||||||
|
'Lithuania',
|
||||||
|
'Luxembourg',
|
||||||
|
'Macedonia',
|
||||||
|
'Madagascar',
|
||||||
|
'Malawi',
|
||||||
|
'Malaysia',
|
||||||
|
'Maldives',
|
||||||
|
'Mali',
|
||||||
|
'Malta',
|
||||||
|
'Marshall Islands',
|
||||||
|
'Mauritania',
|
||||||
|
'Mauritius',
|
||||||
|
'Mexico',
|
||||||
|
'Micronesia',
|
||||||
|
'Moldova',
|
||||||
|
'Monaco',
|
||||||
|
'Mongolia',
|
||||||
|
'Morocco',
|
||||||
|
'Mozambique',
|
||||||
|
'Myanmar',
|
||||||
|
'Namibia',
|
||||||
|
'Nauru',
|
||||||
|
'Nepal',
|
||||||
|
'Netherlands',
|
||||||
|
'New Zealand',
|
||||||
|
'Nicaragua',
|
||||||
|
'Niger',
|
||||||
|
'Nigeria',
|
||||||
|
'Norway',
|
||||||
|
'Oman',
|
||||||
|
'Pakistan',
|
||||||
|
'Palau',
|
||||||
|
'Panama',
|
||||||
|
'Papua New Guinea',
|
||||||
|
'Paraguay',
|
||||||
|
'Peru',
|
||||||
|
'Philippines',
|
||||||
|
'Poland',
|
||||||
|
'Portugal',
|
||||||
|
'Qatar',
|
||||||
|
'Romania',
|
||||||
|
'Russia',
|
||||||
|
'Rwanda',
|
||||||
|
'Saint Kitts and Nevis',
|
||||||
|
'Saint Lucia',
|
||||||
|
'Saint Vincent',
|
||||||
|
'Samoa',
|
||||||
|
'San Marino',
|
||||||
|
'Sao Tome and Principe',
|
||||||
|
'Saudi Arabia',
|
||||||
|
'Senegal',
|
||||||
|
'Serbia and Montenegro',
|
||||||
|
'Seychelles',
|
||||||
|
'Sierra Leone',
|
||||||
|
'Singapore',
|
||||||
|
'Slovakia',
|
||||||
|
'Slovenia',
|
||||||
|
'Solomon Islands',
|
||||||
|
'Somalia',
|
||||||
|
'South Africa',
|
||||||
|
'Spain',
|
||||||
|
'Sri Lanka',
|
||||||
|
'Sudan',
|
||||||
|
'Suriname',
|
||||||
|
'Swaziland',
|
||||||
|
'Sweden',
|
||||||
|
'Switzerland',
|
||||||
|
'Syria',
|
||||||
|
'Taiwan',
|
||||||
|
'Tajikistan',
|
||||||
|
'Tanzania',
|
||||||
|
'Thailand',
|
||||||
|
'Togo',
|
||||||
|
'Tonga',
|
||||||
|
'Trinidad and Tobago',
|
||||||
|
'Tunisia',
|
||||||
|
'Turkey',
|
||||||
|
'Turkmenistan',
|
||||||
|
'Tuvalu',
|
||||||
|
'Uganda',
|
||||||
|
'Ukraine',
|
||||||
|
'United Arab Emirates',
|
||||||
|
'United Kingdom',
|
||||||
|
'United States',
|
||||||
|
'Uruguay',
|
||||||
|
'Uzbekistan',
|
||||||
|
'Vanuatu',
|
||||||
|
'Vatican City',
|
||||||
|
'Venezuela',
|
||||||
|
'Vietnam',
|
||||||
|
'Yemen',
|
||||||
|
'Zambia',
|
||||||
|
'Zimbabwe'
|
||||||
|
]
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>30DaysOfJavaScript:06 Day </title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>30DaysOfJavaScript:06 Day</h1>
|
||||||
|
<h2>Loops</h2>
|
||||||
|
|
||||||
|
<script src="./data/countries.js"></script>
|
||||||
|
<script src="./scripts/main.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
console.log(countries)
|
||||||
|
alert('Open the console and check if the countries has been loaded')
|
||||||
@ -0,0 +1,195 @@
|
|||||||
|
const countries = [
|
||||||
|
'Afghanistan',
|
||||||
|
'Albania',
|
||||||
|
'Algeria',
|
||||||
|
'Andorra',
|
||||||
|
'Angola',
|
||||||
|
'Antigua and Barbuda',
|
||||||
|
'Argentina',
|
||||||
|
'Armenia',
|
||||||
|
'Australia',
|
||||||
|
'Austria',
|
||||||
|
'Azerbaijan',
|
||||||
|
'Bahamas',
|
||||||
|
'Bahrain',
|
||||||
|
'Bangladesh',
|
||||||
|
'Barbados',
|
||||||
|
'Belarus',
|
||||||
|
'Belgium',
|
||||||
|
'Belize',
|
||||||
|
'Benin',
|
||||||
|
'Bhutan',
|
||||||
|
'Bolivia',
|
||||||
|
'Bosnia and Herzegovina',
|
||||||
|
'Botswana',
|
||||||
|
'Brazil',
|
||||||
|
'Brunei',
|
||||||
|
'Bulgaria',
|
||||||
|
'Burkina Faso',
|
||||||
|
'Burundi',
|
||||||
|
'Cambodia',
|
||||||
|
'Cameroon',
|
||||||
|
'Canada',
|
||||||
|
'Cape Verde',
|
||||||
|
'Central African Republic',
|
||||||
|
'Chad',
|
||||||
|
'Chile',
|
||||||
|
'China',
|
||||||
|
'Colombi',
|
||||||
|
'Comoros',
|
||||||
|
'Congo (Brazzaville)',
|
||||||
|
'Congo',
|
||||||
|
'Costa Rica',
|
||||||
|
"Cote d'Ivoire",
|
||||||
|
'Croatia',
|
||||||
|
'Cuba',
|
||||||
|
'Cyprus',
|
||||||
|
'Czech Republic',
|
||||||
|
'Denmark',
|
||||||
|
'Djibouti',
|
||||||
|
'Dominica',
|
||||||
|
'Dominican Republic',
|
||||||
|
'East Timor (Timor Timur)',
|
||||||
|
'Ecuador',
|
||||||
|
'Egypt',
|
||||||
|
'El Salvador',
|
||||||
|
'Equatorial Guinea',
|
||||||
|
'Eritrea',
|
||||||
|
'Estonia',
|
||||||
|
'Ethiopia',
|
||||||
|
'Fiji',
|
||||||
|
'Finland',
|
||||||
|
'France',
|
||||||
|
'Gabon',
|
||||||
|
'Gambia, The',
|
||||||
|
'Georgia',
|
||||||
|
'Germany',
|
||||||
|
'Ghana',
|
||||||
|
'Greece',
|
||||||
|
'Grenada',
|
||||||
|
'Guatemala',
|
||||||
|
'Guinea',
|
||||||
|
'Guinea-Bissau',
|
||||||
|
'Guyana',
|
||||||
|
'Haiti',
|
||||||
|
'Honduras',
|
||||||
|
'Hungary',
|
||||||
|
'Iceland',
|
||||||
|
'India',
|
||||||
|
'Indonesia',
|
||||||
|
'Iran',
|
||||||
|
'Iraq',
|
||||||
|
'Ireland',
|
||||||
|
'Israel',
|
||||||
|
'Italy',
|
||||||
|
'Jamaica',
|
||||||
|
'Japan',
|
||||||
|
'Jordan',
|
||||||
|
'Kazakhstan',
|
||||||
|
'Kenya',
|
||||||
|
'Kiribati',
|
||||||
|
'Korea, North',
|
||||||
|
'Korea, South',
|
||||||
|
'Kuwait',
|
||||||
|
'Kyrgyzstan',
|
||||||
|
'Laos',
|
||||||
|
'Latvia',
|
||||||
|
'Lebanon',
|
||||||
|
'Lesotho',
|
||||||
|
'Liberia',
|
||||||
|
'Libya',
|
||||||
|
'Liechtenstein',
|
||||||
|
'Lithuania',
|
||||||
|
'Luxembourg',
|
||||||
|
'Macedonia',
|
||||||
|
'Madagascar',
|
||||||
|
'Malawi',
|
||||||
|
'Malaysia',
|
||||||
|
'Maldives',
|
||||||
|
'Mali',
|
||||||
|
'Malta',
|
||||||
|
'Marshall Islands',
|
||||||
|
'Mauritania',
|
||||||
|
'Mauritius',
|
||||||
|
'Mexico',
|
||||||
|
'Micronesia',
|
||||||
|
'Moldova',
|
||||||
|
'Monaco',
|
||||||
|
'Mongolia',
|
||||||
|
'Morocco',
|
||||||
|
'Mozambique',
|
||||||
|
'Myanmar',
|
||||||
|
'Namibia',
|
||||||
|
'Nauru',
|
||||||
|
'Nepal',
|
||||||
|
'Netherlands',
|
||||||
|
'New Zealand',
|
||||||
|
'Nicaragua',
|
||||||
|
'Niger',
|
||||||
|
'Nigeria',
|
||||||
|
'Norway',
|
||||||
|
'Oman',
|
||||||
|
'Pakistan',
|
||||||
|
'Palau',
|
||||||
|
'Panama',
|
||||||
|
'Papua New Guinea',
|
||||||
|
'Paraguay',
|
||||||
|
'Peru',
|
||||||
|
'Philippines',
|
||||||
|
'Poland',
|
||||||
|
'Portugal',
|
||||||
|
'Qatar',
|
||||||
|
'Romania',
|
||||||
|
'Russia',
|
||||||
|
'Rwanda',
|
||||||
|
'Saint Kitts and Nevis',
|
||||||
|
'Saint Lucia',
|
||||||
|
'Saint Vincent',
|
||||||
|
'Samoa',
|
||||||
|
'San Marino',
|
||||||
|
'Sao Tome and Principe',
|
||||||
|
'Saudi Arabia',
|
||||||
|
'Senegal',
|
||||||
|
'Serbia and Montenegro',
|
||||||
|
'Seychelles',
|
||||||
|
'Sierra Leone',
|
||||||
|
'Singapore',
|
||||||
|
'Slovakia',
|
||||||
|
'Slovenia',
|
||||||
|
'Solomon Islands',
|
||||||
|
'Somalia',
|
||||||
|
'South Africa',
|
||||||
|
'Spain',
|
||||||
|
'Sri Lanka',
|
||||||
|
'Sudan',
|
||||||
|
'Suriname',
|
||||||
|
'Swaziland',
|
||||||
|
'Sweden',
|
||||||
|
'Switzerland',
|
||||||
|
'Syria',
|
||||||
|
'Taiwan',
|
||||||
|
'Tajikistan',
|
||||||
|
'Tanzania',
|
||||||
|
'Thailand',
|
||||||
|
'Togo',
|
||||||
|
'Tonga',
|
||||||
|
'Trinidad and Tobago',
|
||||||
|
'Tunisia',
|
||||||
|
'Turkey',
|
||||||
|
'Turkmenistan',
|
||||||
|
'Tuvalu',
|
||||||
|
'Uganda',
|
||||||
|
'Ukraine',
|
||||||
|
'United Arab Emirates',
|
||||||
|
'United Kingdom',
|
||||||
|
'United States',
|
||||||
|
'Uruguay',
|
||||||
|
'Uzbekistan',
|
||||||
|
'Vanuatu',
|
||||||
|
'Vatican City',
|
||||||
|
'Venezuela',
|
||||||
|
'Vietnam',
|
||||||
|
'Yemen',
|
||||||
|
'Zambia',
|
||||||
|
'Zimbabwe'
|
||||||
|
]
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>30DaysOfJavaScript:07 Day </title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>30DaysOfJavaScript:07 Day</h1>
|
||||||
|
<h2>Functions</h2>
|
||||||
|
|
||||||
|
<script src="./data/countries.js"></script>
|
||||||
|
<script src="./scripts/main.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
console.log(countries)
|
||||||
|
alert('Open the console and check if the countries has been loaded')
|
||||||
@ -0,0 +1,493 @@
|
|||||||
|
<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 7](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/07_Day/07_day_functions.md) | [Day 9 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/09_Day/09_day_higher_order_functions.md)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- [📔 Day 8](#%f0%9f%93%94-day-8)
|
||||||
|
- [Scope](#scope)
|
||||||
|
- [Window Scope](#window-scope)
|
||||||
|
- [Global scope](#global-scope)
|
||||||
|
- [Local scope](#local-scope)
|
||||||
|
- [📔 Object](#%f0%9f%93%94-object)
|
||||||
|
- [Creating an empty object](#creating-an-empty-object)
|
||||||
|
- [Creating an objecting with values](#creating-an-objecting-with-values)
|
||||||
|
- [Getting values from an object](#getting-values-from-an-object)
|
||||||
|
- [Creating object methods](#creating-object-methods)
|
||||||
|
- [Setting new key for an object](#setting-new-key-for-an-object)
|
||||||
|
- [Object Methods](#object-methods)
|
||||||
|
- [Getting object keys using Object.keys()](#getting-object-keys-using-objectkeys)
|
||||||
|
- [Getting object values using Object.values()](#getting-object-values-using-objectvalues)
|
||||||
|
- [Getting object keys and values using Object.entries()](#getting-object-keys-and-values-using-objectentries)
|
||||||
|
- [Checking properties using hasOwnProperty()](#checking-properties-using-hasownproperty)
|
||||||
|
- [💻 Exercises](#%f0%9f%92%bb-exercises)
|
||||||
|
|
||||||
|
# 📔 Day 8
|
||||||
|
|
||||||
|
## Scope
|
||||||
|
|
||||||
|
Variable is the fundamental part in programming. We declare variable to store different data types. To declare a variable we use the key word _var_, _let_ and _const_. A variable can declared at different scope. In this section we will see the scope, scope of variables when we use var or let.
|
||||||
|
Variables scopes can be:
|
||||||
|
|
||||||
|
- Window
|
||||||
|
- Global
|
||||||
|
- Local
|
||||||
|
|
||||||
|
Variable can be declared globally or locally or window scope. We will see both global and local scope.
|
||||||
|
Anything declared without let, var or const is scoped at window level.
|
||||||
|
|
||||||
|
Let us image we have a scope.js file.
|
||||||
|
|
||||||
|
### Window Scope
|
||||||
|
|
||||||
|
Without using console.log() open your browser and check, you will see the value of a and b if you write a or b on the browser. That means a and b are already available in the window.
|
||||||
|
|
||||||
|
```js
|
||||||
|
//scope.js
|
||||||
|
a = 'JavaScript' // is a window scope this found anywhere
|
||||||
|
b = 10 // this is a window scope variable
|
||||||
|
function letsLearnScope() {
|
||||||
|
console.log(a, b)
|
||||||
|
if (true) {
|
||||||
|
console.log(a, b)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(a, b) // accessible
|
||||||
|
```
|
||||||
|
|
||||||
|
### Global scope
|
||||||
|
|
||||||
|
A globally declared variable can be access every where in the same file. But the term global is relative. It can be global to the file or it can be global relative to some block of codes.
|
||||||
|
|
||||||
|
```js
|
||||||
|
//scope.js
|
||||||
|
let a = 'JavaScript' // is a global scope it will be found anywhere in this file
|
||||||
|
let b = 10 // is a global scope it will be found anywhere in this file
|
||||||
|
function letsLearnScope() {
|
||||||
|
console.log(a, b) // JavaScript 10, accessible
|
||||||
|
if (true) {
|
||||||
|
let a = 'Python'
|
||||||
|
let b = 100
|
||||||
|
console.log(a, b) // Python 100
|
||||||
|
}
|
||||||
|
console.log(a, b)
|
||||||
|
}
|
||||||
|
letsLearnScope()
|
||||||
|
console.log(a, b) // JavaScript 10, accessible
|
||||||
|
```
|
||||||
|
|
||||||
|
### Local scope
|
||||||
|
|
||||||
|
A local declared variable can be access only certain block code.
|
||||||
|
|
||||||
|
```js
|
||||||
|
//scope.js
|
||||||
|
let a = 'JavaScript' // is a global scope it will be found anywhere in this file
|
||||||
|
let b = 10 // is a global scope it will be found anywhere in this file
|
||||||
|
function letsLearnScope() {
|
||||||
|
console.log(a, b) // JavaScript 10, accessible
|
||||||
|
let c = 30
|
||||||
|
if (true) {
|
||||||
|
// we can access from the function and outside the function but
|
||||||
|
// variables declared inside the if will not be accessed outside the if block
|
||||||
|
let a = 'Python'
|
||||||
|
let b = 20
|
||||||
|
let d = 40
|
||||||
|
console.log(a, b, c) // Python 20 30
|
||||||
|
}
|
||||||
|
// we can not access c because c's scope is only the if block
|
||||||
|
console.log(a, b) // JavaScript 10
|
||||||
|
}
|
||||||
|
letsLearnScope()
|
||||||
|
console.log(a, b) // JavaScript 10, accessible
|
||||||
|
```
|
||||||
|
|
||||||
|
Now, you have an understanding of scope. A variable declared with *var* only scoped to function but variable declared with *let* or *const* is block scope(function block, if block, loop etc)
|
||||||
|
|
||||||
|
```js
|
||||||
|
//scope.js
|
||||||
|
function letsLearnScope() {
|
||||||
|
var gravity = 9.81
|
||||||
|
console.log(gravity)
|
||||||
|
|
||||||
|
}
|
||||||
|
// console.log(gravity), Uncaught ReferenceError: gravity is not defined
|
||||||
|
|
||||||
|
if (true){
|
||||||
|
var gravity = 9.81
|
||||||
|
console.log(gravity) // 9.81
|
||||||
|
}
|
||||||
|
console.log(gravity) // 9.81
|
||||||
|
|
||||||
|
for(var i = 0; i < 3; i++){
|
||||||
|
console.log(i) // 1, 2, 3
|
||||||
|
}
|
||||||
|
console.log(i)
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
In ES6 and above there is *let* and *const*, so you will suffer from the sneakiness of *var*. When we use *let* our variable is block scope and it will not infect other parts of our code.
|
||||||
|
|
||||||
|
```js
|
||||||
|
//scope.js
|
||||||
|
function letsLearnScope() {
|
||||||
|
// you can use let or const, but gravity is constant I prefer to use const
|
||||||
|
const gravity = 9.81
|
||||||
|
console.log(gravity)
|
||||||
|
|
||||||
|
}
|
||||||
|
// console.log(gravity), Uncaught ReferenceError: gravity is not defined
|
||||||
|
|
||||||
|
if (true){
|
||||||
|
const gravity = 9.81
|
||||||
|
console.log(gravity) // 9.81
|
||||||
|
}
|
||||||
|
// console.log(gravity), Uncaught ReferenceError: gravity is not defined
|
||||||
|
|
||||||
|
for(let i = 0; i < 3; i++){
|
||||||
|
console.log(i) // 1, 2, 3
|
||||||
|
}
|
||||||
|
// console.log(i), Uncaught ReferenceError: gravity is not defined
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
The scope *let* and *const* is the same. The difference is only reassigning. We can not change or reassign the value of const variable. I would strongly suggest you to use *let* and *const*, by using *let* and *const* you will writ clean code and avoid hard to debug mistakes. As a rule of thumb, you can use *let* for any value which change, *const* for any constant value, array, object, arrow function and function expression.
|
||||||
|
|
||||||
|
## 📔 Object
|
||||||
|
|
||||||
|
Everything can be an object and objects do have properties and properties have values, so an object is key value pair. The order of the key is not reserved, or there is no order.
|
||||||
|
Creating an object literal. To create an object literal, we use two curly brackets.
|
||||||
|
|
||||||
|
### Creating an empty object
|
||||||
|
|
||||||
|
An empty object
|
||||||
|
|
||||||
|
```js
|
||||||
|
const person = {}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Creating an objecting with values
|
||||||
|
|
||||||
|
Now, the person object has firstName, lastName, age, location, skills and isMarried properties. The value of properties or keys could be a string, number, boolean, an object, null, undefined or a function.
|
||||||
|
|
||||||
|
Let us see some examples of object. Each key has a value in object.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const rectangle = {
|
||||||
|
length: 20,
|
||||||
|
width: 20
|
||||||
|
}
|
||||||
|
console.log(rectangle) // {length: 20, width: 20}
|
||||||
|
|
||||||
|
const person = {
|
||||||
|
firstName: 'Asabeneh',
|
||||||
|
lastName: 'Yetayeh',
|
||||||
|
age: 250,
|
||||||
|
country: 'Finland',
|
||||||
|
city: 'Helsinki',
|
||||||
|
skills: [
|
||||||
|
'HTML',
|
||||||
|
'CSS',
|
||||||
|
'JavaScript',
|
||||||
|
'React',
|
||||||
|
'Node',
|
||||||
|
'MongoDB',
|
||||||
|
'Python',
|
||||||
|
'D3.js'
|
||||||
|
],
|
||||||
|
isMarried: true
|
||||||
|
}
|
||||||
|
console.log(person)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Getting values from an object
|
||||||
|
|
||||||
|
We can access values of object using two methods:
|
||||||
|
|
||||||
|
- using . followed by key name if the key-name is a one word
|
||||||
|
- using square bracket and a quote
|
||||||
|
|
||||||
|
```js
|
||||||
|
const person = {
|
||||||
|
firstName: 'Asabeneh',
|
||||||
|
lastName: 'Yetayeh',
|
||||||
|
age: 250,
|
||||||
|
country: 'Finland',
|
||||||
|
city: 'Helsinki',
|
||||||
|
skills: [
|
||||||
|
'HTML',
|
||||||
|
'CSS',
|
||||||
|
'JavaScript',
|
||||||
|
'React',
|
||||||
|
'Node',
|
||||||
|
'MongoDB',
|
||||||
|
'Python',
|
||||||
|
'D3.js'
|
||||||
|
],
|
||||||
|
getFullName: function() {
|
||||||
|
return `${this.firstName}${this.lastName}`
|
||||||
|
},
|
||||||
|
'phone number': '+3584545454545'
|
||||||
|
}
|
||||||
|
|
||||||
|
// accessing values using .
|
||||||
|
console.log(person.firstName)
|
||||||
|
console.log(person.lastName)
|
||||||
|
console.log(person.age)
|
||||||
|
console.log(person.location)
|
||||||
|
|
||||||
|
// value can be accessed using square bracket and key name
|
||||||
|
console.log(person['firstName'])
|
||||||
|
console.log(person['lastName'])
|
||||||
|
console.log(person['age'])
|
||||||
|
console.log(person['age'])
|
||||||
|
console.log(person['location'])
|
||||||
|
|
||||||
|
// for instance to access the phone number we only use the square bracket method
|
||||||
|
console.log(person['phone number'])
|
||||||
|
```
|
||||||
|
|
||||||
|
### Creating object methods
|
||||||
|
|
||||||
|
Now, the person object has getFullName properties. The getFullName is function inside the person object and we call it an object method. The _this_ key word refers to the object itself. We can use the word _this_ to access the values of different properties of the object. We can not use an arrow function as object method because the word this refers to the window inside an arrow function instead of the object itself. Example of object:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const person = {
|
||||||
|
firstName: 'Asabeneh',
|
||||||
|
lastName: 'Yetayeh',
|
||||||
|
age: 250,
|
||||||
|
country: 'Finland',
|
||||||
|
city: 'Helsinki',
|
||||||
|
skills: [
|
||||||
|
'HTML',
|
||||||
|
'CSS',
|
||||||
|
'JavaScript',
|
||||||
|
'React',
|
||||||
|
'Node',
|
||||||
|
'MongoDB',
|
||||||
|
'Python',
|
||||||
|
'D3.js'
|
||||||
|
],
|
||||||
|
getFullName: function() {
|
||||||
|
return `${this.firstName} ${this.lastName}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(person.getFullName())
|
||||||
|
// Asabeneh Yetayeh
|
||||||
|
```
|
||||||
|
|
||||||
|
### Setting new key for an object
|
||||||
|
|
||||||
|
An object is a mutable data structure and we can modify the content of an object after it gets created.
|
||||||
|
|
||||||
|
Setting a new keys in an object
|
||||||
|
|
||||||
|
```js
|
||||||
|
const person = {
|
||||||
|
firstName: 'Asabeneh',
|
||||||
|
lastName: 'Yetayeh',
|
||||||
|
age: 250,
|
||||||
|
country: 'Finland',
|
||||||
|
city: 'Helsinki',
|
||||||
|
skills: [
|
||||||
|
'HTML',
|
||||||
|
'CSS',
|
||||||
|
'JavaScript',
|
||||||
|
'React',
|
||||||
|
'Node',
|
||||||
|
'MongoDB',
|
||||||
|
'Python',
|
||||||
|
'D3.js'
|
||||||
|
],
|
||||||
|
getFullName: function() {
|
||||||
|
return `${this.firstName} ${this.lastName}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
person.nationality = 'Ethiopian'
|
||||||
|
person.country = 'Finland'
|
||||||
|
person.title = 'teacher'
|
||||||
|
person.skills.push('Meteor')
|
||||||
|
person.skills.push('SasS')
|
||||||
|
person.isMarried = true
|
||||||
|
|
||||||
|
person.getPersonInfo = function() {
|
||||||
|
let skillsWithoutLastSkill = this.skills
|
||||||
|
.splice(0, this.skills.length - 1)
|
||||||
|
.join(', ')
|
||||||
|
let lastSkill = this.skills.splice(this.skills.length - 1)[0]
|
||||||
|
|
||||||
|
let skills = `${skillsWithoutLastSkill}, and ${lastSkill}`
|
||||||
|
let fullName = this.getFullName()
|
||||||
|
let statement = `${fullName} is a ${this.title}.\nHe lives in ${this.country}.\nHe teaches ${skills}.`
|
||||||
|
return statement
|
||||||
|
}
|
||||||
|
console.log(person)
|
||||||
|
console.log(person.getPersonInfo())
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh
|
||||||
|
Asabeneh Yetayeh is a teacher.
|
||||||
|
He lives in Finland.
|
||||||
|
He teaches HTML, CSS, JavaScript, React, Node, MongoDB, Python, D3.js, Meteor, and SasS.
|
||||||
|
```
|
||||||
|
|
||||||
|
### Object Methods
|
||||||
|
|
||||||
|
There are different methods to manipulate an object. Let us see some of the available methods.
|
||||||
|
|
||||||
|
_Object.assign_: To copy an object without modifying the original object
|
||||||
|
|
||||||
|
```js
|
||||||
|
const person = {
|
||||||
|
firstName: 'Asabeneh',
|
||||||
|
age: 250,
|
||||||
|
country: 'Finland',
|
||||||
|
city:'Helsinki',
|
||||||
|
skills: ['HTML', 'CSS', 'JS'],
|
||||||
|
title: 'teacher',
|
||||||
|
address: {
|
||||||
|
street: 'Heitamienkatu 16',
|
||||||
|
pobox: 2002,
|
||||||
|
city: 'Helsinki'
|
||||||
|
},
|
||||||
|
getPersonInfo: function() {
|
||||||
|
return `I am ${this.firstName} and I live in ${city}, ${this.country}. I am ${this.age}.`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Object methods: Object.assign, Object.keys, Object.values, Object.entries
|
||||||
|
//hasOwnProperty
|
||||||
|
|
||||||
|
const copyPerson = Object.assign({}, person)
|
||||||
|
console.log(copyPerson)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Getting object keys using Object.keys()
|
||||||
|
|
||||||
|
_Object.keys_: To get the keys or properties of an object as an array
|
||||||
|
|
||||||
|
```js
|
||||||
|
const keys = Object.keys(copyPerson)
|
||||||
|
console.log(keys) //['name', 'age', 'country', 'skills', 'address', 'getPersonInfo']
|
||||||
|
const address = Object.keys(copyPerson.address)
|
||||||
|
console.log(address) //['street', 'pobox', 'city']
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Getting object values using Object.values()
|
||||||
|
|
||||||
|
_Object.values_:To get values of an object as an array
|
||||||
|
|
||||||
|
```js
|
||||||
|
const values = Object.values(copyPerson)
|
||||||
|
console.log(values)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Getting object keys and values using Object.entries()
|
||||||
|
|
||||||
|
_Object.entries_:To get the keys and values in an array
|
||||||
|
|
||||||
|
```js
|
||||||
|
const entries = Object.entries(copyPerson)
|
||||||
|
console.log(entries)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Checking properties using hasOwnProperty()
|
||||||
|
|
||||||
|
_hasOwnProperty_: To check if a specific key or property exist in an object
|
||||||
|
|
||||||
|
```js
|
||||||
|
console.log(copyPerson.hasOwnProperty('name'))
|
||||||
|
console.log(copyPerson.hasOwnProperty('score'))
|
||||||
|
```
|
||||||
|
|
||||||
|
🌕 You are astonishing. Now, you are super charged with the power of objects. You have just completed day 7 challenges and you are 7 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 object called dog
|
||||||
|
1. Print the the dog object on the console
|
||||||
|
1. Add name, legs, color, age and bark properties for the dog object. The bark property is a method which return _woof woof_
|
||||||
|
1. Get name, legs, color, age and bark value from the dog object
|
||||||
|
1. Set new properties the dog object: breed, getDogInfo
|
||||||
|
1. Create an object literal called _personAccount_. It has _firstName, lastName, incomes, expenses_ properties and it has _totalIncome, totalExpense, accountInfo,addIncome, addExpense_ and _accountBalance_ methods. Incomes is a set of incomes and its description and expenses is a set of incomes and its description.
|
||||||
|
1. Count logged in users,count users having greater than equal to 50 points from the following object.
|
||||||
|
|
||||||
|
````js
|
||||||
|
const users = {
|
||||||
|
Alex: {
|
||||||
|
email: 'alex@alex.com',
|
||||||
|
skills: ['HTML', 'CSS', 'JavaScript'],
|
||||||
|
age: 20,
|
||||||
|
isLoggedIn: false,
|
||||||
|
points: 30
|
||||||
|
},
|
||||||
|
Asab: {
|
||||||
|
email: 'asab@asab.com',
|
||||||
|
skills: ['HTML', 'CSS', 'JavaScript', 'Redux', 'MongoDB', 'Express', 'React', 'Node'],
|
||||||
|
age: 25,
|
||||||
|
isLoggedIn: false,
|
||||||
|
points: 50
|
||||||
|
},
|
||||||
|
Brook: {
|
||||||
|
email: 'daniel@daniel.com',
|
||||||
|
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'],
|
||||||
|
age: 30,
|
||||||
|
isLoggedIn: true,
|
||||||
|
points: 50
|
||||||
|
},
|
||||||
|
Daniel: {
|
||||||
|
email: 'daniel@alex.com',
|
||||||
|
skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
|
||||||
|
age: 20,
|
||||||
|
isLoggedIn: false,
|
||||||
|
points: 40
|
||||||
|
},
|
||||||
|
John: {
|
||||||
|
email: 'john@john.com',
|
||||||
|
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'],
|
||||||
|
age: 20,
|
||||||
|
isLoggedIn: true,
|
||||||
|
points: 50
|
||||||
|
},
|
||||||
|
Thomas: {
|
||||||
|
email: 'thomas@thomas.com',
|
||||||
|
skills: ['HTML', 'CSS', 'JavaScript', 'React'],
|
||||||
|
age: 20,
|
||||||
|
isLoggedIn: false,
|
||||||
|
points: 40
|
||||||
|
},
|
||||||
|
Paul: {
|
||||||
|
email: 'paul@paul.com',
|
||||||
|
skills: ['HTML', 'CSS', 'JavaScript', 'MongoDB', 'Express', 'React', 'Node'],
|
||||||
|
age: 20,
|
||||||
|
isLoggedIn: false,
|
||||||
|
points: 40
|
||||||
|
}
|
||||||
|
}```
|
||||||
|
|
||||||
|
````
|
||||||
|
|
||||||
|
1. Find people who are MERN stack developer from the users object
|
||||||
|
1. Set your name in the users object without modifying the original users object
|
||||||
|
1. Get all keys or properties of users object
|
||||||
|
1. Get all the values of users object
|
||||||
|
1. Use the countries object to print a country name, capital, populations and languages.
|
||||||
|
|
||||||
|
|
||||||
|
🎉 CONGRATULATIONS ! 🎉
|
||||||
|
|
||||||
|
[<< Day 7](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/07_Day/07_day_functions.md) | [Day 9 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/09_Day/09_day_higher_order_functions.md)
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>30DaysOfJavaScript:08 Day </title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>30DaysOfJavaScript:08 Day</h1>
|
||||||
|
<h2>Objects</h2>
|
||||||
|
|
||||||
|
<script src="./data/countries_data.js"></script>
|
||||||
|
<script src="./scripts/main.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
console.log(countries)
|
||||||
|
alert('Open the console and check if the countries has been loaded')
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>30DaysOfJavaScript:09 Day </title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>30DaysOfJavaScript:09 Day</h1>
|
||||||
|
<h2>Functional Programming</h2>
|
||||||
|
|
||||||
|
<script src="./data/countries_data.js"></script>
|
||||||
|
<script src="./scripts/main.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
console.log(countries)
|
||||||
|
alert('Open the console and check if the countries has been loaded')
|
||||||
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
Loading…
Reference in new issue