Skip to content

Commit

Permalink
remov es unnecessary dependencies
Browse files Browse the repository at this point in the history
complete day 9 contents
  • Loading branch information
Jaxolotl committed Sep 26, 2019
1 parent 5b103dc commit 26978fd
Show file tree
Hide file tree
Showing 5 changed files with 493 additions and 322 deletions.
11 changes: 4 additions & 7 deletions .babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,10 @@
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": "3.0.0"
"targets": {
"node": "current"
}
}
]
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties"
]
}
}
13 changes: 4 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -143,18 +143,13 @@ A lot of information has been written about JavaScript and EcmaScript since both
- <https://medium.com/@sho.miyata.1/the-object-oriented-programming-vs-functional-programming-debate-in-a-beginner-friendly-nutshell-24fb6f8625cc>
- ...
- .. good practices
- DAY9
- Event Loop
- <https://github.com/Jaxolotl-Didactic-Lab/useful-info/blob/develop/web%20api%20-%20event%20loop.md>
- <https://developer.mozilla.org/en-US/search?q=API>
- ..
- [DAY 9](/day_09.md)
- Asynchronous programming
- Event Loop
- Callback
- <https://developer.mozilla.org/en-US/docs/Glossary/Callback_function>
- <https://en.wikipedia.org/wiki/Callback_(computer_programming)>
- Promise
- Promises
- Async/Await
- .. good practices
- Exercises
- DAY 10
- The runtimes
- Web Browser
Expand Down
91 changes: 89 additions & 2 deletions day_09.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
- Callback
- Promises
- Async/Await
- .. good practices
- Exercises

## Asynchronous programming

Expand Down Expand Up @@ -118,6 +118,16 @@ Imagine this:
That's something you are used to do with other people, isn't it?

#### Syntax

```javascript
new Promise(executor);
// or
new Promise((resolve, reject) => {
executor body
});
```

Well, Promises work kinda that.

```javascript
Expand Down Expand Up @@ -156,7 +166,84 @@ Too much talking, let go to the best sources you can get.

### Async/await

...
Wait what? we were talking about ES2015 but this is not an ES2015 feature, nor ES2016!! We had to wait until ES2017 (ES8?? nope, remember that's not the way to name ES versions anymore) to have it.
Then why are we talking about this? Simply because is one of the most important tools (together with generators and promises) to write asynchronous programs in JavaScript today.

Imagine there's a feature to handle under the hood a the event loop and the promises to **operate asynchronously BUT resembles synchronous** code on its syntax. Since many program errors are originated on the difficulty of understanding a complex structure (e.g. like a promise chain) this feature might help with that, isn't it?

First things first. If we go to the [ECMA2017 - 9.2 - ECMAScript Function Objects definition](https://www.ecma-international.org/ecma-262/8.0/index.html#sec-ecmascript-function-objects) we'll find that `async` is one of the 4 kinds of functions `normal`, `classConstructor`, `generator`and `async`, and if you search "async" there list of results is around 450. There's a lot to read there if you want; I'd suggest you start reading ad the [14.6 - Async Function Definition](https://www.ecma-international.org/ecma-262/8.0/index.html#sec-async-function-definitions).

Again, even if the spec gets more sweet and friendly over time, it's still dry (but it'd be IMHO the first thing to read).

Let's go for something more friendly.

#### Async Function declaration statement

> The async function declaration defines an asynchronous function, which returns an [AsyncFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction) object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to return its result. But the syntax and structure of your code using async functions is much more like using standard synchronous functions.
>
> You can also define async functions using an [async function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/async_function).
>
> Source: [MDN: Async Function declaration statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
##### Syntax

```javascript
async function name([param[, param[, ... param]]]) {
statements
}
```

#### Async Function expression

> An async function expression is very similar to, and has almost the same syntax as, an async function statement. The main difference between an async function expression and an async function statement is the function name, which can be omitted in async function expressions to create anonymous functions. An async function expression can be used as an IIFE (Immediately Invoked Function Expression) which runs as soon as it is defined. See also the chapter about functions for more information.
>
> Source: [MDN - async function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/async_function)
##### Syntax

```javascript
async function [name]([param1[, param2[, ..., paramN]]]) {
statements
}
```

#### Async Function constructor

> async function objects created with the AsyncFunction constructor are parsed when the function is created. This is less efficient than declaring an async function with an async function expression and calling it within your code, because such functions are parsed with the rest of the code.
>
All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.
>
Invoking the AsyncFunction constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.
>
> Source: [MDN - AsyncFunction constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction)
##### Syntax

Note that AsyncFunction is not a global object. It could be obtained by evaluating the following code.

```javascript
var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor

new AsyncFunction([arg1[, arg2[, ...argN]],] functionBody);
```

#### Await

> The `await` expression causes `async` function execution to pause until a `Promise` is settled, that is fulfilled or rejected, and to resume execution of the async function after fulfillment. When resumed, the value of the `await` expression is that of the fulfilled `Promise`.
>
> If the `Promise` is rejected, the `await` expression throws the rejected value.
>
> If the value of the expression following the `await` operator is not a `Promise`, it's converted to a [resolved Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve).
>
> An await can split execution flow, allowing the caller of the `await`'s function to resume execution before the deferred continuation of the `await`'s function. After the `await` defers the continuation of its function, if this is the first await executed by the function, immediate execution also continues by returning to the function's caller a pending `Promise` for the completion of the `await`'s function and resuming execution of that caller.
>
> Source: [MDN - await operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)
##### Syntax

```javascript
[rv] = await expression;
```

---

Expand Down
Loading

0 comments on commit 26978fd

Please sign in to comment.