Made a few mentions of ES6

resources/public/synonym.html

@@ -59,13 +59,21 @@ <h3>Code modularity</h3>
         <h4>Define a library</h4>
         <div class="cheat-box-container eight columns">
             <div class="cheat-box">
-                <pre class="brush: js">// No native implementation</pre>
+                <pre class="brush: js">// No native implementation pre-ES6.
+  // In ES6, all public members must be
+  // explicitly exported. Also, the file is
+  // the library - there is no namespaces.
+  export function foo () {
+    ...
+  }</pre>
             </div>
         </div>
 
         <div class="cheat-box-container eight columns">
             <div class="cheat-box">
-                <pre class="brush: clojure">(ns my.library)</pre>
+                <pre class="brush: clojure">;; ClojureScript has support for
+;; libraries, and they are in namespaces.
+(ns my.library)</pre>
             </div>
         </div>
     </div>
@@ -74,7 +82,9 @@ <h4>Define a library</h4>
         <h4>Use a library</h4>
         <div class="cheat-box-container eight columns">
             <div class="cheat-box">
-                <pre class="brush: js">// No native implementation</pre>
+                <pre class="brush: js">// No native implementation pre-ES6.
+// In ES6, there is the following syntax:
+import other, * as namespace from "other-library.js";</pre>
             </div>
         </div>
 
@@ -145,7 +155,17 @@ <h4>Hoisting</h4>
 }
 
 printName();
-// Hello, undefined</pre>
+// Hello, undefined
+
+// Note: ES6 `let` and `const` do not hoist.
+
+function printName() {
+  console.log('Hello, ' + name);
+  var name = 'Bob';
+}
+
+printName();
+// ReferenceError: name is not defined</pre>
             </div>
         </div>
 
@@ -167,8 +187,8 @@ <h4>Destructuring bind</h4>
         <div class="cheat-box-container eight columns">
             <div class="cheat-box">
                 <pre class="brush: js">
-// No native implementation, must pull
-// aparts objects and arrays manually
+// No native implementation pre-ES6, must
+// pull aparts objects and arrays manually
 
 var o = {first: "Bob",
          middle: "J",
@@ -183,7 +203,18 @@ <h4>Destructuring bind</h4>
 var red = color[0];
 var green = color[1];
 var alpha = color[3];
-...</pre>
+...
+
+// In ES6:
+var o = {first: "Bob",
+         middle: "J",
+         last: "Smith"};
+
+var {first, middle, last} = o;
+
+var color = [255, 255, 100, 0.5];
+var [red, green, , alpha] = color;
+</pre>
             </div>
         </div>
 
@@ -527,7 +558,13 @@ <h4>Arbitrary Keys</h4>
 var m = {
   "foo": 1,
   "bar": 2
-};</pre>
+};
+
+// Note: in ES6, there is a mutable Map
+// class that supports arbitrary keys, but
+// there is no syntactic support.
+let m = new Map();
+m.add([1, 2], 3);</pre>
             </div>
         </div>
 
@@ -605,7 +642,7 @@ <h4>Cloning</h4>
             <div class="cheat-box">
                             <pre class="brush: js">
 var a = [...];
-foo(a.slice(0));
+foo(a.slice());
 
 // if foo might mutate a, must clone,
 // however this is only a shallow copy
@@ -641,7 +678,9 @@ <h4>Equality</h4>
 
 // == tests identity
 // must implement your own deep
-// equality test for all types</pre>
+// equality test for all types
+// https://npm.im/deep-equal is
+// frequently used for this.</pre>
             </div>
         </div>
 
@@ -899,14 +938,18 @@ <h4>Variable arguments</h4>
         <div class="cheat-box-container eight columns">
             <div class="cheat-box">
                             <pre class="brush: js">
-// No native implementation. Manipulate arguments
+// No native implementation pre-ES6. Manipulate arguments
 // object explicitly. Performance implications.
 
 function foo() {
   var args = arguments;
   ...
 }
-</pre>
+
+// In ES6, this is the syntax:
+function foo(...args) {
+  ...
+}</pre>
             </div>
         </div>
 
@@ -944,7 +987,12 @@ <h4>Named Parameters & Defaults</h4>
       baz = o.baz || "default2";
   ...
 }
-</pre>
+
+// Note: in ES6, there is object destructuring
+// in arguments to assist with this.
+function foo({bar = "default1", baz = "default2"} = {}) {
+  ...
+}</pre>
             </div>
         </div>
 
@@ -971,7 +1019,7 @@ <h4>Uniform Iteration For All Types</h4>
         <div class="cheat-box-container eight columns">
             <div class="cheat-box">
                             <pre class="brush: js">
-// JavaScript does not have uniform iteration
+// JavaScript pre-ES6 does not have uniform iteration
 // over native types.
 
 var colors = ['red', 'orange', 'green'];
@@ -986,7 +1034,19 @@ <h4>Uniform Iteration For All Types</h4>
   console.log('key', key);
   console.log('value', data[key]);
 }
-</pre>
+
+// In ES6, there is the following syntax
+// for iterables only (arrays, etc.):
+let colors = ['red', 'orange', 'green']
+
+for (let color of colors) {
+  console.log(color);
+}
+
+for (let key of Object.keys(data)) {
+  console.log('key', key);
+  console.log('value', data[key]);
+}</pre>
             </div>
         </div>
 
@@ -1149,7 +1209,17 @@ <h4>Define</h4>
 Person.prototype.greet = function() {
   return "Hello, " + this.name;
 }
-</pre>
+
+// In ES6, there is a class syntax:
+class Person {
+  constructor(name) {
+    this.name = name;
+  }
+
+  greet() {
+    return `Hello, ${this.name}`;
+  }
+}</pre>
             </div>
         </div>