diff --git a/resources/docs/docs/chapters/tp/arrow-functions.md b/resources/docs/docs/chapters/tp/arrow-functions.md index 83c8c11089a2fc10ae2933a89dff5cbe56837448..625646398e4b558f48a61a816656338456082242 100644 --- a/resources/docs/docs/chapters/tp/arrow-functions.md +++ b/resources/docs/docs/chapters/tp/arrow-functions.md @@ -50,116 +50,93 @@ Waiting a certain amount of time can be easily done using the [`setTimeout()`](h Follow `TODO #arrow-function` comments for instructions. > Example: > - > anonymous function + > === "Anonymous function" > - > ```js - > setTimeout(function () { - > console.log("after 1s"); - > }, 1000); - > ``` + > ``` js + > setTimeout(function () { + > console.log("after 1s"); + > }, 1000); + > ``` > - > arrow function + > === "Arrow function" > - > ```js - > setTimeout(() => { - > console.log("after 1s"); - > }, 1000); - > ``` + > ``` js + > setTimeout(() => { + > console.log("after 1s"); + > }, 1000); + > ``` > - > arrow function - single line + > === "Arrow function - single line" > - > ```js{} - > setTimeout(() => console.log("after 1s"), 1000); - > - > - > ``` + > ``` js + > setTimeout(() => console.log("after 1s"), 1000); + > ``` > **danger** Regular functions declared with the **`function` keyword have `this` inherited from the caller**, whereas **arrow functions have a `this` inherited from the declaring scope**. <details><summary> Show the game.js file </summary> - game.js - with function - - ```javascript - export class GameComponent { - goToScore() { - // ... - setTimeout( - function () { - const scorePage = "#score"; - scorePage + - "?name=" + - this._name + - "&size=" + - this._size + - "&time=" + - timeElapsedInSeconds; - }.bind(this), - 750 - ); - } - } - ``` - - game.js - with arrow function - - ```javascript - export class GameComponent { - goToScore() { - // ... - setTimeout(() => { - const scorePage = "#score"; - scorePage + - "?name=" + - this._name + - "&size=" + - this._size + - "&time=" + - timeElapsedInSeconds; - }, 750); - } - } - ``` + === "game.js - with function" + + ```javascript + export class GameComponent { + goToScore() { + // ... + setTimeout( + function () { + const scorePage = "#score"; + scorePage + + "?name=" + + this._name + + "&size=" + + this._size + + "&time=" + + timeElapsedInSeconds; + }.bind(this), + 750 + ); + } + } + ``` + + === "game.js - with arrow function" + + ```javascript + export class GameComponent { + goToScore() { + // ... + setTimeout(() => { + const scorePage = "#score"; + scorePage + + "?name=" + + this._name + + "&size=" + + this._size + + "&time=" + + timeElapsedInSeconds; + }, 750); + } + } + ``` </details> ## Template literals Concatenating strings is not something we enjoy in any language. Fortunately, _ES6_ comes with [**template literals**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) as an alternative: -=== "without template literals" +=== "Without template literals" - ```js + ``` js const welcome = "welcome back " + user.name + ".\n" + "You have " + messages.length + " message" + messages.length ? "s" : "" + "to read."; - ``` - -=== "with template literals" - - ```js - const welcome = - `welcome back ${user.name}. - You have ${messages.length} message${messages.length ? "s" : ""} to read.`; - ``` -=== "C" - - ``` c - #include <stdio.h> - - int main(void) { - printf("Hello world!\n"); - return 0; - } ``` -=== "C++" +=== "With template literals" - ``` c++ - #include <iostream> - - int main(void) { - std::cout << "Hello world!" << std::endl; - return 0; - } + ``` js + const welcome = + `welcome back ${user.name}. + You have ${messages.length} message${messages.length ? "s" : ""} to read.`; ``` ### Use backquotes instead of quotes <Diy /> @@ -181,9 +158,3 @@ src/app/scripts/welcome.js - [ ] I know what is the _bound this_ of a function - [ ] I know about template literals - [ ] The application runs as usual - -<GitCommit /> - -## <i class="fas fa-graduation-cap"></i> Assessment - -<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfeoczEA0VJINo3ty3W-gUzvkA8E26VKXM4U_TOKnZ5mXplkw/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe> diff --git a/resources/docs/mkdocs.yml b/resources/docs/mkdocs.yml index e2f49dbb0db3d241561a6e7d42d2337786270d9c..a84226fcbde68c23f4fc837559b09fb72b53681d 100644 --- a/resources/docs/mkdocs.yml +++ b/resources/docs/mkdocs.yml @@ -14,13 +14,9 @@ nav: - "Functionnal programming": chapters/tp/functionnal-programming.md - "Asynchronous": chapters/tp/asynchronous.md - - "sourcemaps": chapters/tp/sourcemaps.md - "Component Oriented Architecture": chapters/tp/components.md - "Ensure old browser compatibility": chapters/tp/babel.md - - "arrow functions": chapters/tp/arrow-functions.md - - "arrow functions": chapters/tp/style.md - - "functionnal programming": chapters/tp/functionnal-programming.md - - "ending": chapters/tp/ending.md + - "Ending": chapters/tp/ending.md - Practice: - "practise": chapters/practice/practise.md - "bonuses": chapters/practice/bonuses.md