vasco3 · July 26, 2024 16:43 · Aug 27, 2015 · Aug 18, 2015 · Jul 24, 2015 · Jul 23, 2015
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -155,6 +155,15 @@ let abcs = ['a', 'b', 'c'];
 let alphanum = [ ...nums, ...abs ]; // [1, 2, 3, 'a', 'b', 'c']
 ```
 
+## Object short-hand
+
+```javascript
+const x = 4;
+const y = 2;
+
+const o = { x, y, z: x * y }; // { x: 4, y: 2, z: 8 }
+```
+
 ## Descructuring
 
 "Destructuring allows you to bind a set of variables to a corresponding set of values anywhere that you can normally bind a value to a single variable."

diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -790,6 +790,11 @@ console.log(genit.next(12)); // { value: 8, done: false }
 console.log(genit.next(13)); // { value: 42, done: true }
 ```
 
+## HTML Templates
+
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings
+
+
 [More info](https://github.com/lukehoban/es6features)
  
 

diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -790,7 +790,7 @@ console.log(genit.next(12)); // { value: 8, done: false }
 console.log(genit.next(13)); // { value: 42, done: true }
 ```
 
-
+[More info](https://github.com/lukehoban/es6features)
  
 
 
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -48,6 +48,18 @@
     - [System.import API](#systemimport-api)
       - [Load All](#load-all)
     - [System "Module" functions](#system-module-functions)
+    - [Module HTML Tag](#module-html-tag)
+  - [Promises](#promises)
+    - [Promise Constructor](#promise-constructor)
+    - [Promise Instance](#promise-instance)
+    - [Catch](#catch)
+    - [All](#all)
+    - [Static Promise Methods](#static-promise-methods)
+  - [Generators](#generators)
+    - [Basic Syntax](#basic-syntax)
+    - [Yield](#yield)
+    - [Iterating on Generators](#iterating-on-generators)
+    - [Generator with arguments](#generator-with-arguments)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 

diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -778,6 +778,7 @@ console.log(genit.next(12)); // { value: 8, done: false }
 console.log(genit.next(13)); // { value: 42, done: true }
 ```
 
-last video watched: 36
+
+ 
 
 
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -766,9 +766,9 @@ for (var v of foo()) {
 
 ```javascript
 function *foo(x) {
-  var y = 2 * (yield (x + 1));
+  var y = 2 * (yield (x + 1)); 
   var z = yield (y / 3);
-  return (x + y + z);
+  return (x + y + z); // 5 + 24 + 13
 }
 
 var genit = foo(5);

diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -762,6 +762,22 @@ for (var v of foo()) {
 // Logs 1, 2, 3, 4, 5
 ```
 
+### Generator with arguments
+
+```javascript
+function *foo(x) {
+  var y = 2 * (yield (x + 1));
+  var z = yield (y / 3);
+  return (x + y + z);
+}
+
+var genit = foo(5);
+
+console.log(genit.next()); // { value: 6, done: false }
+console.log(genit.next(12)); // { value: 8, done: false }
+console.log(genit.next(13)); // { value: 42, done: true }
+```
+
 last video watched: 36
 
 
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -740,7 +740,26 @@ function *three() {
 var geni = three(); // starts the generator but doesn't run it
 geni.next(); // runs the function for one iteration. Returns { value: 1, done: false }
 geni.next(); // Returns { value: 2, done: false }
-geni.next(); // Returns { value: 3, done: true }
+geni.next(); // Returns { value: 3, done: true }. This ends the generator. 
+geni.next(); // Returns { value: undefined, done: true }
+```
+
+### Iterating on Generators
+It iterates while done = false.
+```javascript
+function *foo() {
+  yield 1;
+  yield 2;
+  yield 3;
+  yield 4;
+  yield 5;
+  return 6;
+}
+
+for (var v of foo()) {
+  console.log(v);
+}
+// Logs 1, 2, 3, 4, 5
 ```
 
 last video watched: 36

diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -716,8 +716,33 @@ Promise.all([usersPromise, postsPromise])
 - Promise.reject(reason); // Create a promise that is already rejected
 - Promise.resolve(value); // Create a promise that is already resolved
  
-## Async Generators
+## Generators
 
+Generators are functions which can be exited and later re-entered. Useful for long iteration functions, so they can be paused to prevent blocking other functions for too long.
+
+### Basic Syntax
+
+```javascript
+function* myGen() { }
+// or 
+function *myGen() { }
+
+```
+
+### Yield
+```javascript
+function *three() {
+  yield 1;
+  yield 2;
+  return 3;
+}
+
+var geni = three(); // starts the generator but doesn't run it
+geni.next(); // runs the function for one iteration. Returns { value: 1, done: false }
+geni.next(); // Returns { value: 2, done: false }
+geni.next(); // Returns { value: 3, done: true }
+```
+
+last video watched: 36
 
 
-last video watched: 35
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -709,4 +709,15 @@ Promise.all([usersPromise, postsPromise])
 });
 ```
 
+### Static Promise Methods
+
+- Promise.all(iterable); // Wait until all settle
+- Promise.race(iterable); // Wait until 1 settles
+- Promise.reject(reason); // Create a promise that is already rejected
+- Promise.resolve(value); // Create a promise that is already resolved
+ 
+## Async Generators
+
+
+
 last video watched: 35
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -680,6 +680,33 @@ A `promise` can be in 1 of 4 states
 - pending: hasn't resolved or rejected yet (undefined)
 - settled: fulfilled or rejected (1 or 2)
 
+### Catch
+You can use .catch instead of second handler in .then
+```javascript
+get('users.all')
+  .then(function(users) {
+    myController.users = users;
+  })
+  .catch(function() {
+    delete myController.users;
+  });
+```
 
+### All
+
+```javascript
+var usersPromise = get('users.all');
+var postsPromise = get('ports.everyone');
+
+// Wait until BOTH are settled
+Promise.all([usersPromise, postsPromise])
+.then(function(results) {
+  myController.users = results[0];
+  myController.posts = results[1];
+}, function() {
+  delete myController.users;
+  delete myController.posts;
+});
+```
 
 last video watched: 35
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -655,4 +655,31 @@ To load module in the html
   </module>
 </head>
 ```
-last video watched: 34
+
+## Promises
+Like using `Q`
+
+### Promise Constructor
+```javascript
+var promise = new Promise(function(resolve, reject) {
+  // do a thing, possibly async, then...
+
+  if (/* everything turned out fine */) {
+    resolve("Stuff worked!");
+  } else {
+    reject(Error("It broke"));
+  }
+});
+return promise; 
+```
+
+### Promise Instance
+A `promise` can be in 1 of 4 states
+- fulfilled: successfully resolved (1)
+- rejected: rejected (2)
+- pending: hasn't resolved or rejected yet (undefined)
+- settled: fulfilled or rejected (1 or 2)
+
+
+
+last video watched: 35
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -631,4 +631,28 @@ System.define(name, source, options?);
 // Eval code and register module
 ```
 
+### Module HTML Tag
+
+To load module in the html
+```html
+<head>
+  <module import="my-module.js"></module>
+</head>
+```
+
+```html
+<head>
+  <module>
+    import $ from 'lib/jquery';
+    console.log('$' in this); // false becaue it won't attach the import to the window global
+    // globals trapped in module
+
+    // Other JS here
+    console.log(window); // Still can call window
+
+    // let x = 1;
+    Module Tag is force strict mode
+  </module>
+</head>
+```
 last video watched: 34
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -29,6 +29,25 @@
     - [Parenthesis-Parameter Rules](#parenthesis-parameter-rules)
     - [REAL benefit: lexical binding of 'this'](#real-benefit-lexical-binding-of-this)
   - [Classes](#classes)
+    - [Classes gotchas](#classes-gotchas)
+    - [Extend classes](#extend-classes)
+  - [Collections](#collections)
+    - [SET](#set)
+    - [MAP](#map)
+      - [Objects as keys](#objects-as-keys)
+    - [WEAKMAP](#weakmap)
+  - [Modules](#modules)
+    - [Default export](#default-export)
+    - [Multiple exports.](#multiple-exports)
+    - [Export as](#export-as)
+    - [Cyclical Dependencies](#cyclical-dependencies)
+    - [More importing](#more-importing)
+    - [More Exporting](#more-exporting)
+    - [Re-exporting](#re-exporting)
+  - [Modules - Programatic Loading API](#modules---programatic-loading-api)
+    - [System.import API](#systemimport-api)
+      - [Load All](#load-all)
+    - [System "Module" functions](#system-module-functions)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 

diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -571,4 +571,45 @@ export { foo, bar } form 'src/other_module';
 // Export other_module's foo as myFoo
 export { foo as myFoo, bar } from 'src/other_module';
 ```
-last video watched: 33
+
+## Modules - Programatic Loading API
+
+### System.import API
+This method will return a promise
+```javascript
+System.import('some_module')
+.then(some_module => {
+  ...
+})
+.catch(error => {
+  ...
+});
+```
+
+#### Load All
+```javascript
+  Promise.all(
+    ['module1', 'module2', 'module3']
+    .map(x => System.import(x)))
+  .then(function ([module1, module2, module3]) {
+    // my code...
+  });
+```
+
+### System "Module" functions
+
+```javascript
+System.import(source);
+// Returns module via Promise
+
+System.module(source, options);
+// Returns module via Promise
+
+System.set(name, module);
+// Inline register a new module
+
+System.define(name, source, options?);
+// Eval code and register module
+```
+
+last video watched: 34
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -455,6 +455,7 @@ A weakmap holds only a weak reference to a key, which means the reference inside
 ## Modules
 Like CommonJS
 
+### Default export
 The default means will import the default export.
 ```javascript
 // MyClass.js
@@ -467,7 +468,7 @@ export default MyClass;
 import MyClass from 'MyClass';
 ```
 
-Multiple exports. 
+### Multiple exports. 
 You can call just the exports you need from a specific module.
 ```javascript
 // lib.js
@@ -494,6 +495,80 @@ console.log(lib.square(11)); // 121
 console.log(lib.diag(4, 3)); // 5
 ```
 
+### Export as
 
+```javascript
+// lib.js
+class MyClass {
+  //...
+}
 
+// main.js
+import { Dude as Bro } from 'lib';
+var bro = new Bro(); // instanceof MyClass  
+```
+
+### Cyclical Dependencies
+
+The following would be allowed
+```javascript
+// lib.js
+import Main from 'main';
+var lib = {message: "This Is A Lib"};
+export { lib as Lib };
+
+// main.js
+import { Lib } from 'lib';
+export default class Main { 
+  // ....
+}
+```
+
+### More importing
+
+```javascript
+// lib.js
+// Default exports and named exports
+import theDefault, { named1, named2 } from 'src/mylib';
+import theDefault from 'src/mylib';
+import { named1, named2 } from 'src/mylib';
+
+// Renaming: import named1 as myNamed1
+import { named1 as myNamed1, named2 } from 'src/mylib';
+
+// Importing the module as an object
+// (with one property per named export)
+import * as mylib from 'src/mylib';
+
+// Only load the module, don't import anything
+import 'src/mylib';
+```
+
+### More Exporting
+
+```javascript
+export var myVar = ...;
+export let myVar = ...;
+export const MY_CONST = ...;
+
+export function myFunc() {
+  ...
+}
+export function* myGeneratorFunc() {
+  ...
+}
+export class MyClass {
+  ...
+}
+```
+
+### Re-exporting
+This is for exporting something you are importing.
+```javascript
+export * from 'src/other_module';
+export { foo, bar } form 'src/other_module';
+
+// Export other_module's foo as myFoo
+export { foo as myFoo, bar } from 'src/other_module';
+```
 last video watched: 33
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -485,7 +485,10 @@ console.log(square(11)); // 121
 console.log(diag(4, 3)); // 5
 
 // second.js
-// or you can call them with * 
+// or you can call them with '*'
+// but then you have to prefix the exports with
+// the module name
+
 import * as lib from 'lib';
 console.log(lib.square(11)); // 121
 console.log(lib.diag(4, 3)); // 5

diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -452,4 +452,45 @@ eg. when using a DOM element as a key in a map, then the DOM element gets delete
 
 A weakmap holds only a weak reference to a key, which means the reference inside of the weakmap doesn't prevent garbage collection of that object.
 
+## Modules
+Like CommonJS
+
+The default means will import the default export.
+```javascript
+// MyClass.js
+class MyClass{
+  constructor() {}
+}
+export default MyClass;
+
+// Main.js
+import MyClass from 'MyClass';
+```
+
+Multiple exports. 
+You can call just the exports you need from a specific module.
+```javascript
+// lib.js
+export const sqrt = Math.sqrt;
+export function square(x) {
+  return x * x;
+}
+export function diag(x, y) {
+  return sqrt(square(x) + square(y));
+}
+
+// main.js
+import { square, diag } from 'lib';
+console.log(square(11)); // 121
+console.log(diag(4, 3)); // 5
+
+// second.js
+// or you can call them with * 
+import * as lib from 'lib';
+console.log(lib.square(11)); // 121
+console.log(lib.diag(4, 3)); // 5
+```
+
+
+
 last video watched: 33
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -450,5 +450,6 @@ It will not hold to a key that is not used by any other element.
 This is useful to prevent unlimited garbage. 
 eg. when using a DOM element as a key in a map, then the DOM element gets deleted, the weakmap will delete that key-value as well.
 
+A weakmap holds only a weak reference to a key, which means the reference inside of the weakmap doesn't prevent garbage collection of that object.
 
-last video watched: 32
+last video watched: 33
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -440,4 +440,15 @@ var userHobbyMap = new Map();
 userHobbyMap.set(user, ['Ice Fishing', 'Family Outting']);
 ```
 
+### WEAKMAP
+
+Like a map 
+but it doesn't has a size 
+and no primitive keys.
+
+It will not hold to a key that is not used by any other element.
+This is useful to prevent unlimited garbage. 
+eg. when using a DOM element as a key in a map, then the DOM element gets deleted, the weakmap will delete that key-value as well.
+
+
 last video watched: 32
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -392,6 +392,7 @@ class Godzilla extends Monster {
 
 SETs are similar to Arrays. 
 The difference is they force unique values.
+No typecasting in keys.
 
 ```javascript
 var set = new Set();
@@ -417,4 +418,26 @@ for (let num of set) {
   console.log(num); // logs 1, 2, 3, 5
 }
 ```
-last video watched: 31
+
+### MAP
+
+No typecasting in keys.
+
+```javascript
+var map = new Map();
+map.set('name', 'Jorge');
+map.get('name'); // Jorge
+map.has('name'); // true
+```
+
+#### Objects as keys
+The key can be a function, a primitive, an object.. 
+But it has to be exactly the same. If it is a copy or it is mutated, then it will stop working.
+
+```javascript
+var user = { name: 'Jorge', id: 1234 };
+var userHobbyMap = new Map();
+userHobbyMap.set(user, ['Ice Fishing', 'Family Outting']);
+```
+
+last video watched: 32
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -398,9 +398,23 @@ var set = new Set();
 set.add(1);
 set.add(2);
 set.add(3);
-console.log(set.size); // logs 3
+set.size; // logs 3. It is like Array.prototype.length
 set.has(2); // true
 set.clear(); // deletes all values
+set.delete(2); // deletes value 2
+```
+
+Another way to create a Set
+```javascript
+var set = new Set([1, 2, 3, 5]);
+```
 
+A new loop
+```javascript
+var set = new Set([1, 2, 3, 5]);
+
+for (let num of set) {
+  console.log(num); // logs 1, 2, 3, 5
+}
 ```
-last video watched: 30
+last video watched: 31
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -386,4 +386,21 @@ class Godzilla extends Monster {
 }
 ```
 
+## Collections
+
+### SET
+
+SETs are similar to Arrays. 
+The difference is they force unique values.
+
+```javascript
+var set = new Set();
+set.add(1);
+set.add(2);
+set.add(3);
+console.log(set.size); // logs 3
+set.has(2); // true
+set.clear(); // deletes all values
+
+```
 last video watched: 30
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -386,4 +386,4 @@ class Godzilla extends Monster {
 }
 ```
 
-last video watched: 27
+last video watched: 30
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -370,6 +370,8 @@ var Jorge = new Monster('Jorge', 3);
 jorge.name = 'kevin';
 ```
 
+Classes don't hoist.
+
 ### Extend classes
 
 ```javascript

diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -336,6 +336,10 @@ class Monster {
   set isAlive(alive) {
     if(!alive) this[monsterHealth] = 0;
   }
+  // method
+  attack(target) {
+    console.log(this.name + ' attacks ' + target.name);
+  }
 }
 
 var Jorge = new Monster('Jorge', 3);
@@ -366,5 +370,18 @@ var Jorge = new Monster('Jorge', 3);
 jorge.name = 'kevin';
 ```
 
+### Extend classes
+
+```javascript
+class Godzilla extends Monster {
+    constructor() {
+        super('Godzilla', 10000);
+    }
+
+    attack(target) {
+      super(target); // will call the Monster attack method
+    }
+}
+```
 
 last video watched: 27
diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -348,7 +348,7 @@ console.log(jorge.isAlive); // false
 
 ### Classes gotchas
 
-The following will fall in a death cycling trap because the setter for name is already in the constructor.
+The following will fall in a cyclical death trap because the setter for name is already in the constructor.
 ```javascript
 
 class Monster {

diff --git a/es6-cheatsheet.markdown b/es6-cheatsheet.markdown
@@ -346,6 +346,25 @@ console.log(jorge.isAlive); // false
 
 ```
 
+### Classes gotchas
+
+The following will fall in a death cycling trap because the setter for name is already in the constructor.
+```javascript
+
+class Monster {
+  constructor(name) {
+    this.name = name;
+  }
+  // setter
+  set name (name) {
+    this.name = name;
+  }
+}
+
+var Jorge = new Monster('Jorge', 3);
+
+jorge.name = 'kevin';
+```
 
 
 last video watched: 27