Merge branch 'master' of github.com:javascript-tutorial/en.javascript.info into sync-28ed5a3f

Author: iliakan

1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js

@@ -4,8 +4,8 @@ describe("pow", function() {
     assert.equal(pow(2, 3), 8);
   });
 
-  it("3 raised to power 3 is 27", function() {
-    assert.equal(pow(3, 3), 27);
+  it("3 raised to power 4 is 81", function() {
+    assert.equal(pow(3, 4), 81);
   });
 
 });

1-js/05-data-types/01-primitives-methods/article.md

@@ -7,7 +7,7 @@ Let's look at the key distinctions between primitives and objects.
 A primitive
 
 - Is a value of a primitive type.
-- There are 6 primitive types: `string`, `number`, `boolean`, `symbol`, `null` and `undefined`.
+- There are 7 primitive types: `string`, `number`, `bigint`, `boolean`, `symbol`, `null` and `undefined`.
 
 An object
 

1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/solution.js

@@ -0,0 +1,6 @@
+function groupById(array) {
+  return array.reduce((obj, value) => {
+    obj[value.id] = value;
+    return obj;
+  }, {})
+}

1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/test.js

@@ -0,0 +1,20 @@
+describe("groupById", function() {
+
+  it("creates an object grouped by id", function() {
+    let users = [
+      {id: 'john', name: "John Smith", age: 20},
+      {id: 'ann', name: "Ann Smith", age: 24},
+      {id: 'pete', name: "Pete Peterson", age: 31},
+    ];
+
+    assert.deepEqual(groupById(users), {
+      john: {id: 'john', name: "John Smith", age: 20}
+      ann: {id: 'ann', name: "Ann Smith", age: 24},
+      pete: {id: 'pete', name: "Pete Peterson", age: 31},
+    });
+  });
+
+  it("works with an empty array", function() {
+    assert.deepEqual(groupById(users), {});
+  });
+});

1-js/05-data-types/05-array-methods/12-reduce-object/solution.md

@@ -0,0 +1,37 @@
+importance: 4
+
+---
+
+# Create keyed object from array
+
+Let's say we received an array of users in the form `{id:..., name:..., age... }`.
+
+Create a function `groupById(arr)` that creates an object from it, with `id` as the key, and array items as values.
+
+For example:
+
+```js
+let users = [
+  {id: 'john', name: "John Smith", age: 20},
+  {id: 'ann', name: "Ann Smith", age: 24},
+  {id: 'pete', name: "Pete Peterson", age: 31},
+];
+
+let usersById = groupById(users);
+
+/*
+// after the call we have:
+
+usersById = {
+  john: {id: 'john', name: "John Smith", age: 20}
+  ann: {id: 'ann', name: "Ann Smith", age: 24},
+  pete: {id: 'pete', name: "Pete Peterson", age: 31},
+}
+*/
+```
+
+Such function is really handy when working with server data.
+
+In this task we assume that `id` is unique. There may be no two array items with the same `id`.
+
+Please use array `.reduce` method in the solution.

1-js/05-data-types/05-array-methods/12-reduce-object/task.md

@@ -384,7 +384,7 @@ The order became `1, 15, 2`. Incorrect. But why?
 
 **The items are sorted as strings by default.**
 
-Literally, all elements are converted to strings for comparisons. For strings,  lexicographic ordering is applied and indeed `"2" > "15"`.
+Literally, all elements are converted to strings for comparisons. For strings, lexicographic ordering is applied and indeed `"2" > "15"`.
 
 To use our own sorting order, we need to supply a function as the argument of `arr.sort()`.
 
@@ -431,7 +431,6 @@ By the way, if we ever want to know which elements are compared -- nothing preve
 
 The algorithm may compare an element with multiple others in the process, but it tries to make as few comparisons as possible.
 
-
 ````smart header="A comparison function may return any number"
 Actually, a comparison function is only required to return a positive number to say "greater" and a negative number to say "less".
 
@@ -456,6 +455,22 @@ arr.sort( (a, b) => a - b );
 This works exactly the same as the longer version above.
 ````
 
+````smart header="Use `localeCompare` for strings"
+Remember [strings](info:string#correct-comparisons) comparison algorithm? It compares letters by their codes by default.
+
+For many alphabets, it's better to use `str.localeCompare` method to correctly sort letters, such as `Ö`.
+
+For example, let's sort a few countries in German:
+
+```js run
+let countries = ['Österreich', 'Andorra', 'Vietnam'];
+
+alert( countries.sort( (a, b) => a > b ? 1 : -1) ); // Andorra, Vietnam, Österreich (wrong)
+
+alert( countries.sort( (a, b) => a.localeCompare(b) ) ); // Andorra,Österreich,Vietnam (correct!)
+```
+````
+
 ### reverse
 
 The method [arr.reverse](mdn:js/Array/reverse) reverses the order of elements in `arr`.
@@ -530,7 +545,7 @@ The methods [arr.reduce](mdn:js/Array/reduce) and [arr.reduceRight](mdn:js/Array
 The syntax is:
 
 ```js
-let value = arr.reduce(function(previousValue, item, index, array) {
+let value = arr.reduce(function(accumulator, item, index, array) {
   // ...
 }, [initial]);
 ```
@@ -539,14 +554,16 @@ The function is applied to all array elements one after another and "carries on"
 
 Arguments:
 
-- `previousValue` -- is the result of the previous function call, equals `initial` the first time (if `initial` is provided).
+- `accumulator` -- is the result of the previous function call, equals `initial` the first time (if `initial` is provided).
 - `item` -- is the current array item.
 - `index` -- is its position.
 - `array` -- is the array.
 
 As function is applied, the result of the previous function call is passed to the next one as the first argument.
 
-Sounds complicated, but it's not if you think about the first argument as the "accumulator" that stores the combined result of all previous execution. And at the end it becomes the result of `reduce`.
+So, the first argument is essentially the accumulator that stores the combined result of all previous executions. And at the end it becomes the result of `reduce`.
+
+Sounds complicated?
 
 The easiest way to grasp that is by example.
 
@@ -611,7 +628,6 @@ let arr = [];
 arr.reduce((sum, current) => sum + current);
 ```
 
-
 So it's advised to always specify the initial value.
 
 The method [arr.reduceRight](mdn:js/Array/reduceRight) does the same, but goes from right to left.

1-js/05-data-types/05-array-methods/article.md

@@ -1,4 +1,4 @@
-# Rest parameters and spread operator
+# Rest parameters and spread syntax
 
 Many JavaScript built-in functions support an arbitrary number of arguments.
 
@@ -122,7 +122,7 @@ As we remember, arrow functions don't have their own `this`. Now we know they do
 ````
 
 
-## Spread operator [#spread-operator]
+## Spread syntax [#spread-syntax]
 
 We've just seen how to get an array from the list of parameters.
 
@@ -148,7 +148,7 @@ alert( Math.max(arr) ); // NaN
 
 And surely we can't manually list items in the code `Math.max(arr[0], arr[1], arr[2])`, because we may be unsure how many there are. As our script executes, there could be a lot, or there could be none. And that would get ugly.
 
-*Spread operator* to the rescue! It looks similar to rest parameters, also using `...`, but does quite the opposite.
+*Spread syntax* to the rescue! It looks similar to rest parameters, also using `...`, but does quite the opposite.
 
 When `...arr` is used in the function call, it "expands" an iterable object `arr` into the list of arguments.
 
@@ -169,7 +169,7 @@ let arr2 = [8, 3, -8, 1];
 alert( Math.max(...arr1, ...arr2) ); // 8
 ```
 
-We can even combine the spread operator with normal values:
+We can even combine the spread syntax with normal values:
 
 
 ```js run
@@ -179,7 +179,7 @@ let arr2 = [8, 3, -8, 1];
 alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25
 ```
 
-Also, the spread operator can be used to merge arrays:
+Also, the spread syntax can be used to merge arrays:
 
 ```js run
 let arr = [3, 5, 1];
@@ -192,17 +192,17 @@ let merged = [0, ...arr, 2, ...arr2];
 alert(merged); // 0,3,5,1,2,8,9,15 (0, then arr, then 2, then arr2)
 ```
 
-In the examples above we used an array to demonstrate the spread operator, but any iterable will do.
+In the examples above we used an array to demonstrate the spread syntax, but any iterable will do.
 
-For instance, here we use the spread operator to turn the string into array of characters:
+For instance, here we use the spread syntax to turn the string into array of characters:
 
 ```js run
 let str = "Hello";
 
 alert( [...str] ); // H,e,l,l,o
 ```
 
-The spread operator internally uses iterators to gather elements, the same way as `for..of` does.
+The spread syntax internally uses iterators to gather elements, the same way as `for..of` does.
 
 So, for a string, `for..of` returns characters and `...str` becomes `"H","e","l","l","o"`. The list of characters is passed to array initializer `[...str]`.
 
@@ -220,24 +220,24 @@ The result is the same as `[...str]`.
 But there's a subtle difference between `Array.from(obj)` and `[...obj]`:
 
 - `Array.from` operates on both array-likes and iterables.
-- The spread operator operates only on iterables.
+- The spread syntax works only with iterables.
 
 So, for the task of turning something into an array, `Array.from` tends to be more universal.
 
 
 ## Summary
 
-When we see `"..."` in the code, it is either rest parameters or the spread operator.
+When we see `"..."` in the code, it is either rest parameters or the spread syntax.
 
 There's an easy way to distinguish between them:
 
 - When `...` is at the end of function parameters, it's "rest parameters" and gathers the rest of the list of arguments into an array.
-- When `...` occurs in a function call or alike, it's called a "spread operator" and expands an array into a list.
+- When `...` occurs in a function call or alike, it's called a "spread syntax" and expands an array into a list.
 
 Use patterns:
 
 - Rest parameters are used to create functions that accept any number of arguments.
-- The spread operator is used to pass an array to functions that normally require a list of many arguments.
+- The spread syntax is used to pass an array to functions that normally require a list of many arguments.
 
 Together they help to travel between a list and an array of parameters with ease.
 

1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md renamed to 1-js/06-advanced-functions/02-rest-parameters-spread/article.md

@@ -0,0 +1,5 @@
+The answer is: **Pete**.
+
+A function gets outer variables as they are now, it uses the most recent values.
+
+Old variable values are not saved anywhere. When a function wants a variable, it takes the current value from its own Lexical Environment or the outer one.

1-js/06-advanced-functions/03-closure/1-closure-latest-changes/solution.md

@@ -0,0 +1,23 @@
+importance: 5
+
+---
+
+# Does a function pickup latest changes?
+
+The function sayHi uses an external variable name. When the function runs, which value is it going to use?
+
+```js
+let name = "John";
+
+function sayHi() {
+  alert("Hi, " + name);
+}
+
+name = "Pete";
+
+sayHi(); // what will it show: "John" or "Pete"?
+```
+
+Such situations are common both in browser and server-side development. A function may be scheduled to execute later than it is created, for instance after a user action or a network request.
+
+So, the question is: does it pick up the latest changes?

1-js/06-advanced-functions/03-closure/1-closure-latest-changes/task.md

@@ -0,0 +1,9 @@
+The answer is: **Pete**.
+
+The `work()` function in the code below gets `name` from the place of its origin through the outer lexical environment reference:
+
+![](lexenv-nested-work.svg)
+
+So, the result is `"Pete"` here.
+
+But if there were no `let name` in `makeWorker()`, then the search would go outside and take the global variable as we can see from the chain above. In that case the result would be `"John"`.

1-js/06-advanced-functions/03-closure/8-make-army/_js.view/solution.js renamed to 1-js/06-advanced-functions/03-closure/10-make-army/_js.view/solution.js

@@ -0,0 +1,29 @@
+importance: 5
+
+---
+
+# Which variables are available?
+
+The function `makeWorker` below makes another function and returns it. That new function can be called from somewhere else.
+
+Will it have access to the outer variables from its creation place, or the invocation place, or both?
+
+```js
+function makeWorker() {
+  let name = "Pete";
+
+  return function() {
+    alert(name);
+  };
+}
+
+let name = "John";
+
+// create a function
+let work = makeWorker();
+
+// call it
+work(); // what will it show?
+```
+
+Which value it will show? "Pete" or "John"?

1-js/06-advanced-functions/03-closure/8-make-army/_js.view/source.js renamed to 1-js/06-advanced-functions/03-closure/10-make-army/_js.view/source.js

@@ -0,0 +1,40 @@
+The result is: **error**.
+
+Try running it:
+
+```js run
+let x = 1;
+
+function func() {
+*!*
+  console.log(x); // ReferenceError: Cannot access 'x' before initialization
+*/!*
+  let x = 2;
+}
+
+func();
+```
+
+In this example we can observe the peculiar difference between a "non-existing" and "unitialized" variable.
+
+As you may have read in the article [](info:closure), a variable starts in the "uninitialized" state from the moment when the execution enters a code block (or a function). And it stays uninitalized until the corresponding `let` statement.
+
+In other words, a variable technically exists, but can't be used before `let`.
+
+The code above demonstrates it.
+
+```js
+function func() {
+*!*
+  // the local variable x is known to the engine from the beginning of the function,
+  // but "unitialized" (unusable) until let ("dead zone")
+  // hence the error
+*/!*
+
+  console.log(x); // ReferenceError: Cannot access 'vx before initialization
+
+  let x = 2;
+}
+```
+
+This zone of temporary unusability of a variable (from the beginning of the code block till `let`) is sometimes called the "dead zone".

1-js/06-advanced-functions/03-closure/8-make-army/_js.view/test.js renamed to 1-js/06-advanced-functions/03-closure/10-make-army/_js.view/test.js

@@ -0,0 +1,21 @@
+importance: 4
+
+---
+
+# Is variable visible?
+
+What will be the result of this code?
+
+```js
+let x = 1;
+
+function func() {
+  console.log(x); // ?
+
+  let x = 2;
+}
+
+func();
+```
+
+P.S. There's a pitfall in this task. The solution is not obvious.