Finished Chapter 3: type values and variables

notes/chap3_types_values_and_variables.md

@@ -1,5 +1,14 @@
 # Chapter 3. Types, Values, and Variables
 
+## 3.11 Summary
+
+Keypoints from this chapter:
+* How to write and manipulate numbers and strings of text in JavaScript.
+* How to work with JavaScript’s other primitive types: booleans, Symbols, null, and undefined.
+* The differences between immutable primitive types and mutable reference types.
+* How JavaScript converts values implicitly from one type to another and how you can do so explicitly in your programs.
+* How to declare and initialize constants and variables (including with destructuring assignment) and the lexical scope of the variables and constants you declare.
+
 ## 3.1 Overview and Definitions
 
 JS types has 2 categories of data types:
@@ -818,4 +827,103 @@ for(var i = 0; i < count; i++) console.log(data[i]);
 * variable decalred with `var`, its declaration is lifted up (**hosted**) to top of enclosing function
 * Refer to [Stack Overflow: What's the difference-between-using-let-and-var](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var)
 
-### 3.10.3 Destructuring Assignment
+### 3.10.3 Destructuring Assignment
+
+**Destructuring Assignment**:
+* Compound declaration and assignment syntax
+* value on RHS of `=` is an array or object (a "structured" value)
+* LHS specify variable names to mimic array/object.
+
+```js
+let [x,y] = [1,2];  // Same as let x=1, y=2
+[x,y] = [x+1,y+1];  // Same as x = x + 1, y = y + 1
+[x,y] = [y,x];      // Swap the value of the two variables
+[x,y]               // => [3,2]: the incremented and swapped values
+```
+
+Destructuring Assignment can catch return value (arrays) from function
+```js
+// Convert [x,y] coordinates to [r,theta] polar coordinates
+function toPolar(x, y) {
+    return [Math.sqrt(x*x+y*y), Math.atan2(y,x)];
+}
+
+// Convert polar to Cartesian coordinates
+function toCartesian(r, theta) {
+    return [r*Math.cos(theta), r*Math.sin(theta)];
+}
+
+let [r,theta] = toPolar(1.0, 1.0);  // r == Math.sqrt(2); theta == Math.PI/4
+let [x,y] = toCartesian(r,theta);   // [x, y] == [1.0, 1,0]
+```
+
+Use destructuring assignment to loop over name/value pairs
+```js
+let o = { x: 1, y: 2 }; // The object we'll loop over
+for(const [name, value] of Object.entries(o)) {
+    console.log(name, value); // Prints "x 1" and "y 2"
+}
+```
+
+#### Matching number of variables
+
+Number of variables on LHS no need to match number of array element RHS:
+* Use extra commas `,` to skip certain values
+```js
+let [x,y] = [1];     // x == 1; y == undefined
+[x,y] = [1,2,3];     // x == 1; y == 2
+[,x,,y] = [1,2,3,4]; // x == 2; y == 4
+```
+
+* Use three dots `...` before last variable name on LHS, to collect all unused or remaining values into a single variable:
+```js
+let [x, ...y] = [1,2,3,4];  // y == [2,3,4]
+```
+
+#### More general: iterable object on RHS
+
+Destructuring assignment do not need array, an **iterable object** is enough
+```js
+let [first, ...rest] = "Hello"; // first == "H"; rest == ["e","l","l","o"]
+```
+
+#### More general: object value on RHS
+
+Destructuring assignment can be performed when RHS is an object value.
+* Syntax on LHS: a comma-separated list of variable names within curly braces
+
+```js
+let transparent = {r: 0.0, g: 0.0, b: 0.0, a: 1.0}; // A RGBA color
+let {r, g, b} = transparent;  // r == 0.0; g == 0.0; b == 0.0
+```
+
+#### More general: destruct object into individual variables
+
+Using destructuring assignment to get individual properties from object
+```js
+// Same as const sin=Math.sin, cos=Math.cos, tan=Math.tan
+const {sin, cos, tan} = Math;
+```
+Note:
+* `Math` object has many properties.
+* Those that are not named are ignored.
+* If LHS included variable name which is not a property of `Math`, that variable will be `undefined`
+
+Name convention: 
+* not required to use variable names that match property names of the object.
+* Syntax: **colon-separated pairs of identifiers**
+  * 1st is the name of property whose value is to be assigned
+  * 2nd is the name of variable to assign to
+* This usage generate more complex
+```js
+// Same as const cosine = Math.cos, tangent = Math.tan;
+const { cos: cosine, tan: tangent } = Math;
+```
+
+### More general: nested objects
+
+```js
+let points = [{x: 1, y: 2}, {x: 3, y: 4}];     // An array of two point objects
+let [{x: x1, y: y1}, {x: x2, y: y2}] = points; // destructured into 4 variables.
+(x1 === 1 && y1 === 2 && x2 === 3 && y2 === 4) // => true
+```