refactor promise, geneerators, global object

Author: iliakan

1-js/04-object-basics/04-object-methods/article.md

@@ -214,7 +214,7 @@ sayHi(); // undefined
 
 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 one forgets `use strict`) the value of `this` in such case will be the *global object* (`window` in a browser, we'll get to it later). This is a historical behavior that `"use strict"` fixes.
+In non-strict mode the value of `this` in such case will be the *global object* (`window` in a browser, we'll get to it later in the chapter [](info:global-object)). This is a historical behavior that `"use strict"` fixes.
 
 Please note that usually a call of a function that uses `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.
 

1-js/06-advanced-functions/03-closure/article.md

@@ -182,4 +182,4 @@ There are two main differences of `var`:
 
 There's one more minor difference related to the global object, we'll cover that in the next chapter.
 
-These differences are actually a bad thing most of the time. First, we can't create block-local variables. And hoisting just creates more space for errors. So, for new scripts `var` is used exceptionally rarely.
+These differences are actually a bad thing most of the time. Block-level variables is such a great thing. That's why `let` was introduced in the standard long ago, and is now a major way (along with `const`) to declare a variable.

1-js/06-advanced-functions/04-var/article.md

@@ -1,171 +1,155 @@
 
-
 # Global object
 
-When JavaScript was created, there was an idea of a "global object" that provides all global variables and functions. It was planned that multiple in-browser scripts would use that single global object and share variables through it.
-
-Since then, JavaScript greatly evolved, and that idea of linking code through global variables became much less appealing. In modern JavaScript, the concept of modules took its place.
-
-But the global object still remains in the specification.
+The global object provides variables and functions that are available anywhere. Mostly, the ones that are built into the language or the host environment.
 
 In a browser it is named "window", for Node.JS it is "global", for other environments it may have another name.
 
-It does two things:
+For instance, we can call `alert` as a method of `window`:
 
-1. Provides access to built-in functions and values, defined by the specification and the environment.
-    For instance, we can call `alert` directly or as a method of `window`:
+```js run
+alert("Hello");
 
-    ```js run
-    alert("Hello");
-
-    // the same as
-    window.alert("Hello");
-    ```
+// the same as
+window.alert("Hello");
+```
 
-    The same applies to other built-ins. E.g. we can use `window.Array` instead of `Array`.
+We can reference other built-in functions like `Array` as `window.Array` and create our own properties on it.
 
-2. Provides access to global Function Declarations and `var` variables. We can read and write them using its properties, for instance:
+## Browser: the "window" object
 
-    <!-- no-strict to move variables out of eval -->
-    ```js untrusted run no-strict refresh
-    var phrase = "Hello";
+For historical reasons, in-browser `window` object is a bit messed up.
 
-    function sayHi() {
-      alert(phrase);
-    }
+1. It provides the "browser window" functionality, besides playing the role of a global object.
 
-    // can read from window
-    alert( window.phrase ); // Hello (global var)
-    alert( window.sayHi ); // function (global function declaration)
+    We can use `window` to access properties and methods, specific to the browser window:
 
-    // can write to window (creates a new global variable)
-    window.test = 5;
+    ```js run
+    alert(window.innerHeight); // shows the browser window height
 
-    alert(test); // 5
+    window.open('http://google.com'); // opens a new browser window
     ```
 
-...But the global object does not have variables declared with `let/const`!
+2. Top-level `var` variables and function declarations automatically become properties of `window`.
 
-```js untrusted run no-strict refresh
-*!*let*/!* user = "John";
-alert(user); // John
+    For instance:
+    ```js untrusted run no-strict refresh
+    var x = 5;
 
-alert(window.user); // undefined, don't have let
-alert("user" in window); // false
-```
+    alert(window.x); // 5 (var x becomes a property of window)
 
-```smart header="The global object is not a global Environment Record"
-In versions of ECMAScript prior to ES-2015, there were no `let/const` variables, only `var`. And global object was used as a global Environment Record (wordings were a bit different, but that's the gist).
+    window.x = 0;
 
-But starting from ES-2015, these entities are split apart. There's a global Lexical Environment with its Environment Record. And there's a global object that provides *some* of the global variables.
+    alert(x); // 0, variable modified
+    ```
 
-As a practical difference, global `let/const` variables are definitively properties of the global Environment Record, but they do not exist in the global object.
+    Please note, that doesn't happen with more modern `let/const` declarations:
 
-Naturally, that's because the idea of a global object as a way to access "all global things" comes from ancient times. Nowadays it's not considered to be a good thing. Modern language features like `let/const` do not make friends with it, but old ones are still compatible.
-```
+    ```js untrusted run no-strict refresh
+    let x = 5;
 
-## Uses of "window"
+    alert(window.x); // undefined ("let" doesn't create a window property)
+    ```
 
-In server-side environments like Node.JS, the `global` object is used exceptionally rarely. Probably it would be fair to say "never".
+3. Also, all scripts share the same global scope, so variables declared in one `<script>` become visible in  another ones:
 
-In-browser `window` is sometimes used though.
+    ```html run
+    <script>
+      var a = 1;
+      let b = 2;
+    </script>
 
-Usually, it's not a good idea to use it, but here are some examples you can meet.
+    <script>
+      alert(a); // 1
+      alert(b); // 2
+    </script>
+    ```
 
-1. To access exactly the global variable if the function has the local one with the same name.
+4. And, a minor thing, but still: the value of `this` in the global scope is `window`.
 
     ```js untrusted run no-strict refresh
-    var user = "Global";
-
-    function sayHi() {
-      var user = "Local";
-
-    *!*
-      alert(window.user); // Global
-    */!*
-    }
-
-    sayHi();
+    alert(this); // window
     ```
 
-    Such use is a workaround. Would be better to name variables differently, that won't require use to write the code it this way. And please note `"var"` before `user`. The trick doesn't work with `let` variables.
+Why was it made like this? At the time of the language creation, the idea to merge multiple aspects into a single `window` object was to "make things simple". But since then many things changed. Tiny scripts became big applications that require proper architecture.
 
-2. To check if a certain global variable or a builtin exists.
+Is it good that different scripts (possibly from different sources) see variables of each other?
 
-    For instance, we want to check whether a global function `XMLHttpRequest` exists.
+No, it's not, because it may lead to naming conflicts: the same variable name can be used in two scripts for different purposes, so they will conflict with each other.
 
-    We can't write `if (XMLHttpRequest)`, because if there's no `XMLHttpRequest`, there will be an error (variable not defined).
+As of now, the multi-purpose `window` is considered a design mistake in the language.
 
-    But we can read it from `window.XMLHttpRequest`:
+Luckily, there's a "road out of hell", called "Javascript modules".
 
-    ```js run
-    if (window.XMLHttpRequest) {
-      alert('XMLHttpRequest exists!')
-    }
-    ```
+If we set `type="module"` attribute on a `<script>` tag, then such script is considered a separate "module" with its own top-level scope (lexical environment), not interfering with `window`.
 
-    If there is no such global function then `window.XMLHttpRequest` is just a non-existing object property. That's `undefined`, no error, so it works.
+- In a module, `var x` does not become a property of `window`:
 
-    We can also write the test without `window`:
+    ```html run
+    <script type="module">
+      var x = 5;
 
-    ```js
-    if (typeof XMLHttpRequest == 'function') {
-      /* is there a function XMLHttpRequest? */
-    }
+      alert(window.x); // undefined
+    </script>
     ```
 
-    This doesn't use `window`, but is (theoretically) less reliable, because `typeof` may use a local XMLHttpRequest, and we want the global one.
+- Two modules that do not see variables of each other:
 
+    ```html run
+    <script type="module">
+      let x = 5;
+    </script>
 
-3. To take the variable from the right window. That's probably the most valid use case.
+    <script type="module">
+      alert(window.x); // undefined
+      alert(x); // Error: undeclared variable
+    </script>
+    ```
 
-    A browser may open multiple windows and tabs. A window may also embed another one in `<iframe>`. Every browser window has its own `window` object and global variables. JavaScript allows windows that come from the same site (same protocol, host, port) to access variables from each other.
+- And, the last minor thing, the top-level value of `this` in a module is `undefined` (why should it be `window` anyway?):
 
-    That use is a little bit beyond our scope for now, but it looks like:
     ```html run
-    <iframe src="/" id="iframe"></iframe>
-
-    <script>
-      alert( innerWidth ); // get innerWidth property of the current window (browser only)
-      alert( Array ); // get Array of the current window (javascript core builtin)
-
-      // when the iframe loads...
-      iframe.onload = function() {
-        // get width of the iframe window
-      *!*
-        alert( iframe.contentWindow.innerWidth );
-      */!*
-        // get the builtin Array from the iframe window
-      *!*
-        alert( iframe.contentWindow.Array );
-      */!*
-      };
+    <script type="module">
+      alert(this); // undefined
     </script>
     ```
 
-    Here, first two alerts use the current window, and the latter two take variables from `iframe` window. Can be any variables if `iframe` originates from the same protocol/host/port.
+**Using `<script type="module">` fixes the design flaw of the language by separating top-level scope from `window`.**
+
+We'll cover more features of modules later, in the chapter [](info:modules).
 
-## "this" and global object
+## Valid uses of the global object
 
-Sometimes, the value of `this` is exactly the global object. That's rarely used, but some scripts rely on that.
+1. Using global variables is generally discouraged. There should be as few global variables as possible, but if we need to make something globally visible, we may want to put it into `window` (or `global` in Node.js).
 
-1. In the browser, the value of `this` in the global area is `window`:
+    Here we put the information about the current user into a global object, to be accessible from all other scripts:
 
     ```js run
-    // outside of functions
-    alert( this === window ); // true
+    // explicitly assign it to `window`
+    window.currentUser = {
+      name: "John",
+      age: 30
+    };
+
+    // then, elsewhere, in another script
+    alert(window.currentUser.name); // John
     ```
 
-    Other, non-browser environments, may use another value for `this` in such cases.
+2. We can test the global object for support of modern language features.
 
-2. When a function with `this` is called in non-strict mode, it gets the global object as `this`:
-    ```js run no-strict
-    // not in strict mode (!)
-    function f() {
-      alert(this); // [object Window]
+    For instance, test if a build-in `Promise` object exists (it doesn't in really old browsers):
+    ```js run
+    if (!window.Promise) {
+      alert("Your browser is really old!");
     }
+    ```
+
+3. We can create "polyfills": add functions that are not supported by the environment (say, an old browser), but exist in the modern standard.
 
-    f(); // called without an object
+    ```js run
+    if (!window.Promise) {
+      window.Promise = ... // custom implementation of the modern language feature
+    }
     ```
 
-    By specification, `this` in this case must be the global object, even in non-browser environments like Node.JS. That's for compatibility with old scripts, in strict mode `this` would be `undefined`.
+...And of course, if we're in a browser, using `window` to access browser window features (not as a global object) is completely fine.

1-js/06-advanced-functions/05-global-object/article.md

@@ -0,0 +1,38 @@
+```js run demo
+function* pseudoRandom(seed) {
+  let value = seed;
+
+  while(true) {
+    value = value * 16807 % 2147483647
+    yield value;
+  }
+
+};
+
+let generator = pseudoRandom(1);
+
+alert(generator.next().value); // 16807
+alert(generator.next().value); // 282475249
+alert(generator.next().value); // 1622650073
+```
+
+Please note, the same can be done with a regular function, like this:
+
+```js run
+function pseudoRandom(seed) {
+  let value = seed;
+
+  return function() {
+    value = value * 16807 % 2147483647;
+    return value;
+  }
+}
+
+let generator = pseudoRandom(1);
+
+alert(generator()); // 16807
+alert(generator()); // 282475249
+alert(generator()); // 1622650073
+```
+
+That's fine for this context. But then we loose ability to iterate with `for..of` and to use generator composition, that may be useful elsewhere.

1-js/10-generators/01-generator/01-pseudo-random-generator/_js.view/solution.js renamed to 1-js/06-advanced-functions/13-generators/01-pseudo-random-generator/_js.view/solution.js

@@ -23,12 +23,12 @@ If we use `1` as the seed, the values will be:
 
 The task is to create a generator function `pseudoRandom(seed)` that takes `seed` and creates the generator with this formula.
 
-Use example:
+Usage example:
 
 ```js
-let gen = pseudoRandom(1);
+let generator = pseudoRandom(1);
 
-alert(gen.next().value); // 16807
-alert(gen.next().value); // 282475249
-alert(gen.next().value); // 1622650073
+alert(generator.next().value); // 16807
+alert(generator.next().value); // 282475249
+alert(generator.next().value); // 1622650073
 ```