diff --git a/notes/chap3_types_values_and_variables.md b/notes/chap3_types_values_and_variables.md index 1254a0d..edbb402 100644 --- a/notes/chap3_types_values_and_variables.md +++ b/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 \ No newline at end of file +### 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 +``` \ No newline at end of file