Merge pull request #277 from javascript-tutorial/sync-468e3552

Sync with upstream @ 468e355

Author: HachemiH

1-js/01-getting-started/1-intro/article.md

@@ -109,11 +109,20 @@ Les outils modernes rendent la [transpilation](https://fr.wiktionary.org/wiki/tr
 
 Les exemples de ce genre de langages :
 
+<<<<<<< HEAD
 - [CoffeeScript](http://coffeescript.org/) est un "sucre syntaxique" pour JavaScript, il introduit une syntaxe plus courte, permettant d’écrire du code plus précis et plus clair. Habituellement, les développeurs Ruby l'aiment bien.
 - [TypeScript](http://www.typescriptlang.org/) se concentre sur l'ajout de "typage strict des données" pour simplifier le développement et la prise en charge de systèmes complexes. Il est développé par Microsoft.
 - [Flow](http://flow.org/) ajoute également la saisie de données, mais de manière différente. Développé par Facebook.
 - [Dart](https://www.dartlang.org/) est un langage autonome doté de son propre moteur qui s'exécute dans des environnements autres que les navigateurs (comme les applications mobiles), mais peut aussi être transpilé en JavaScript. Développé par Google.
 - [Brython](https://brython.info/) est un transpilateur Python vers JavaScript qui permet d'écrire des applications en Python pur sans JavaScript.
+=======
+- [CoffeeScript](http://coffeescript.org/) is a "syntactic sugar" for JavaScript. It introduces shorter syntax, allowing us to write clearer and more precise code. Usually, Ruby devs like it.
+- [TypeScript](http://www.typescriptlang.org/) is concentrated on adding "strict data typing" to simplify the development and support of complex systems. It is developed by Microsoft.
+- [Flow](http://flow.org/) also adds data typing, but in a different way. Developed by Facebook.
+- [Dart](https://www.dartlang.org/) is a standalone language that has its own engine that runs in non-browser environments (like mobile apps), but also can be transpiled to JavaScript. Developed by Google.
+- [Brython](https://brython.info/) is a Python transpiler to JavaScript that enables the writing of applications in pure Python without JavaScript.
+- [Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) is a modern, concise and safe programming language that can target the browser or Node.
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 Il en existe évidemment bien plus, cela dit, même si nous utilisons un de ces langages, nous devrions également connaître le langage JavaScript, pour bien comprendre ce que nous faisons.
 

1-js/02-first-steps/08-operators/article.md

@@ -220,7 +220,11 @@ alert( x ); // 5
 
 Le fait que `=` soit un opérateur, pas une construction de langage "magique" a une implication intéressante.
 
+<<<<<<< HEAD
 La plupart des opérateurs en JavaScript renvoient une valeur. C'est évident pour `+` et `-`, mais aussi vrai pour `=`.
+=======
+All operators in JavaScript return a value. That's obvious for `+` and `-`, but also true for `=`.
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 L'appel `x = valeur` écrit la` valeur` dans `x` *puis la renvoie*.
 

1-js/02-first-steps/18-javascript-specials/article.md

@@ -272,9 +272,15 @@ Nous avons couvert trois manières de créer une fonction en JavaScript :
     ```
 
 
+<<<<<<< HEAD
 - Les fonctions peuvent avoir des variables locales: celles déclarées dans son corps. De telles variables ne sont visibles qu'à l'intérieur de la fonction.
 - Les paramètres peuvent avoir des valeurs par défaut : `function sum(a = 1, b = 2) {...}`.
 - Les fonctions retournent toujours quelque chose. Si aucune instruction `return` n’est renvoyée, le résultat est `undefined`.
+=======
+- Functions may have local variables: those declared inside its body or its parameter list. Such variables are only visible inside the function.
+- Parameters can have default values: `function sum(a = 1, b = 2) {...}`.
+- Functions always return something. If there's no `return` statement, then the result is `undefined`.
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 Details : voir <info:function-basics>, <info:arrow-functions-basics>.
 

1-js/03-code-quality/01-debugging-chrome/article.md

@@ -134,8 +134,13 @@ Il y a des boutons pour cela en haut du volet de droite. Actionnons-les.
 
     En cliquant dessus encore et encore, vous parcourrez toutes les instructions de script une par une.
 
+<<<<<<< HEAD
 <span class="devtools" style="background-position:-62px -192px"></span> -- "Step over": lance la commande suivante, mais *n'entre pas dans une fonction*, raccourci clavier `key:F10`.
 : Semblable à la précédente commande "Step", mais se comporte différemment si l'instruction suivante est un appel de fonction. C’est-à-dire qu’il ne s’agit pas d’une fonction intégrée, comme `alert`, mais d’une fonction propre.
+=======
+<span class="devtools" style="background-position:-62px -192px"></span> -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`.
+: Similar to the previous "Step" command, but behaves differently if the next statement is a function call. That is: not a built-in, like `alert`, but a function of our own.
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
     La commande "Step" y pénètre et met en pause l'exécution à la première ligne, tandis que "Step over" exécute l'appel de fonction imbriqué de manière invisible, en ignorant les éléments internes de la fonction.
 

1-js/04-object-basics/07-optional-chaining/article.md

@@ -236,3 +236,7 @@ Une chaîne de `?.` permet d'accéder en toute sécurité aux propriétés imbri
 
 Néanmoins, nous devons appliquer «?.» Avec soin, uniquement s'il est acceptable que la partie gauche n'existe pas. Pour ne pas nous cacher les erreurs de programmation, si elles se produisent.
 
+<<<<<<< HEAD
+=======
+Still, we should apply `?.` carefully, only where it's acceptable that the left part doesn't exist. So that it won't hide programming errors from us, if they occur.
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f

1-js/05-data-types/02-number/article.md

@@ -385,7 +385,11 @@ JavaScript a un objet [Math](https://developer.mozilla.org/fr/docs/Web/JavaScrip
 Quelques exemples:
 
 `Math.random()`
+<<<<<<< HEAD
 : Retourne un nombre aléatoire de 0 à 1 (1 non compris)
+=======
+: Returns a random number from 0 to 1 (not including 1).
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
     ```js run
     alert( Math.random() ); // 0.1234567894322
@@ -401,8 +405,13 @@ Quelques exemples:
     alert( Math.min(1, 2) ); // 1
     ```
 
+<<<<<<< HEAD
 `Math.pow(n, puissance)`
 : Retourne `n` par la puissance donnée
+=======
+`Math.pow(n, power)`
+: Returns `n` raised to the given power.
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
     ```js run
     alert( Math.pow(2, 10) ); // 2 puissance 10 = 1024

1-js/05-data-types/06-iterable/article.md

@@ -174,7 +174,11 @@ Lorsque nous utilisons JavaScript pour des tâches pratiques dans un navigateur
 
 Par exemple, les chaînes de caractères sont à la fois iterables (`for..of` fonctionne dessus) et des array-likes (elles ont des index numériques et une longueur).
 
+<<<<<<< HEAD
 Mais un itérable peut ne pas ressembler à un tableau. Et inversement, un tableau peut ne pas être itérable.
+=======
+But an iterable may be not array-like. And vice versa an array-like may be not iterable.
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 Par exemple, la `range` dans l'exemple ci-dessus est itérable, mais pas comme un array-like (comme-un-tableau), car elle n'a pas de propriétés indexées et de `length`.
 

1-js/05-data-types/10-destructuring-assignment/article.md

@@ -2,19 +2,38 @@
 
 Les deux structures de données les plus utilisées en JavaScript sont `Object` et `Array`.
 
+<<<<<<< HEAD
 Les objets nous permettent de créer une seule entité qui stocke les éléments de données par clé, et les tableaux nous permettent de rassembler des éléments de données dans une collection ordonnée.
 
 Mais lorsque nous transmettons ceux-ci à une fonction, il se peut que celle-ci n'ait pas besoin d'un objet / tableau dans son ensemble, mais plutôt de morceaux individuels.
 
 *L'affectation par décomposition*  est une syntaxe spéciale qui nous permet de "décompresser" des tableaux ou des objets dans un ensemble de variables, ce qui est parfois plus pratique. La décomposition fonctionne également très bien avec des fonctions complexes comportant de nombreux paramètres, valeurs par défaut, etc.
+=======
+- Objects allow us to create a single entity that stores data items by key. 
+- Arrays allow us to gather data items into an ordered list.
+
+Although, when we pass those to a function, it may need not an object/array as a whole. It may need individual pieces.
+
+*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient. 
+
+Destructuring also works great with complex functions that have a lot of parameters, default values, and so on. Soon we'll see that.
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 ## Décomposition d'un tableau
 
+<<<<<<< HEAD
 Un exemple de la façon dont un tableau est décomposé en variables :
 
 ```js
 // nous avons un tableau avec le nom et le prénom
 let arr = ["Ilya", "Kantor"]
+=======
+Here's an example of how an array is destructured into variables:
+
+```js
+// we have an array with the name and surname
+let arr = ["John", "Smith"]
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 *!*
 // l'affectation par décomposition
@@ -23,20 +42,29 @@ let arr = ["Ilya", "Kantor"]
 let [firstName, surname] = arr;
 */!*
 
-alert(firstName); // Ilya
-alert(surname);  // Kantor
+alert(firstName); // John
+alert(surname);  // Smith
 ```
 
 Maintenant, nous pouvons travailler avec des variables plutôt que des parties du tableau.
 
 Cela a l'air pas mal quand c'est combiné avec `split` ou tout autre méthode de renvoi de tableau :
 
-```js
-let [firstName, surname] = "Ilya Kantor".split(' ');
+```js run
+let [firstName, surname] = "John Smith".split(' ');
+alert(firstName); // John
+alert(surname);  // Smith
 ```
 
+<<<<<<< HEAD
 ````smart header="\"Décomposition\" ne veut pas dire \"destruction\"."
 Cette manipulation est appelée "affectation par décomposition"", car elle "se décompose"" en copiant ses éléments dans des variables. Mais le tableau lui-même n'est pas modifié.
+=======
+As you can see, the syntax is simple. There are several peculiar details though. Let's see more examples, to better understand it.
+
+````smart header="\"Destructuring\" does not mean \"destructive\"."
+It's called "destructuring assignment," because it "destructurizes" by copying items into variables. But the array itself is not modified.
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 C’est juste une façon plus courte d’écrire :
 ```js
@@ -69,27 +97,38 @@ Dans le code ci-dessus, le deuxième élément du tableau est ignoré, le troisi
 let [a, b, c] = "abc"; // ["a", "b", "c"]
 let [one, two, three] = new Set([1, 2, 3]);
 ```
-
+That works, because internally a destructuring assignment works by iterating over the right value. It's kind of syntax sugar for calling `for..of` over the value to the right of `=` and assigning the values.
 ````
 
 
+<<<<<<< HEAD
 ````smart header="Attribuer à n'importe quoi à gauche"
 
 Nous pouvons utiliser n'importe quel "assignable" à gauche.
+=======
+````smart header="Assign to anything at the left-side"
+We can use any "assignables" at the left side.
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 Par exemple, une propriété d'objet :
 ```js run
 let user = {};
-[user.name, user.surname] = "Ilya Kantor".split(' ');
+[user.name, user.surname] = "John Smith".split(' ');
 
-alert(user.name); // Ilya
+alert(user.name); // John
+alert(user.surname); // Smith
 ```
 
 ````
 
+<<<<<<< HEAD
 ````smart header="Boucler avec .entries()"
 
 Dans le chapitre précédent, nous avons vu les méthodes [Object.entries(obj)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/entries).
+=======
+````smart header="Looping with .entries()"
+In the previous chapter we saw the [Object.entries(obj)](mdn:js/Object/entries) method.
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 Nous pouvons l'utiliser avec la décomposition pour boucler sur les clés et valeurs d'un objet :
 
@@ -107,62 +146,111 @@ for (let [key, value] of Object.entries(user)) {
 }
 ```
 
+<<<<<<< HEAD
 ...Et la même chose pour un map :
+=======
+The similar code for a `Map` is simpler, as it's iterable:
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 ```js run
 let user = new Map();
 user.set("name", "John");
 user.set("age", "30");
 
 *!*
+// Map iterates as [key, value] pairs, very convenient for destructuring
 for (let [key, value] of user) {
 */!*
   alert(`${key}:${value}`); // name:John, ensuite age:30
 }
 ```
 ````
 
+<<<<<<< HEAD
 ```smart header="Astuce d'échange de variables"
 Une astuce bien connue pour permuter les valeurs de deux variables :
+=======
+````smart header="Swap variables trick"
+There's a well-known trick for swapping values of two variables using a destructuring assignment:
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 ```js run
 let guest = "Jane";
 let admin = "Pete";
 
+<<<<<<< HEAD
 // Permuter les valeurs : faire guest=Pete, admin=Jane
+=======
+// Let's swap the values: make guest=Pete, admin=Jane
+*!*
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 [guest, admin] = [admin, guest];
+*/!*
 
 alert(`${guest} ${admin}`); // Pete Jane (échangé avec succès !)
 ```
 
 Ici, nous créons un tableau temporaire de deux variables et le déstructurons immédiatement dans l'ordre permuté.
 
+<<<<<<< HEAD
 Nous pouvons échanger plus de deux variables de cette façon.
 
+=======
+We can swap more than two variables this way.
+````
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 ### Le rest '...'
 
+<<<<<<< HEAD
 Si nous voulons non seulement obtenir les premières valeurs, mais aussi rassembler tout ce qui suit, nous pouvons ajouter un paramètre supplémentaire qui obtient "le reste" à l'aide de trois points `"..."`:
+=======
+Usually, if the array is longer when the list at the left, the "extra" items are omitted.
+
+For example, here only two items are taken, and the rest is just ignored:
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 ```js run
-let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*];
+let [name1, name2] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
 
 alert(name1); // Julius
 alert(name2); // Caesar
+// Furher items aren't assigned anywhere
+```
+
+If we'd like also to gather all that follows -- we can add one more parameter that gets "the rest" using three dots `"..."`:
+
+```js run
+let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*];
 
 *!*
-// Note that type of `rest` is Array.
+// rest is array of items, starting from the 3rd one
 alert(rest[0]); // Consul
 alert(rest[1]); // of the Roman Republic
 alert(rest.length); // 2
 */!*
 ```
 
+<<<<<<< HEAD
 La valeur de `rest` est le tableau des éléments du tableau restants. Nous pouvons utiliser n’importe quel autre nom de variable à la place de `rest`, assurez-vous simplement qu’il a trois points devant lui et soit placé en dernier dans l’affectation par décomposition.
+=======
+The value of `rest` is the array of the remaining array elements. 
+
+We can use any other variable name in place of `rest`, just make sure it has three dots before it and goes last in the destructuring assignment.
+
+```js run
+let [name1, name2, *!*...titles*/!*] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
+// now titles = ["Consul", "of the Roman Republic"]
+```
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 ### Les valeurs par défaut
 
+<<<<<<< HEAD
 S'il y a moins de valeurs dans le tableau que de variables dans l'affectation, il n'y aura pas d'erreur. Les valeurs absentes sont considérées comme non définies :
+=======
+If the array is shorter than the list of variables at the left, there'll be no errors. Absent values are considered undefined:
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 ```js run
 *!*
@@ -187,7 +275,11 @@ alert(surname); // Anonymous (default used)
 
 Les valeurs par défaut peuvent être des expressions plus complexes ou même des appels de fonction. Ils ne sont évalués que si la valeur n'est pas fournie.
 
+<<<<<<< HEAD
 Par exemple, nous utilisons ici la fonction `prompt` pour deux valeurs par défaut. Mais cela ne fonctionnera que pour celle qui manque :
+=======
+For instance, here we use the `prompt` function for two defaults:
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 ```js run
 // runs only prompt for surname
@@ -197,7 +289,7 @@ alert(name);    // Julius (from array)
 alert(surname); // whatever prompt gets
 ```
 
-
+Please note: the `prompt` will run only for the missing value (`surname`).
 
 ## Décomposition d'object 
 
@@ -209,7 +301,11 @@ La syntaxe de base est la suivante :
 let {var1, var2} = {var1:…, var2:…}
 ```
 
+<<<<<<< HEAD
 Nous avons un objet existant à droite que nous souhaitons scinder en variables. Le côté gauche contient un "pattern" pour les propriétés correspondantes. Dans ce cas simple, c’est une liste de noms de variables dans `{...}`.
+=======
+We should have an existing object at the right side, that we want to split into variables. The left side contains an object-like "pattern" for corresponding properties. In the simplest case, that's a list of variable names in `{...}`.
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 Par exemple :
 
@@ -229,7 +325,13 @@ alert(width);  // 100
 alert(height); // 200
 ```
 
+<<<<<<< HEAD
 Les propriétés `options.title`, `options.width` et `options.height` sont affectés aux variables correspondantes. L'ordre n'a pas d'importance. Cela fonctionne aussi :
+=======
+Properties `options.title`, `options.width` and `options.height` are assigned to the corresponding variables. 
+
+The order does not matter. This works too:
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 ```js
 // changé l'ordre dans let {...}
@@ -238,7 +340,11 @@ let {height, width, title} = { title: "Menu", height: 200, width: 100 }
 
 Le pattern à gauche peut être plus complexe et spécifier le mapping entre propriétés et variables.
 
+<<<<<<< HEAD
 Si nous voulons affecter une propriété à une variable portant un autre nom, par exemple, `options.width` pour aller dans la variable nommée `w`, alors nous pouvons la définir en utilisant deux points :
+=======
+If we want to assign a property to a variable with another name, for instance, make `options.width` go into the variable named `w`, then we can set the variable name using a colon:
+>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
 
 ```js run
 let options = {