shri3k · March 4, 2017 01:18 · Nov 25, 2016 · Nov 8, 2016 · Nov 8, 2016 · Nov 8, 2016
diff --git a/destructuring.js b/destructuring.js
@@ -205,15 +205,17 @@ console.log(names);
 // => [ 'Name1', 'Name2', 'Name2', 'Name3' ]
 
 
-// Advanced usage with Array Comprehension and default values
+// Usage in for..of loops
 var users = [
   { user: "Name1" },
   { user: "Name2", age: 2 },
   { user: "Name2" },
   { user: "Name3", age: 4 }
 ];
 
-[for ({ user, age = "DEFAULT AGE" } of users) console.log(user, age)];
+for (let { user, age = "DEFAULT AGE" } of users) {
+  console.log(user, age);
+}
 // => Name1 DEFAULT AGE
 // => Name2 2
 // => Name2 DEFAULT AGE

diff --git a/destructuring.js b/destructuring.js
@@ -174,10 +174,7 @@ ajax();
 //  => Uncaught TypeError: Cannot match against 'undefined' or 'null'
 
 // To fix this we need to have default value for parameter in function
-var ajax = ({ url: url = "localhost", port: p = 80} = {}) => {
-  console.log("Url:", url, "Port:", p);
-};
-
+// Note: See the `= {}` at the end, saying default empty object if the first argument is undefined.
 var ajax = ({ url: url = "localhost", port: p = 80} = {}) => {
   console.log("Url:", url, "Port:", p);
 };

diff --git a/destructuring.js b/destructuring.js
@@ -166,19 +166,34 @@ ajax({ url: "someHost" }, "additional", "data", "hello");
 ajax({ }, "additional", "data", "hello");
 // => Url: localhost Port: 80 Rest: [ 'additional', 'data', 'hello' ]
 
+ajax({ });
+// => Url: localhost Port: 80 Rest: []
 
-// Ooops: Doesn't work (in traceur)
-var ajax = ({ url = "localhost", port: p = 80}, ...data) => {
-  console.log("Url:", url, "Port:", p, "Rest:", data);
+// Doesn't work due to trying to destructure undefined
+ajax();
+//  => Uncaught TypeError: Cannot match against 'undefined' or 'null'
+
+// To fix this we need to have default value for parameter in function
+var ajax = ({ url: url = "localhost", port: p = 80} = {}) => {
+  console.log("Url:", url, "Port:", p);
 };
-ajax({ }, "additional", "data", "hello");
-// probably due to traceur compiler
 
-// But this does:
-var ajax = ({ url: url = "localhost", port: p = 80}, ...data) => {
-  console.log("Url:", url, "Port:", p, "Rest:", data);
+var ajax = ({ url: url = "localhost", port: p = 80} = {}) => {
+  console.log("Url:", url, "Port:", p);
 };
-ajax({ }, "additional", "data", "hello");
+
+// Now this works.
+ajax();
+// => Url: localhost Port: 80
+
+ajax({ });
+// => Url: localhost Port: 80
+
+ajax({ port: 8080 });
+//  => Url: localhost Port: 8080
+
+ajax({ url: "someHost", port: 8080 });
+//  => Url: someHost Port: 8080
 
 
 // Like _.pluck

diff --git a/destructuring.js b/destructuring.js
@@ -174,7 +174,7 @@ var ajax = ({ url = "localhost", port: p = 80}, ...data) => {
 ajax({ }, "additional", "data", "hello");
 // probably due to traceur compiler
 
-But this does:
+// But this does:
 var ajax = ({ url: url = "localhost", port: p = 80}, ...data) => {
   console.log("Url:", url, "Port:", p, "Rest:", data);
 };

diff --git a/destructuring.js b/destructuring.js
@@ -6,9 +6,7 @@ console.log(a, b);
 
 
 // Use from functions, only select from pattern
-var foo = () => {
-  return [1, 2, 3];
-};
+var foo = () => [1, 2, 3];
 
 var [a, b] = foo();
 console.log(a, b);

diff --git a/destructuring.js b/destructuring.js
@@ -153,7 +153,7 @@ const name = 'fieldName';
 const computedObject = { [name]: name }; // (where object is { 'fieldName': 'fieldName' })
 const { [name]: nameValue } = computedObject;
 console.log(nameValue)
-// => value
+// => fieldName
 
 
 

diff --git a/destructuring.js b/destructuring.js
@@ -148,10 +148,10 @@ foo({ prop: "Hello", prop2: { prop2: { nested: ["a", "b", "c"]}}});
 
 // In combination with other ES2015 features.
 
-// Variable object properties
+// Computed property names
 const name = 'fieldName';
-const variabledPropertyNameObject = { [name]: name }; // (where object is { 'fieldName': 'fieldName' })
-const { [name]: nameValue } = variabledPropertyNameObject;
+const computedObject = { [name]: name }; // (where object is { 'fieldName': 'fieldName' })
+const { [name]: nameValue } = computedObject;
 console.log(nameValue)
 // => value
 

diff --git a/destructuring.js b/destructuring.js
@@ -151,7 +151,7 @@ foo({ prop: "Hello", prop2: { prop2: { nested: ["a", "b", "c"]}}});
 // Variable object properties
 const name = 'fieldName';
 const variabledPropertyNameObject = { [name]: name }; // (where object is { 'fieldName': 'fieldName' })
-const {[name]: nameValue} = variabledPropertyNameObject;
+const { [name]: nameValue } = variabledPropertyNameObject;
 console.log(nameValue)
 // => value
 

diff --git a/destructuring.js b/destructuring.js
@@ -146,7 +146,18 @@ foo({ prop: "Hello", prop2: { prop2: { nested: ["a", "b", "c"]}}});
 // => Hello a b c
 
 
-// Combine with other ES6 features.
+// In combination with other ES2015 features.
+
+// Variable object properties
+const name = 'fieldName';
+const variabledPropertyNameObject = { [name]: name }; // (where object is { 'fieldName': 'fieldName' })
+const {[name]: nameValue} = variabledPropertyNameObject;
+console.log(nameValue)
+// => value
+
+
+
+// Rest and defaults
 var ajax = function ({ url = "localhost", port: p = 80}, ...data) {
   console.log("Url:", url, "Port:", p, "Rest:", data);
 };

diff --git a/destructuring.js b/destructuring.js
@@ -15,13 +15,13 @@ console.log(a, b);
 // => 1 2
 
 
-// Ommit surten values
+// Omit certain values
 var [a, , b] = [1, 2, 3];
 console.log(a, b);
 // => 1 3
 
 
-// Combine with rest (accumulates the rest values)
+// Combine with spread/rest operator (accumulates the rest of the values)
 var [a, ...b] = [1, 2, 3];
 console.log(a, b);
 // => 1 [ 2, 3 ]
@@ -78,14 +78,14 @@ console.log(prop, prop2);
 var a, b;
 { a, b } = {a: 1, b: 2};
 
-// But this do work
+// But this does work
 var a, b;
 ({ a, b } = {a: 1, b: 2});
 console.log(a, b);
 // => 1 2
 
 // This due to the grammar in JS. 
-// Starting with { implies a block, not an object literal. 
+// Starting with { implies a block scope, not an object literal. 
 // () converts to an expression.
 
 // From Harmony Wiki:
@@ -98,7 +98,7 @@ console.log(a, b);
 
 
 
-// Combine objects an arrays
+// Combine objects and arrays
 var {prop: x, prop2: [, y]} = {prop: 5, prop2: [10, 100]};
 console.log(x, y);
 // => 5 100
@@ -196,4 +196,4 @@ var users = [
 // => Name1 DEFAULT AGE
 // => Name2 2
 // => Name2 DEFAULT AGE
-// => Name3 4
+// => Name3 4
diff --git a/destructuring.js b/destructuring.js
@@ -84,7 +84,17 @@ var a, b;
 console.log(a, b);
 // => 1 2
 
-// This due to the grammar in JS. () converts to an expression.
+// This due to the grammar in JS. 
+// Starting with { implies a block, not an object literal. 
+// () converts to an expression.
+
+// From Harmony Wiki:
+// Note that object literals cannot appear in
+// statement positions, so a plain object
+// destructuring assignment statement
+//  { x } = y must be parenthesized either
+// as ({ x } = y) or ({ x }) = y.
+
 
 
 
@@ -148,11 +158,12 @@ ajax({ }, "additional", "data", "hello");
 // => Url: localhost Port: 80 Rest: [ 'additional', 'data', 'hello' ]
 
 
-// Ooops: Doesn't work
+// Ooops: Doesn't work (in traceur)
 var ajax = ({ url = "localhost", port: p = 80}, ...data) => {
   console.log("Url:", url, "Port:", p, "Rest:", data);
 };
 ajax({ }, "additional", "data", "hello");
+// probably due to traceur compiler
 
 But this does:
 var ajax = ({ url: url = "localhost", port: p = 80}, ...data) => {

diff --git a/destructuring.js b/destructuring.js
@@ -64,12 +64,21 @@ var {prop: x, prop2: y} = {prop: 5, prop2: 10};
 console.log(x, y);
 // => 5 10
 
+// Short-hand syntax
+var { prop, prop2} = {prop: 5, prop2: 10};
+console.log(prop, prop2);
+// => 5 10
+
+// Equal to:
+var { prop: prop, prop2: prop2} = {prop: 5, prop2: 10};
+console.log(prop, prop2);
+// => 5 10
 
 // Oops: This doesn't work:
 var a, b;
 { a, b } = {a: 1, b: 2};
 
-// Works:
+// But this do work
 var a, b;
 ({ a, b } = {a: 1, b: 2});
 console.log(a, b);
@@ -78,16 +87,6 @@ console.log(a, b);
 // This due to the grammar in JS. () converts to an expression.
 
 
-// Short-hand syntax
-var { prop, prop2} = {prop: 5, prop2: 10};
-console.log(prop, prop2);
-// => 5 10
-
-// Equal to:
-var { prop: prop, prop2: prop2} = {prop: 5, prop2: 10};
-console.log(prop, prop2);
-=> 5 10
-
 
 // Combine objects an arrays
 var {prop: x, prop2: [, y]} = {prop: 5, prop2: [10, 100]};

diff --git a/destructuring.js b/destructuring.js
@@ -108,7 +108,7 @@ console.log(x, b);
 // => Hello c
 
 
-=== Combining all to make fun happen
+// === Combining all to make fun happen
 
 // All well and good, can we do more? Yes!
 // Using as method parameters

diff --git a/destructuring.js b/destructuring.js
@@ -5,7 +5,7 @@ console.log(a, b);
 //=> 1 2
 
 
-Use from functions, only select from pattern
+// Use from functions, only select from pattern
 var foo = () => {
   return [1, 2, 3];
 };

diff --git a/destructuring.js b/destructuring.js
@@ -149,7 +149,7 @@ ajax({ }, "additional", "data", "hello");
 // => Url: localhost Port: 80 Rest: [ 'additional', 'data', 'hello' ]
 
 
-Ooops: Doesn't work
+// Ooops: Doesn't work
 var ajax = ({ url = "localhost", port: p = 80}, ...data) => {
   console.log("Url:", url, "Port:", p, "Rest:", data);
 };

diff --git a/destructuring.js b/destructuring.js
@@ -2,68 +2,97 @@
 
 var [a, b] = [1, 2];
 console.log(a, b);
+//=> 1 2
 
-var foo = function () {
+
+Use from functions, only select from pattern
+var foo = () => {
   return [1, 2, 3];
 };
 
 var [a, b] = foo();
 console.log(a, b);
+// => 1 2
 
 
-var foo = () => {
-  return [1, 2, 3];
-};
-
-var [a, , b] = foo();
+// Ommit surten values
+var [a, , b] = [1, 2, 3];
 console.log(a, b);
+// => 1 3
 
 
+// Combine with rest (accumulates the rest values)
 var [a, ...b] = [1, 2, 3];
 console.log(a, b);
+// => 1 [ 2, 3 ]
 
 
+// Fail-safe.
 var [, , , a, b] = [1, 2, 3];
 console.log(a, b);
+// => undefined undefined
 
 
-// Swap variables
+// Swap variables easily without temp
 var a = 1, b = 2;
 [b, a] = [a, b];
 console.log(a, b);
-
+// => 2 1
 
 
 // Advance deep arrays
 var [a, [b, [c, d]]] = [1, [2, [[[3, 4], 5], 6]]];
 console.log("a:", a, "b:", b, "c:", c, "d:", d);
+// => a: 1 b: 2 c: [ [ 3, 4 ], 5 ] d: 6
 
 
 // === Objects
 
 var {user: x} = {user: 5};
 console.log(x);
+// => 5
 
 
+// Fail-safe
 var {user: x} = {user2: 5};
 console.log(x);
+// => undefined
 
 
+// More values
 var {prop: x, prop2: y} = {prop: 5, prop2: 10};
 console.log(x, y);
+// => 5 10
+
+
+// Oops: This doesn't work:
+var a, b;
+{ a, b } = {a: 1, b: 2};
+
+// Works:
+var a, b;
+({ a, b } = {a: 1, b: 2});
+console.log(a, b);
+// => 1 2
+
+// This due to the grammar in JS. () converts to an expression.
+
 
-// Short-hand
+// Short-hand syntax
 var { prop, prop2} = {prop: 5, prop2: 10};
 console.log(prop, prop2);
+// => 5 10
 
 // Equal to:
 var { prop: prop, prop2: prop2} = {prop: 5, prop2: 10};
 console.log(prop, prop2);
+=> 5 10
 
 
 // Combine objects an arrays
 var {prop: x, prop2: [, y]} = {prop: 5, prop2: [10, 100]};
 console.log(x, y);
+// => 5 100
 
 
 // Deep objects
@@ -76,8 +105,11 @@ var {
   }
 } = { prop: "Hello", prop2: { prop2: { nested: ["a", "b", "c"]}}};
 console.log(x, b);
+// => Hello c
 
 
+=== Combining all to make fun happen
+
 // All well and good, can we do more? Yes!
 // Using as method parameters
 var foo = function ({prop: x}) {
@@ -86,10 +118,11 @@ var foo = function ({prop: x}) {
 
 foo({invalid: 1});
 foo({prop: 1});
+// => undefined
+// => 1
 
 
-// Can also use with the advance example
-
+// Can also use with the advanced example
 var foo = function ({
   prop: x,
   prop2: {
@@ -101,17 +134,32 @@ var foo = function ({
   console.log(x, ...b);
 };
 foo({ prop: "Hello", prop2: { prop2: { nested: ["a", "b", "c"]}}});
-
+// => Hello a b c
 
 
 // Combine with other ES6 features.
+var ajax = function ({ url = "localhost", port: p = 80}, ...data) {
+  console.log("Url:", url, "Port:", p, "Rest:", data);
+};
+
+ajax({ url: "someHost" }, "additional", "data", "hello");
+// => Url: someHost Port: 80 Rest: [ 'additional', 'data', 'hello' ]
+
+ajax({ }, "additional", "data", "hello");
+// => Url: localhost Port: 80 Rest: [ 'additional', 'data', 'hello' ]
+
+
+Ooops: Doesn't work
 var ajax = ({ url = "localhost", port: p = 80}, ...data) => {
   console.log("Url:", url, "Port:", p, "Rest:", data);
 };
+ajax({ }, "additional", "data", "hello");
 
-ajax({
-  url: "someHost"
-}, "additional", "data", "hello");
+But this does:
+var ajax = ({ url: url = "localhost", port: p = 80}, ...data) => {
+  console.log("Url:", url, "Port:", p, "Rest:", data);
+};
+ajax({ }, "additional", "data", "hello");
 
 
 // Like _.pluck
@@ -121,9 +169,9 @@ var users = [
   { user: "Name2" },
   { user: "Name3" }
 ];
-
 var names = users.map( ({ user }) => user );
 console.log(names);
+// => [ 'Name1', 'Name2', 'Name2', 'Name3' ]
 
 
 // Advanced usage with Array Comprehension and default values
@@ -135,4 +183,7 @@ var users = [
 ];
 
 [for ({ user, age = "DEFAULT AGE" } of users) console.log(user, age)];
-
+// => Name1 DEFAULT AGE
+// => Name2 2
+// => Name2 DEFAULT AGE
+// => Name3 4
diff --git a/destructuring.js b/destructuring.js
@@ -0,0 +1,138 @@
+// === Arrays
+
+var [a, b] = [1, 2];
+console.log(a, b);
+
+var foo = function () {
+  return [1, 2, 3];
+};
+
+var [a, b] = foo();
+console.log(a, b);
+
+
+var foo = () => {
+  return [1, 2, 3];
+};
+
+var [a, , b] = foo();
+console.log(a, b);
+
+
+var [a, ...b] = [1, 2, 3];
+console.log(a, b);
+
+
+var [, , , a, b] = [1, 2, 3];
+console.log(a, b);
+
+
+// Swap variables
+var a = 1, b = 2;
+[b, a] = [a, b];
+console.log(a, b);
+
+
+
+// Advance deep arrays
+var [a, [b, [c, d]]] = [1, [2, [[[3, 4], 5], 6]]];
+console.log("a:", a, "b:", b, "c:", c, "d:", d);
+
+
+// === Objects
+
+var {user: x} = {user: 5};
+console.log(x);
+
+
+var {user: x} = {user2: 5};
+console.log(x);
+
+
+var {prop: x, prop2: y} = {prop: 5, prop2: 10};
+console.log(x, y);
+
+// Short-hand
+var { prop, prop2} = {prop: 5, prop2: 10};
+console.log(prop, prop2);
+
+// Equal to:
+var { prop: prop, prop2: prop2} = {prop: 5, prop2: 10};
+console.log(prop, prop2);
+
+
+// Combine objects an arrays
+var {prop: x, prop2: [, y]} = {prop: 5, prop2: [10, 100]};
+console.log(x, y);
+
+
+// Deep objects
+var {
+  prop: x,
+  prop2: {
+    prop2: {
+      nested: [ , , b]
+    }
+  }
+} = { prop: "Hello", prop2: { prop2: { nested: ["a", "b", "c"]}}};
+console.log(x, b);
+
+
+// All well and good, can we do more? Yes!
+// Using as method parameters
+var foo = function ({prop: x}) {
+  console.log(x);
+};
+
+foo({invalid: 1});
+foo({prop: 1});
+
+
+// Can also use with the advance example
+
+var foo = function ({
+  prop: x,
+  prop2: {
+    prop2: {
+      nested: b
+    }
+  }
+}) {
+  console.log(x, ...b);
+};
+foo({ prop: "Hello", prop2: { prop2: { nested: ["a", "b", "c"]}}});
+
+
+
+// Combine with other ES6 features.
+var ajax = ({ url = "localhost", port: p = 80}, ...data) => {
+  console.log("Url:", url, "Port:", p, "Rest:", data);
+};
+
+ajax({
+  url: "someHost"
+}, "additional", "data", "hello");
+
+
+// Like _.pluck
+var users = [
+  { user: "Name1" },
+  { user: "Name2" },
+  { user: "Name2" },
+  { user: "Name3" }
+];
+
+var names = users.map( ({ user }) => user );
+console.log(names);
+
+
+// Advanced usage with Array Comprehension and default values
+var users = [
+  { user: "Name1" },
+  { user: "Name2", age: 2 },
+  { user: "Name2" },
+  { user: "Name3", age: 4 }
+];
+
+[for ({ user, age = "DEFAULT AGE" } of users) console.log(user, age)];
+