ok

1-js/4-object-basics/03-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/4-object-basics/03-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/4-object-basics/03-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/4-object-basics/03-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/4-object-basics/03-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/4-object-basics/03-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/4-object-basics/03-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/4-object-basics/03-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);
+    });
+  });
+
+});

1-js/4-object-basics/03-object-methods/7-calculator/solution.md

@@ -0,0 +1,23 @@
+
+
+```js run demo
+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);
+  }
+};
+
+calculator.read();
+alert( calculator.sum() );
+alert( calculator.mul() );
+```
+

1-js/4-object-basics/03-object-methods/7-calculator/task.md

@@ -0,0 +1,24 @@
+importance: 5
+
+---
+
+# Create a calculator
+
+Create an object `calculator` with three methods:
+
+- `read()` prompts for two values and saves them as object properties.
+- `sum()` returns the sum of saved values.
+- `mul()` multiplies saved values and returns the result.
+
+```js
+let calculator = {
+  // ... your code ...
+};
+
+calculator.read();
+alert( calculator.sum() );
+alert( calculator.mul() );
+```
+
+[demo]
+

1-js/4-object-basics/03-object-methods/8-chain-calls/solution.md

@@ -0,0 +1,40 @@
+The solution is to return the object itself from every call.
+
+```js run
+let ladder = {
+  step: 0,
+  up() {
+    this.step++;
+*!*
+    return this;
+*/!*
+  },
+  down() {
+    this.step--;
+*!*
+    return this;
+*/!*
+  },
+  showStep() {
+    alert( this.step );
+*!*
+    return this;
+*/!*
+  }
+}
+
+ladder.up().up().down().up().down().showStep(); // 1
+```
+
+We also can write a single call per line. For long chains it's more readable:
+
+```js 
+ladder
+  .up()
+  .up()
+  .down()
+  .up()
+  .down()
+  .showStep(); // 1
+```
+

1-js/4-object-basics/03-object-methods/8-chain-calls/task.md

@@ -0,0 +1,39 @@
+importance: 2
+
+---
+
+# Chaining
+
+There's a `ladder` object that allows to go up and down:
+
+```js
+let ladder = {
+  step: 0,
+  up() { 
+    this.step++;
+  },
+  down() { 
+    this.step--;
+  },
+  showStep: function() { // shows the current step
+    alert( this.step );
+  }
+};
+```
+
+Now, if we need to make several calls in sequence, can do it like this:
+
+```js
+ladder.up();
+ladder.up();
+ladder.down();
+ladder.showStep(); // 1
+```
+
+Modify the code of `up` and `down` to make the calls chainable, like this:
+
+```js
+ladder.up().up().down().showStep(); // 1
+```
+
+Such approach is widely used across Javascript libraries.

1-js/4-object-basics/03-object-methods/9-string-new-property/solution.md

@@ -0,0 +1,31 @@
+
+Try running it:
+
+```js run
+let str = "Hello";
+
+str.test = 5; // (*)
+
+alert(str.test); 
+```
+
+There may be two kinds of result:
+1. `undefined`
+2. An error.
+
+Why? Let's replay what's happening at line `(*)`:
+
+1. When a property of `str` is accessed, a "wrapper object" is created.
+2. The operation with the property is carried out on it. So, the object gets the `test` property.
+3. The operation finishes and the "wrapper object" disappears.
+
+So, on the last line, `str` has no trace of the property. A new wrapper object for every object operation on a string.
+
+Some browsers though may decide to further limit the programmer and disallow to assign properties to primitives at all. That's why in practice we can also see errors at line `(*)`. It's a little bit farther from the specification though.
+
+**This example clearly shows that primitives are not objects.**
+
+They just can not store data. 
+
+All property/method operations are performed with the help of temporary objects.
+

1-js/4-object-basics/03-object-methods/9-string-new-property/task.md

@@ -0,0 +1,18 @@
+importance: 5
+
+---
+
+# Can I add a string property?
+
+
+Consider the following code:
+
+```js
+let str = "Hello";
+
+str.test = 5;
+
+alert(str.test);
+```
+
+How do you think, will it work? What will be shown?

1-js/4-object-basics/03-object-methods/article.md

@@ -0,0 +1,305 @@
+# Object methods, "this"
+
+Objects are usually created to represent entities of the real world, like users, orders and so on:
+
+```js
+let user = {
+  name: "John",
+  age: 30
+};
+```
+
+And, in the real world, a user can `act`: to select something from the shopping cart, to login, to logout etc. 
+
+Let's implement the same in Javascript using functions in properties.
+
+[cut]
+
+## Method examples
+
+For the start, let's teach the `user` to say hello:
+
+```js run
+let user = {
+  name: "John",
+  age: 30
+};
+
+*!*
+user.sayHi = function() {
+  alert("Hello!");
+};
+*/!*
+
+user.sayHi(); // Hello!
+```
+
+Here we've just used a Function Expression to create the function and assign it to the property `user.sayHi` of the object.
+
+Then we can call it. The user now can speak!
+
+A function that is the property of an object is called its *method*.
+
+So, here we've got a method `sayHi` of the object `user`.
+
+Of course, we could use a Function Declaration to add a method:
+
+```js run
+let user = {
+  // ...
+};
+
+*!*
+// first, declare
+function sayHi() {
+  alert("Hello!");
+};
+
+// then add the method
+user.sayHi = sayHi;
+*/!*
+
+user.sayHi(); // Hello!
+```
+
+That would also work, but is longer. Also we get an "extra" function `sayHi` outside of the `user` object. Usually we don't want that.
+
+```smart header="Object-oriented programming"
+When we write our code using objects to represent entities, that's called an [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), in short: "OOP". 
+
+OOP is a big thing, an interesting science of its own. How to choose the right entities? How to organize the interaction between them? That's architecture. 
+```
+### Method shorthand
+
+There exists a shorter syntax for methods in an object literal:
+
+```js 
+// these objects do the same
+
+let user = {
+  sayHi: function() { 
+    alert("Hello");
+  }
+}; 
+
+// method shorthand looks better, right?
+let user = {
+*!*
+  sayHi() { // same as "sayHi: function()"
+*/!*
+    alert("Hello");
+  }
+}; 
+```
+
+As demonstrated, we can omit `"function"` and just write `sayHi()`. 
+
+To say the truth, the notations are not fully identical. There are subtle differences related to object inheritance (to be covered later), but for now they do not matter. In almost all cases the shorter syntax is preferred.
+
+## "this" in methods
+
+It's common that an object method needs to access the information stored in the object to do its job.
+
+For instance, `user.sayHi()` may need to mention the name of the user.
+
+**To access the object, a method can use the `this` keyword.**
+
+The value of `this` is the object "before dot", the one used to call the method.
+
+For instance:
+
+```js run
+let user = {
+  name: "John",
+  age: 30,
+
+  sayHi() {
+*!*
+    alert( this.name ); // "this" means "this object"
+*/!*
+  }
+
+};
+
+user.sayHi(); // John
+```
+
+Here during the execution of `user.sayHi()`, the value of `this` will be `user`.
+
+Technically, it's also possible to access the object without `this`:
+
+```js 
+...
+  sayHi() {
+    alert( *!*user.name*/!* ); 
+  }
+...
+```
+
+...But such code is unreliable. If we decide to copy `user` to another variable, e.g. `admin = user` and overwrite `user` with something else, then it will access the wrong object.
+
+That's demonstrated below:
+
+```js run
+let user = {
+  name: "John",
+  age: 30,
+
+  sayHi() {
+*!*
+    alert( user.name ); // leads to an error
+*/!*
+  }
+
+};
+
+
+let admin = user;
+user = null; // overwrite to make things obvious
+
+admin.sayHi(); // wops! inside sayHi(), the old name is used! error!
+```
+
+If we used `this.name` instead of `user.name` inside the `alert`, then the code would work.
+
+## "this" is not bound
+
+In Javascript, "this" keyword behaves unlike most other programming languages. First, it can be used in any function. 
+
+There's no syntax error in the code like that:
+
+```js
+function sayHi() {
+  alert( *!*this*/!*.name );
+} 
+```
+
+The value of `this` is evaluated during the run-time. And it can be anything.
+
+For instance, the same function may have different "this" when called from different objects:
+
+```js run
+let user = { name: "John" };
+let admin = { name: "Admin" };
+
+function sayHi() {
+  alert( this.name );
+}
+
+*!*
+// use the same functions in two objects
+user.f = sayHi;
+admin.f = sayHi;
+*/!*
+
+// these calls have different this
+// "this" inside the function is the object "before the dot"
+user.f(); // John  (this == user)
+admin.f(); // Admin  (this == admin)
+
+admin['f'](); // Admin (dot or square brackets access the method – doesn't matter)
+```
+
+Actually, we can call the function without an object at all:
+
+```js run
+function sayHi() {
+  alert(this);
+}
+
+sayHi();
+```
+
+In this case `this` is `undefined` in strict mode. If we try to access `this.name`, there will be an error. 
+
+In non-strict mode (if you forgot `use strict`) the value of `this` in such case will be the *global object* (`"window"` for browser, we'll study it later). This is just a historical thing that `"use strict"` fixes. 
+
+
+Please note that usually a call of a function using `this` without an object is not normal, but rather a programming mistake. If a function has `this`, then it is usually meant to be called in the context of an object.
+
+```smart header="The consequences of unbound `this`"
+If you come from another programming languages, then you are probably used to an idea of a "bound `this`", where methods defined in an object always have `this` referencing that object.
+
+The idea of unbound, run-time evaluated `this` has both pluses and minuses. From one side, a function can be reused for different objects. From the other side, it's possible to occasionally loose `this` by making an improper call. 
+
+Here we are not to judge whether this language design decision is good or bad. We will understand how to work with it, how to get benefits and evade problems.
+```
+
+## Internals: Reference Type
+
+An intricate method call can loose `this`, for instance:
+
+```js run
+let user = {
+  name: "John",
+  hi() { alert(this.name); },
+  bye() { alert("Bye"); }
+};
+
+user.hi(); // John (the simple call works)
+
+*!*
+// now let's call user.hi or user.bye depending on the name
+(user.name == "John" ? user.hi : user.bye)(); // Error!
+*/!*
+```
+
+On the last line there is an intricate code that evaluates an expression to get the method. In this case the result is `user.hi`.
+
+The method is immediately called with brackets `()`. But that doesn't work right. You can see that the call results in an error, cause the value of `"this"` inside the call becomes `undefined`.
+
+Actually, anything more complex than a simple `obj.method()` (or square brackets here) looses `this`.
+
+If we want to understand why it happens -- let's get under the hood of how `obj.method()` call works.
+
+Looking closely, we may notice two operations in `obj.method()` statement:
+
+- the dot `'.'` retrieves the property `obj.method`.
+- brackets `()` execute it (assuming that's a function).
+
+So, you might have already asked yourself, why does it work? That is, if we put these operations on separate lines, then `this` will be lost for sure:
+
+```js run
+let user = {
+  name: "John",
+  hi() { alert(this.name); }
+}
+
+*!*
+// split getting and calling the method in two lines
+let hi = user.hi;
+hi(); // Error, because this is undefined
+*/!*
+```
+
+That's because a function is a value of its own. It does not carry the object. So `hi = user.hi` saves it into the variable, and then on the last line it is completely standalone.
+
+**To make `user.hi()` calls work, Javascript uses a trick -- the dot `'.'` returns not a function, but a value of the special [Reference Type](https://tc39.github.io/ecma262/#sec-reference-specification-type).**
+
+The Reference Type is a "specification type". We can't explicitly use it, but it is used internally by the language.
+
+The value of Reference Type is a three-value combination `(base, name, strict)`, where:
+
+- `base` is the object.
+- `name` is the property.
+- `strict` is true if `use strict` is in effect.
+
+The result of a property access `'.'` is a value of Reference Type. For `user.hi` in strict mode it is:
+
+```js
+// Reference Type value
+(user, "hi", true)
+```
+
+When brackets `()` are called on the Reference Type, they receive the full information about the object and it's method, and can set the right `this` (`=user` in this case).
+
+Any other operation like assignment `hi = user.hi` discards the reference type as a whole, takes the value of `user.hi` (a function) and passes it on. So any further operation "looses" `this`.
+
+So, as the result, the value of `this` is only passed the right way if the function is called directly using a dot `obj.method()` or square brackets `obj[method]()` syntax (they do the same here).
+
+## Summary
+
+[todo]
+
+- Primitives except `null` and `undefined` provide many helpful methods. We plan to study those in the next chapters.
+- Formally, these methods work via temporary objects, but JavaScript engines are very well tuned to optimize that internally, so they are not expensive to call.