This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Arrow functions are not just a "shorthand" for writing small stuff.
Les fonctions fléchées ne sont pas simplement un "raccourci" pour écrire moins de choses.
JavaScript is full of situations where we need to write a small function, that's executed somewhere else.
JavaScript est plein de situations où nous avons besoin d'écrire une petite fonction, exécutée ailleurs.
For instance:
Par exemple:
- `arr.forEach(func)` -- `func` is executed by `forEach` for every array item.
- `setTimeout(func)` -- `func` is executed by the built-in scheduler.
- ...there are more.
- `arr.forEach(func)` -- `func` est exécuté par `forEach` pour chaque élément du tableau.
- `setTimeout(func)` -- `func` est exécuté par le planificateur intégré.
- ...il y en a plus encore.
It's in the very spirit of JavaScript to create a function and pass it somewhere.
C'est dans l'esprit même de JavaScript de créer une fonction et de la transmettre quelque part.
And in such functions we usually don't want to leave the current context.
Et dans de telles fonctions, nous ne voulons généralement pas quitter le contexte actuel.
## Arrow functions have no "this"
## Les fonctions fléchées n'ont pas de "this"
As we remember from the chapter <info:object-methods>, arrow functions do not have `this`. If `this` is accessed, it is taken from the outside.
AComme nous nous en souvenons du chapitre <info:object-methods>, les fonctions fléchées n'ont pas de `this`. Si on accède à `this`, il est pris de l'extérieur.
For instance, we can use it to iterate inside an object method:
Par exemple, nous pouvons l'utiliser pour itérer à l'intérieur d'une méthode d'objet:
```js run
let group = {
Expand All
@@ -39,9 +39,9 @@ let group = {
group.showList();
```
Here in `forEach`, the arrow function is used, so `this.title` in it is exactly the same as in the outer method `showList`. That is: `group.title`.
Ici, dans `forEach`, une fonction une fléchée est utilisée, donc `this.title` est exactement la même chose que dans la méthode externe `showList`. C'est-à-dire `group.title`.
If we used a "regular" function, there would be an error:
Si nous utilisions une fonction "régulière", il y aurait une erreur:
```js run
let group = {
Expand All
@@ -61,28 +61,28 @@ let group = {
group.showList();
```
The error occurs because `forEach` runs functions with `this=undefined` by default, so the attempt to access `undefined.title` is made.
L'erreur se produit parce que `forEach` exécute des fonctions avec` this = undefined` par défaut. La tentative d'accès à `undefined.title` est donc effectuée.
That doesn't affect arrow functions, because they just don't have `this`.
Cela n’affecte pas les fonctions fléchées, car elles n’ont simplement pas de `this`.
```warn header="Arrow functions can't run with `new`"
Not having `this` naturally means another limitation: arrow functions can't be used as constructors. They can't be called with `new`.
```warn header="Les fonctions fléchées ne peuvent pas fonctionner avec `new`"
Ne pas avoir `this` signifie naturellement une autre limitation: les fonctions fléchées ne peuvent pas être utilisées en tant que constructeurs. Ils ne peuvent pas être appelés avec `new`.
```
```smart header="Arrow functions VS bind"
There's a subtle difference between an arrow function `=>` and a regular function called with `.bind(this)`:
```smart header="Fonctions fléchées VS bind"
Il y a une différence subtile entre une fonction fléchée `=>` et une fonction régulière appelée avec `.bind(this)`:
- `.bind(this)` creates a "bound version" of the function.
- The arrow `=>` doesn't create any binding. The function simply doesn't have `this`. The lookup of `this` is made exactly the same way as a regular variable search: in the outer lexical environment.
- `.bind(this)` crée une "version liée" de la fonction.
- La flèche `=>` ne crée aucune liaison. La fonction n'a tout simplement pas de `this`. La recherche de `this` est faite exactement de la même manière qu’une recherche de variable normale: dans l’environnement lexical externe.
```
## Arrows have no "arguments"
## Les fonctions fléchées n'ont pas de "arguments"
Arrow functions also have no `arguments` variable.
Les fonctions fléchées n'ont pas non plus de variable `arguments`.
That's great for decorators, when we need to forward a call with the current `this` and `arguments`.
C'est très bien pour les décorateurs, quand nous avons besoin de transférer un appel avec le `this` et les `arguments` actuels.
For instance, `defer(f, ms)` gets a function and returns a wrapper around it that delays the call by `ms` milliseconds:
Par exemple, `defer(f, ms)` obtient une fonction et retourne un wrapper qui retarde l'appel de `ms` millisecondes:
```js run
function defer(f, ms) {
Expand All
@@ -96,10 +96,10 @@ function sayHi(who) {
}
let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred("John"); // Hello, John after 2 seconds
sayHiDeferred("John"); // Hello, John après 2 secondes
```
The same without an arrow function would look like:
La même chose sans une fonction fléchée ressemblerait à ceci:
```js
function defer(f, ms) {
Expand All
@@ -112,15 +112,15 @@ function defer(f, ms) {
}
```
Here we had to create additional variables `args` and `ctx` so that the function inside `setTimeout` could take them.
Ici, nous avons dû créer des variables additionnelles `args` et `ctx` afin que la fonction à l'intérieur de `setTimeout` puisse les prendre.
## Summary
## Résumé
Arrow functions:
Les fonctions fléchées:
- Do not have `this`.
- Do not have `arguments`.
- Can't be called with `new`.
- (They also don't have `super`, but we didn't study it. Will be in the chapter <info:class-inheritance>).
- N'ont pas de `this`.
- N'ont pas de `arguments`.
- Ne peuvent pas être appelées avec `new`.
- (Ils n'ont pas non plus "super", mais nous ne l'avons pas encore étudié. Ça sera dans le chapitre <info:class-inheritance>).
That's because they are meant for short pieces of code that do not have their own "context", but rather works in the current one. And they really shine in that use case.
En effet, ils sont destinés à de courts morceaux de code qui ne possèdent pas leur propre "contexte", mais fonctionnent dans le contexte actuel. Et ils brillent vraiment dans ce cas d'utilisation.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Translate "Arrow functions revisited" into French #49
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Uh oh!
There was an error while loading. Please reload this page.
Translate "Arrow functions revisited" into French #49
Filter by extension
Viewed files
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
There are no files selected for viewing