Merge pull request #135 from odsantos/fix-miscellaneous

Fix miscellaneous

Author: odsantos

1-js/99-js-misc/04-reference-type/2-check-syntax/solution.md

@@ -0,0 +1,37 @@
+**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 us much of a clue about what went wrong.
+
+**The error appears because a semicolon is missing after `user = {...}`.**
+
+JavaScript does not auto-insert 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 parentheses 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/99-js-misc/04-reference-type/2-check-syntax/task.md

@@ -0,0 +1,19 @@
+importance: 2
+
+---
+
+# Syntax check
+
+What is the result 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/99-js-misc/04-reference-type/3-why-this/solution.md

@@ -0,0 +1,22 @@
+
+Here's the explanations.
+
+1. That's a regular object method call.
+
+2. The same, parentheses 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/99-js-misc/04-reference-type/3-why-this/task.md

@@ -0,0 +1,26 @@
+importance: 3
+
+---
+
+# Explain the value of "this"
+
+In the code below we intend to call `obj.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/99-js-misc/04-reference-type/article.md

@@ -0,0 +1,114 @@
+
+# Reference Type
+
+```warn header="In-depth language feature"
+This article covers an advanced topic, to understand certain edge-cases better.
+
+It's not important. Many experienced developers live fine without knowing it. Read on if you're  want to know how things work under the hood.
+```
+
+A dynamically evaluated method call can lose `this`.
+
+For instance:
+
+```js run
+let user = {
+  name: "John",
+  hi() { alert(this.name); },
+  bye() { alert("Bye"); }
+};
+
+user.hi(); // 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 a conditional operator that chooses either `user.hi` or `user.bye`. In this case the result is `user.hi`.
+
+Then the method is immediately called with parentheses `()`. But it doesn't work correctly!
+
+As you can see, the call results in an error, because the value of `"this"` inside the call becomes `undefined`.
+
+This works (object dot method):
+```js
+user.hi();
+```
+
+This doesn't (evaluated method):
+```js
+(user.name == "John" ? user.hi : user.bye)(); // Error!
+```
+
+Why? If we want to understand why it happens, let's get under the hood of how `obj.method()` call works.
+
+## Reference type explained
+
+Looking closely, we may notice two operations in `obj.method()` statement:
+
+1. First, the dot `'.'` retrieves the property `obj.method`.
+2. Then parentheses `()` execute it.
+
+So, how does the information about `this` get passed from the first part to the second one?
+
+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
+*/!*
+```
+
+Here `hi = user.hi` puts the function into the variable, and then on the last line it is completely standalone, and so there's no `this`.
+
+**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 name.
+- `strict` is true if `use strict` is in effect.
+
+The result of a property access `user.hi` is not a function, but a value of Reference Type. For `user.hi` in strict mode it is:
+
+```js
+// Reference Type value
+(user, "hi", true)
+```
+
+When parentheses `()` are called on the Reference Type, they receive the full information about the object and its method, and can set the right `this` (`=user` in this case).
+
+Reference type is a special "intermediary" internal type, with the purpose to pass information from dot `.` to calling parentheses `()`.
+
+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 "loses" `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). Later in this tutorial, we will learn various ways to solve this problem such as [func.bind()](/bind#solution-2-bind).
+
+## Summary
+
+Reference Type is an internal type of the language.
+
+Reading a property, such as with dot `.` in `obj.method()` returns not exactly the property value, but a special "reference type" value that stores both the property value and the object it was taken from.
+
+That's for the subsequent method call `()` to get the object and set `this` to it.
+
+For all other operations, the reference type automatically becomes the property value (a function in our case).
+
+The whole mechanics is hidden from our eyes. It only matters in subtle cases, such as when a method is obtained dynamically from the object, using an expression.
+
+
+
+
+
+ result of dot `.` isn't actually a method, but a value of `` needs a way to pass the information about `obj`

1-js/99-js-misc/05-bigint/article.md

@@ -0,0 +1,130 @@
+# BigInt
+
+[recent caniuse="bigint"]
+
+`BigInt` is a special numeric type that provides support for integers of arbitrary length.
+
+A bigint is created by appending `n` to the end of an integer literal or by calling the function `BigInt` that creates bigints from strings, numbers etc.
+
+```js
+const bigint = 1234567890123456789012345678901234567890n;
+
+const sameBigint = BigInt("1234567890123456789012345678901234567890");
+
+const bigintFromNumber = BigInt(10); // same as 10n
+```
+
+## Math operators
+
+`BigInt` can mostly be used like a regular number, for example:
+
+```js run
+alert(1n + 2n); // 3
+
+alert(5n / 2n); // 2
+```
+
+Please note: the division `5/2` returns the result rounded towards zero, without the decimal part. All operations on bigints return bigints.
+
+We can't mix bigints and regular numbers:
+
+```js run
+alert(1n + 2); // Error: Cannot mix BigInt and other types
+```
+
+We should explicitly convert them if needed: using either `BigInt()` or `Number()`, like this:
+
+```js run
+let bigint = 1n;
+let number = 2;
+
+// number to bigint
+alert(bigint + BigInt(number)); // 3
+
+// bigint to number
+alert(Number(bigint) + number); // 3
+```
+
+The conversion operations are always silent, never give errors, but if the bigint is too huge and won't fit the number type, then extra bits will be cut off, so we should be careful doing such conversion.
+
+````smart header="The unary plus is not supported on bigints"
+The unary plus operator `+value` is a well-known way to convert `value` to a number.
+
+On bigints it's not supported, to avoid confusion:
+```js run
+let bigint = 1n;
+
+alert( +bigint ); // error
+```
+So we should use `Number()` to convert a bigint to a number.
+````
+
+## Comparisons
+
+Comparisons, such as `<`, `>` work with bigints and numbers just fine:
+
+```js run
+alert( 2n > 1n ); // true
+
+alert( 2n > 1 ); // true
+```
+
+Please note though, as numbers and bigints belong to different types, they can be equal `==`, but not strictly equal `===`:
+
+```js run
+alert( 1 == 1n ); // true
+
+alert( 1 === 1n ); // false
+```
+
+## Boolean operations
+
+When inside `if` or other boolean operations, bigints behave like numbers.
+
+For instance, in `if`, bigint `0n` is falsy, other values are truthy:
+
+```js run
+if (0n) {
+  // never executes
+}
+```
+
+Boolean operators, such as `||`, `&&` and others also work with bigints similar to numbers:
+
+```js run
+alert( 1n || 2 ); // 1 (1n is considered truthy)
+
+alert( 0n || 2 ); // 2 (0n is considered falsy)
+```
+
+## Polyfills
+
+Polyfilling bigints is tricky. The reason is that many JavaScript operators, such as `+`, `-` and so on behave differently with bigints compared to regular numbers.
+
+For example, division of bigints always returns a bigint (rounded if necessary).
+
+To emulate such behavior, a polyfill would need to analyze the code and replace all such operators with its functions. But doing so is cumbersome and would cost a lot of performance.
+
+So, there's no well-known good polyfill.
+
+Although, the other way around is proposed by the developers of [JSBI](https://github.com/GoogleChromeLabs/jsbi) library.
+
+This library implements big numbers using its own methods. We can use them instead of native bigints:
+
+| Operation | native `BigInt` | JSBI |
+|-----------|-----------------|------|
+| Creation from Number | `a = BigInt(789)` | `a = JSBI.BigInt(789)` |
+| Addition | `c = a + b` | `c = JSBI.add(a, b)` |
+| Subtraction	| `c = a - b` | `c = JSBI.subtract(a, b)` |
+| ... | ... | ... |
+
+...And then use the polyfill (Babel plugin) to convert JSBI calls to native bigints for those browsers that support them.
+
+In other words, this approach suggests that we write code in JSBI instead of native bigints. But JSBI works with numbers as with bigints internally, emulates them closely following the specification, so the code will be "bigint-ready".
+
+We can use such JSBI code "as is" for engines that don't support bigints and for those that do support - the polyfill will convert the calls to native bigints.
+
+## References
+
+- [MDN docs on BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt).
+- [Specification](https://tc39.es/ecma262/#sec-bigint-objects).