Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Commit 953fde7

Browse files
NoerGitKatNoerGitKat
committed
added content w2/w3
1 parent 56058fd commit 953fde7

2 files changed

Lines changed: 245 additions & 80 deletions

File tree

‎Week2/README.md‎

Lines changed: 136 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ These are the topics for week 2:
77
1. JavaScript Versions
88
2. Promises
99
- Callback Hell
10+
- Promise States
11+
- Chaining
12+
- Benefits
1013
3. Arrow functions
1114
- 'this' keyword
1215
4. Fetch API
13-
5. Thinking Like a Programmer III
1416

1517
## 1. JavaScript Versions
1618

@@ -26,19 +28,22 @@ function aFunction() {
2628

2729
You did so using an old version of JavaScript.
2830

29-
But if you've ever used `arrow` functions (which you'll learn more about in the next section), you did so using a newer version of JavaScript.
31+
But if you've ever used `Arrow Functions` (which you'll learn more about in the next section), you did so using a newer version of JavaScript.
3032

31-
That's good and all, but why is this important to differentiate? There are several reasons:
33+
Each feature (and its updates) of a language is made to solve a specific problem. It's important to know the context and purpose of each to know how to use it.
3234

33-
- Each feature (and its updates) of a language is made to solve a specific problem. It's important to know the context and purpose of each to know how to use it
34-
- Software is always evolving. This means that there are different versions that different users might be using. This means not every feature will work for every application.
35+
Always be mindful of which **version** of any technology, library or language you are using. This is important, because this means that not everything will work the same way, even if it's the same tool you've been using! In your coding journey you'll come across many code bases that will include different versions of technologies.
3536

36-
That's why it's important to know a little about the history of JavaScript: it will make you think of JavaScript (and hopefully software in general) as a continually evolving thing, as opposed to "just a bunch of concepts and techniques you need to memorize".
37+
Software is always evolving. This means that there are different versions that different users might be using. This means not every feature will work for every application.
38+
39+
Because of this evolutionary nature of software, it's important to know a little about the history of the language you're using. In our case this is JavaScript, and by knowing about its history this will help you think of it as a continually evolving thing, as opposed to "just a bunch of concepts and techniques you need to memorize".
3740

3841
Check the following resources out to learn more about this:
3942

4043
- [The History of JavaScript | Why is JavaScript also called ECMAScript?](https://www.youtube.com/watch?v=JpwxjkpZfhY)
4144
- [The Weird History of JavaScript](https://www.youtube.com/watch?v=Sh6lK57Cuk4)
45+
- [What Is ES6, ES2015, ES2016, ES2017 & ESNext](https://www.youtube.com/watch?v=9A_jkh2AKR8)
46+
- [The Future of JavaScript - New Features and Disruptive Trends in 2020](https://www.youtube.com/watch?v=f0DrPLKf6Ro)
4247

4348
## 2. Promises
4449

@@ -50,74 +55,165 @@ But what if you want to have callbacks within callbacks... within callbacks? Thi
5055

5156
- [Callback Hell](http://callbackhell.com/)
5257

53-
This is where `Promises` come in. The concept of a Promise, in execution, doesn't add anything new. It does exactly what callbacks aim to do, which is enabling asynchronous actions: for example, clicking a button to load in an image, while still being able to navigate the webpage.
58+
This is where `Promises` come in. The idea of the `Promise` is a product of the evolution within the JavaScript language. A bunch of JavaScript developers wanted to figure out how to solve the problem of callback hell and this is what they came up with. Here's a basic example:
59+
60+
```js
61+
const promise = new Promise(function (resolve, reject) {
62+
if (true) {
63+
resolve('It has succeeded!');
64+
} else {
65+
reject('It has failed...');
66+
}
67+
});
68+
```
69+
70+
### Promise States
71+
72+
A promise can be in 1 of 3 states:
5473

55-
What a Promise does is make writing callbacks more readable for you, the developer. This is its main benefit. In effect, you could call Promises the updated version of callbacks. Callbacks version 2.0.
74+
1. Pending: The asynchronous code is being executed, with no result yet
75+
2. Fulfilled (resolved): The asynchronous code has successfully been executed without problems
76+
3. Rejected: The asynchronous code has failed because of some error
77+
78+
When a Promises is executed it will first execute the asynchronous code inside. In this process it will go into the `pending` state. After, depending on if it succeeded or not, it will be `resolved` or `rejected`.
79+
80+
### Chaining
81+
82+
What if you need to perform several asynchronous operations, that depend on the result of the one that came before it? For that we can use the `.then()` method: a special function, given to us by the Promise object, that allows us to directly use the return value of the asynchronous operation that happened before. Here's an example:
83+
84+
```js
85+
new Promise(function (resolve, reject) {
86+
setTimeout(() => resolve(1), 1000); // We wait 1 second and then resolve with value 1
87+
})
88+
.then(function (result) {
89+
console.log(result); // Result: 1
90+
return result * 2;
91+
})
92+
.then(function (result) {
93+
alert(result); // Result: 2
94+
return result * 2;
95+
})
96+
.catch((error) => {
97+
console.log(error);
98+
});
99+
```
100+
101+
By chaining the Promise we can gain greater control over the results of our asynchronous operations!
102+
103+
### Benefits
104+
105+
The concept of a Promise, in execution, doesn't add anything new. It does exactly what callbacks aim to do, which is enabling `asynchronous actions`: for example, clicking a button to load in an image, while still being able to navigate the webpage.
106+
107+
So what are the benefits of using a Promise over a callback? Here's a few:
108+
109+
1. It makes writing asynchronous JavaScript code more readable for you, the developer. In effect, you could call Promises the updated version of callbacks. Callbacks version 2.0.
110+
2. Better error handling, because of the `catch` block attached at the end. When something goes wrong within the Promise structure, it will throw an error. This error will then be caught and handled within the `catch` block.
56111

57112
Go through the following resources to learn more about Promises:
58113

114+
- [JavaScript Promises for Dummies](https://scotch.io/tutorials/javascript-promises-for-dummies)
59115
- [Let's learn ES6 - Promises](https://www.youtube.com/watch?v=vQ3MoXnKfuQ)
116+
- [JavaScript Promise in 100 Seconds](https://www.youtube.com/watch?v=RvYYCGs45L4)
60117
- [A Simple Guide to ES6 Promises](https://codeburst.io/a-simple-guide-to-es6-promises-d71bacd2e13a)
61-
- [Promises](https://www.github.com/hackyourfuture/fundamentals/blob/master/fundamentals/promises.md)
62118

63-
## 3. Arrow functions
119+
## 3. Arrow Functions
64120

65-
One of a programmer's favorite things to do is to write clean and concise code. Arrow functions are a new way to write functions, given to us by the ECMAScript 6 (The software standard JavaScript is based upon) update of JavaScript.
121+
One of a programmer's favorite things to do is to write clean and concise code. `Arrow Functions` are a new way to write functions, given to us by the ECMAScript 6 (The software standard JavaScript is based upon) update of JavaScript.
66122

67-
It is written like this:
123+
It's a little different from regular functions, take a look:
68124

69125
```js
70-
const numbers = [2, 3, 7, 8];
71-
72-
//classical way
73-
function isBiggerThanFive(number) {
74-
if (number > 5) return true;
75-
else return false;
126+
// ES5 Function
127+
function addNum(num1, num2) {
128+
return num1 + num2;
76129
}
77-
console.log(numbers.filter(isBiggerThanFive));
78-
79-
// Arrow function
80-
console.log(
81-
numbers.filter((number) => {
82-
if (number > 5) return true;
83-
else return false;
84-
}),
85-
);
86-
87-
// or even shorter, if one arguments no need for (), if return statement no need for {}
88-
console.log(numbers.filter((number) => number > 5));
130+
131+
// Arrow Function (stored in variable)
132+
const addNum = (num1, num2) => {
133+
return num1 + num2;
134+
};
89135
```
90136

91-
Go through the following resources to learn more about why arrow functions are important:
137+
If you've done some research, you may come to the following conclusions:
138+
139+
1. First of all, the Arrow Function is anonymous by design. If we want to refer to it, we should store it into a variable.
140+
2. Secondly, the way Arrow Functions can be written can differ (while still working the same way). Sometimes you don't need the `()` if there's a single or no parameters. Sometimes you can `return` a value without use for the `return` keyword.
141+
142+
Another big important feature of Arrow Functions (and difference with ES5 functions) is the way they relate to the `this` keyword: instead of creating a new `this` object, it actually inherits it from the parent scope!
143+
144+
If this sounds incomprehensible still, not to worry. In the next section will dive deep into the `this` keyword: what it means and how we can make use of it.
145+
146+
For now, go through the following resources to learn more about why arrow functions are important:
92147

93148
- [JavaScript ES6 Arrow Functions](https://www.youtube.com/watch?v=h33Srr5J9nY)
94-
- [Let's learn ES6 - Arrow functions](https://www.youtube.com/watch?v=oTRujqZYhrU)
149+
- [Let's learn ES6 - Arrow Functions](https://www.youtube.com/watch?v=oTRujqZYhrU)
95150
- [When (and why) you should use ES6 arrow functions — and when you shouldn’t](https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/)
96151

97152
### The `this` keyword
98153

99-
In JavaScript, like in any other programming language you'll find, there are certain special keywords that always create a specific effect. The `this` keyword is one of those.
154+
In everyday communication, we use words like "this" or "that" whenever we want to refer to things in the world or something someone said. It's similarly used in JavaScript, only instead of real-world things we refer to objects.
155+
156+
In JavaScript `this` refers to any object it's defined in. The global object, `window` is the default value of `this`. So if you go to your console right now and type `this`, you'll get back a reference to the `window` object. The same thing would happen if you to log `this` inside of your JavaScript file:
157+
158+
```js
159+
console.log('what is', this);
160+
```
161+
162+
However, this isn't the only value `this` can have. The moment we create a new object, we create a new `this` keyword that refers to only that object.
163+
164+
```js
165+
const wouter = {
166+
firstName: 'Wouter',
167+
lastName: 'Kleijn',
168+
getFullName: function () {
169+
return this.firstName + ' ' + this.lastName;
170+
},
171+
};
172+
```
173+
174+
In this example `this` refers to the complete `wouter` object. If we execute `wouter.getFullName()`, we get back the value of `wouter.firstName` and `wouter.lastName`.
100175

101-
In everyday communication, we use words like "this" or "that" whenever we want to refer to things in the world or something someone said. It's similarly used in JavaScript.
176+
```js
177+
wouter.getFullName; // Result: Wouter Kleijn
178+
```
102179

103-
Simply put: `this` refers to any object it's defined in. The global object, `window` is the default value of `this`. However, anything a new object is created will have its own `this` value.
180+
As you can imagine, this means that there can be multiple `this` keywords at play: the global `this` keyword (which refers to the `window` object) and a `this` keyword for every object that is created within the application.
104181

105182
Go through the following resources to learn more about `this`:
106183

107-
- [Understanding "this" in JavaScript](https://www.codementor.io/dariogarciamoya/understanding--this--in-javascript-du1084lyn)
184+
- [What is THIS in JavaScript? in 100 seconds](https://www.youtube.com/watch?v=YOlr79NaAtQ)
108185
- [JavaScript "this" keyword](https://www.youtube.com/watch?v=gvicrj31JOM)
186+
- [Understanding "this" in JavaScript](https://www.codementor.io/dariogarciamoya/understanding--this--in-javascript-du1084lyn)
109187

110188
## 4. Fetch API
111189

112-
Last week you learned about making HTTP Requests. You learned how to do this using the XHR object, which we can access through the browser's `window` object.
190+
Last week you learned about making HTTP Requests. You learned how to do this using the `XHR` object, which we can access through the browser's `window` object.
113191

114192
Now as we've learned in the previous sections, JavaScript as a language evolves continually. But so do browsers! New features get added to increase the user experience and make life easier for developers.
115193

116-
One of those features added to browsers is an upgraded version of the XHR object. It's called `fetch` and it's the modern way to make HTTP Requests. It incorporates Promises, making it easier to handle your server responses.
194+
One of those features added to browsers is an upgraded version of the XHR object. It's called the `Fetch API` and it's the modern way to making HTTP Requests. It incorporates Promises, making it easier to handle your server responses. Here's a basic example:
195+
196+
```js
197+
fetch('https://pokeapi.co/api/v2/pokemon')
198+
.then((response) => {
199+
return response.json();
200+
})
201+
.then((data) => {
202+
console.log('Pokemon data', data);
203+
return data;
204+
})
205+
.catch((error) => {
206+
console.log('err', error);
207+
});
208+
```
209+
210+
Where is this function defined, you may wonder? Simple: it's found in the global `window` object in the browser. You can check it out by opening your console in the browser. Type in `fetch` and you'll get back a function definition.
211+
212+
When your JavaScript file is loaded into the DOM, it automatically will have access to any of the browser's web APIs (one if which is the `Fetch API`). That's why you can use it in your JavaScript files.
117213

118-
A `fetch` function is now provided in the global `window` scope in the browser. You can check it out by opening your developers tools and searching for `fetch`. Keep in mind that `fetch` only works on newer browser version. To figure out which browsers can use fetch, check [this](https://caniuse.com/#feat=fetch) out.
214+
> Keep in mind that `fetch` only works on newer browser versions. To figure out which browsers can use fetch, check [this](https://caniuse.com/#feat=fetch) out.
119215
120-
Learn more about `fetch`:
216+
To learn more and practice with the `Fetch API`, check out the following:
121217

122218
- [Fetch API Introduction](https://www.youtube.com/watch?v=Oive66jrwBs)
123219
- [Sending JavaScript Http Requests with the fetch() API](https://www.youtube.com/watch?v=23hrM4saaMk)

0 commit comments

Comments
 (0)