work

Author: iliakan

1-js/2-first-steps/18-function-parameters/article.md

@@ -119,13 +119,16 @@ The `...rest` must always be the last.
 
 ````smart header="The `arguments` variable"
 
-In old times, there were no rest operator. But there was a special variable named `arguments` that contained all arguments by their index. It is still supported and can be used like this:
+In old times, there was no rest operator. But there is a special variable named `arguments` that contains all arguments by their index. It is still supported and can be used like this:
 
 ```js run
 function showName() {
   alert( arguments[0] ); 
   alert( arguments[1] ); 
   alert( arguments.length ); 
+
+  // for..of works too
+  // for(let arg of arguments) alert(arg); 
 }
 
 // shows: Julius, Caesar, 2
@@ -135,7 +138,7 @@ showName("Julius", "Caesar");
 showName("Ilya"); 
 ```
 
-The downside is that `arguments` looks like an array, but it's not. It does not support many useful array features. It mainly exists for backwards compatibility, usually the rest operator is better.
+The downside is that though `arguments` looks like an array, but it's not. It does not support many useful array methods that we'll study later, and if they're needed, then the rest operator should be used.
 ````
 
 ## Destructuring parameters
@@ -158,7 +161,7 @@ Like this?
 showMenu("My Menu", undefined, undefined, ["Item1", "Item2"])
 ```
 
-That's ugly. And becomes unreadable if we deal with more parameters.
+That's ugly. And becomes unreadable when we deal with more parameters.
 
 Destructuring comes to the rescue!
 
@@ -235,13 +238,13 @@ showMenu(); // Menu 100 200
 
 In the code above, the whole arguments object is `{}` by default, so there's always something to destructurize.
 
-## The spread operator
+## The spread operator [#spread-operator]
 
 As we've seen before, the rest operator `...` allows to gather parameters in the array.
 
 But there's a reverse named "the spread operator". It also looks like `...` and works at call-time.
 
-The spread operator allows to "unfurl" an array into a list of parameters, like this:
+The spread operator allows to convert an array into a list of parameters, like this:
 
 ```js run
 let fullName = ["Gaius", "Julius", "Caesar"];
@@ -256,7 +259,6 @@ function showName(firstName, secondName, lastName) {
 showName(...fullName);
 ```
 
-
 Let's see a more real-life example. 
 
 There exist a built-in function [Math.max](mdn:js/Math/max) that takes a list of values and returns the greatest one:
@@ -276,13 +278,14 @@ alert( Math.max(...arr) ); // 7
 
 In short:
 - When `...` occurs in function parameters, it's called a "rest operator" and gathers parameters into the array.
-- When `...` occurs in a function call, it's called a "spread operator" and unfurls an array into the list.
+- When `...` occurs in a function call, it's called a "spread operator" and converts an array into the list.
 
 Together they help to travel between a list and an array of parameters with ease.
 
 
 ## Summary TODO
 
+[todo]
 Основные улучшения в функциях:
 
 - Можно задавать параметры по умолчанию, а также использовать деструктуризацию для чтения приходящего объекта.

…s/19-function-create-advanced/article.md …9-function-expressions-arrows/article.md1-js/2-first-steps/19-function-create-advanced/article.md renamed to 1-js/2-first-steps/19-function-expressions-arrows/article.md 1-js/2-first-steps/19-function-create-advanced/article.md renamed to 1-js/2-first-steps/19-function-expressions-arrows/article.md

@@ -1,4 +1,4 @@
-# Function expressions and more
+# Function expressions and arrows
 
 In JavaScript, a function is a value.
 

1-js/2-first-steps/20-object-methods/2-check-syntax/solution.md

@@ -0,0 +1,43 @@
+**Error**!
+
+Try it:
+
+```js run
+let user = {
+  name: "John",
+  go: function() { alert(this.name) }
+}
+
+(user.go)() // error!
+```
+
+The error message in most browsers does not give understanding what went wrong.
+
+**The error appears because a semicolon is missing after `user = {...}`.**
+
+Javascript does not assume a semicolon before a bracket `(user.go)()`, so it reads the code like:
+
+```js no-beautify
+let user = { go:... }(user.go)()
+```
+
+Then we can also see that such a joint expression is syntactically a call of the object `{ go: ... }` as a function with the argument `(user.go)`. And that also happens on the same line with `let user`, so the `user` object has not yet even been defined, hence the error. 
+
+If we insert the semicolon, all is fine:
+
+```js run
+let user = {
+  name: "John",
+  go: function() { alert(this.name) }
+}*!*;*/!*
+
+(user.go)() // John
+```
+
+Please note that brackets around `(user.go)` do nothing here. Usually they setup the order of operations, but here the dot `.` works first anyway, so there's no effect. Only the semicolon thing matters.
+
+
+
+
+
+

1-js/2-first-steps/20-object-methods/2-check-syntax/task.md

@@ -0,0 +1,19 @@
+importance: 2
+
+---
+
+# Syntax check
+
+What is the resule of this code?
+
+
+```js no-beautify
+let user = {
+  name: "John",
+  go: function() { alert(this.name) }
+}
+
+(user.go)()
+```
+
+P.S. There's a pitfall :)

1-js/2-first-steps/20-object-methods/3-why-this/solution.md

@@ -0,0 +1,22 @@
+
+Here's the explanations.
+
+1. That's a regular object method call.
+
+2. The same, brackets do not change the order of operations here, the dot is first anyway.
+
+3. Here we have a more complex call `(expression).method()`. The call works as if it were split into two lines:
+
+    ```js no-beautify
+    f = obj.go; // calculate the expression
+    f();        // call what we have
+    ```
+
+    Here `f()` is executed as a function, without `this`.
+
+4. The similar thing as `(3)`, to the left of the dot `.` we have an expression.
+
+To explain the behavior of `(3)` and `(4)` we need to recall that property accessors (dot or square brackets) return a value of the Reference Type.  
+
+Any operation on it except a method call (like assignment `=` or `||`) turns it into an ordinary value, which does not carry the information allowing to set `this`.
+

1-js/2-first-steps/20-object-methods/3-why-this/task.md

@@ -0,0 +1,26 @@
+importance: 3
+
+---
+
+# Explain the value of "this"
+
+In the code above we intend to call `user.go()` method 4 times in a row.
+
+But calls `(1)` and `(2)` works differently from `(3)` and `(4)`. Why?
+
+```js run no-beautify
+let obj, method;
+
+obj = {
+  go: function() { alert(this); }
+};
+
+obj.go();               // (1) [object Object]
+
+(obj.go)();             // (2) [object Object]
+
+(method = obj.go)();    // (3) undefined
+
+(obj.go || obj.stop)(); // (4) undefined
+```
+

1-js/2-first-steps/20-object-methods/4-object-property-this/solution.md

@@ -0,0 +1,46 @@
+**Answer: an error.**
+
+Try it:
+```js run
+function makeUser() {
+  return {
+    name: "John",
+    ref: this
+  };
+};
+
+let user = makeUser();
+
+alert( user.ref.name ); // Error: Cannot read property 'name' of undefined
+```
+
+That's because rules that set `this` do not look at object literals. 
+
+Here the value of `this` inside `makeUser()` is `undefined`, because it is called as a function, not as a method.
+
+And the object literal itself has no effect on `this`. The value of `this` is one for the whole function, code blocks and object literals do not affect it.
+
+So `ref: this` actually takes current `this` of the function.
+
+Here's the opposite case:
+
+```js run
+function makeUser() {
+  return {
+    name: "John",
+*!*
+    ref() {
+      return this;
+    }
+*/!*
+  };
+};
+
+let user = makeUser();
+
+alert( user.ref().name ); // John
+```
+
+Now it works, because `user.ref()` is a method. And the value of `this` is set to the object before dot `.`.
+
+

1-js/2-first-steps/20-object-methods/4-object-property-this/task.md

@@ -0,0 +1,23 @@
+importance: 5
+
+---
+
+# Using "this" in object literal
+
+Here the function `makeUser` returns an object.
+
+What is the result of accessing its `ref`? Why?
+
+```js
+function makeUser() {
+  return {
+    name: "John",
+    ref: this
+  };
+};
+
+let user = makeUser();
+
+alert( user.ref.name ); // What's the result?
+```
+

1-js/2-first-steps/20-object-methods/7-calculator/_js.view/solution.js

@@ -0,0 +1,14 @@
+let calculator = {
+  sum() {
+    return this.a + this.b;
+  },
+
+  mul() {
+    return this.a * this.b;
+  },
+
+  read() {
+    this.a = +prompt('a?', 0);
+    this.b = +prompt('b?', 0);
+  }
+};

1-js/2-first-steps/20-object-methods/7-calculator/_js.view/test.js

@@ -0,0 +1,28 @@
+
+
+describe("calculator", function() {
+  
+  context("when 2 and 3 entered", function() {
+    beforeEach(function() {
+      sinon.stub(window, "prompt");
+
+      prompt.onCall(0).returns("2");
+      prompt.onCall(1).returns("3");
+
+      calculator.read();
+    });
+
+    afterEach(function() {
+      prompt.restore();
+    });
+
+    it("the sum is 5", function() {
+      assert.equal(calculator.sum(), 5);
+    });
+
+    it("the multiplication product is 6", function() {
+      assert.equal(calculator.mul(), 6);
+    });
+  });
+
+});