c = console RET = '\n' TAB = '\t' #SRC http://exploringjs.com/es6/ch_destructuring.html c.log "Chapter 10"+RET c.log TAB+".1.1 Object destructuring" obj = first: 'Jane' last: 'Doe' #`const obj = { first: 'Jane', last: 'Doe' }` #`const {first: f, last: l} = obj` {first: f, last: l} = obj c.log TAB+"f,l =",f,l {first, last} = obj c.log TAB+"first,last =",first,last c.log TAB+".1.2 Array destructuring" #`const iterable = ['a', 'b']` #`const [x, y] = iterable` iterable = ['a', 'b'] [x,y] = iterable c.log TAB+"x,y =",x,y c.log "10.1.3 Where can destructuring be used?"+RET # `var [x] = ['a'];` [x] = ['a'] c.log TAB+"x =",x #`const arr2 = [ # {name: 'Jane', age: 41}, # {name: 'John', age: 40}, #]` #`for (const {name, age} of arr2) { # console.log(name, age)` arr2 = [ name: 'Jane' age: 41 , name: 'John' age: 40 ] for {name,age} in arr2 c.log TAB+"for-loop :: name,age =",name,age c.log "10.3 Patterns" + RET #`const obj = { a: [{ foo: 123, bar: 'abc' }, {}], b: true }' #`const { a: [{foo: f}] } = obj //f = 123` obj = { a: [{ foo: 123, bar: 'abc' }, {}], b: true } { a: [{foo: f}] } = obj c.log TAB+"f =", f c.log "10.3.1 Pick what you need" + RET # `const { x: x } = { x: 7, y: 3 }; // x = 7` { x: x } = { x: 7, y: 3 } c.log TAB+"x =",x c.log "10.4.1 Object patterns coerce values to objects" + RET #`const {length : len} = 'abc'; // len = 3` {length : len} = 'abc' c.log TAB+"len =", len #`const {toString: s} = 123; // s = Number.prototype.toString` {toString: s} = 123 c.log TAB+"s =", s c.log "10.4.1.1 Failing to object-destructure a value"+RET obj = {} c.log TAB+"Object(obj) === obj", Object(obj) == obj # true c.log TAB+"Object(undefined)", Object(undefined) # {} c.log TAB+"Object(null)", Object(null) # {} #`const { prop: x } = undefined; // TypeError` #`const { prop: y } = null; // TypeError` try { prop: x } = undefined catch err c.log TAB+"TypeError ?", err try { prop: y } = null catch err c.log TAB+"TypeError ?", err c.log "10.4.2 Array patterns work with iterables"+RET # strings #`const [x,...y] = 'abc'; // x='a'; y=['b', 'c']` [x, y...] = 'abc' c.warn TAB+"x,y =",x,y #`const [x,y,z] = 'a\uD83D\uDCA9c'; // x='a'; y='\uD83D\uDCA9'; z='c'` [x,y,z] = 'a\uD83D\uDCA9c' c.warn TAB+"x,y,z =",x,y,z # `const [x,y] = new Set(['a', 'b']); // x='a'; y='b’;` s = new Set(['a', 'b']) [x,y] = s c.error "10.4.2 Set x,y=",x,y [x,y] = Array.from s c.warn "10.4.2 Set (ok with me)", x,y `function* allNaturalNumbers() { for (let n = 0; ; n++) { yield n; } }` #`const [x1, y1, z1] = allNaturalNumbers(); // x=0; y=1; z=2` #c.log "10.4.2 native ES6 x1,y1,z1=",x1,y1,z1 [x, y, z] = allNaturalNumbers() c.warn TAB+"CS & ES6-Iterator-Fn x,y,z=",x,y,z cs_allNatural = -> n=0 while true yield n n++ [x, y, z] = cs_allNatural() c.warn TAB+"CS+Iterator & CS-Iterator-Fn x,y,z=",x,y,z c.log "10.5 If a part has no match"+RET #`const [x] = []; // x = undefined` #`const {prop:y} = {}; // y = undefined` [x] = [] c.log TAB+"x =",x {prop: y} = {} c.log TAB+"y =",y c.log "10.5.1 Default values"+RET # `const [x=3, y] = []; // x = 3; y = undefined` [x=3, y] = [] c.log TAB+"x,y =",x,y #`const [x=1] = [undefined]` [x=1] = [undefined] c.log TAB+"x =",x #`const {prop: y=2} = {prop: undefined}; // y = 2` {prop: y=2} = {prop: undefined} c.log TAB+"y =",y c.log "10.5.1.3 Default values can refer to other variables in the pattern"+RET #`const [x=3, y=x] = []; // x=3; y=3` [x=3, y=x] = [] c.log TAB+"x,y =",x,y #`const [x=3, y=x] = [7, 2]; // x=7; y=2` [x=3, y=x] = [7, 2] c.log TAB+"x,y =",x,y #`const [x=y, y=3] = []; // ReferenceError` try [xx=y, yx=3] = [] c.warn TAB+"xx,yx =",xx,yx, "!? should throw" catch err c.log TAB+"RefError ?",err c.log TAB+"more complex"+RET #`const { prop: x } = { prop: 123 }; // x = 123` { prop: x } = { prop: 123 } c.log TAB+TAB+"x =",x #`const { prop: x=123 } = {}; // x = 123` { prop: x=123 } = {} c.log TAB+TAB+"x =",x c.log "10.6.2 Computed property keys"+RET FOO = 'foo' #`const { [FOO]: a } = { foo: 123 }; // f = 123` c.error TAB+"{ [FOO]: a } = { foo: 123 } | fails by syntax." #c.log TAB+"a =",a c.log "10.7 More Array destructuring features"+RET c.log TAB+".1 Elision" `[,, x, y] = ['a', 'b', 'c', 'd']; // x = 'c'; y = 'd'` # [,, x, y] = ['a', 'b', 'c', 'd'] c.error TAB+"x,y =",x,y, " | fails on syntax." [..., x, y] = ['a', 'b', 'c', 'd'] c.log TAB+"x,y =",x,y, " [...,x,y] works around." c.log "10.7.2 Rest operator (...)"+RET #`const [x, ...y] = ['a', 'b', 'c']; // x='a'; y=['b', 'c']` [x, y...] = ['a', 'b', 'c'] c.warn TAB+"x,y =",x,y, "similar to 10.4.2 - be careful here" #`const [x, y, ...z] = ['a']; // x='a'; y=undefined; z=[]` [x, y, z...] = ['a'] c.warn TAB+"x,y,z =",x,y,z, "see 10.4.2 - works with minimal change" c.log "10.8 You can assign to more than just variables"+RET obj = {} arr = [] #`({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });` ({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true }) c.log TAB+"obj %o, arr %o",obj,arr c.log TAB+"using the REST-operator" obj = {} #`[first, ...obj.prop] = ['a', 'b', 'c']; // first = 'a'; obj.prop = ['b', 'c']` [first, obj.prop...] = ['a', 'b', 'c'] c.warn TAB+TAB+"first, obj.prop ",first, obj.prop, " | again minor change in CS"