|
1 | 1 | # You Don't Know JS Yet: Objects & Classes - 2nd Edition
|
2 |
| -# Chapter 1: TODO |
| 2 | +# Chapter 1: Object Foundations |
3 | 3 |
|
4 | 4 | | NOTE: |
|
5 | 5 | | :--- |
|
@@ -27,12 +27,87 @@ It's quite an understatement to say a lot has changed in the JS landscape in the
|
27 | 27 |
|
28 | 28 | Now, we still need to talk about how `this` works, and how that relates to methods invoked against various objects. And `class` actually operates (mostly!) via the prototype chain deep under the covers. But JS developers in 2022 are almost never writing code to explicitly wire up prototypal inheritance anymore. And as much as I personally wish differently, class design patterns -- not "behavior delegation" -- are how the majority of data and behavior organization (data structures) in JS are expressed.
|
29 | 29 |
|
30 |
| -This book reflects JS's current reality; thus the new sub-title, new focus and organization of topics, and complete re-write of the previous edition's text. |
| 30 | +This book reflects JS's current reality: thus the new sub-title, new organization and focus of topics, and complete re-write of the previous edition's text. |
31 | 31 |
|
| 32 | +## Objects As Containers |
32 | 33 |
|
| 34 | +One common way of wrapping up multiple values in a single container is with an object. Objects are collections of key/value pairs. There are also sub-types of object in JS with specialized behaviors, such as arrays and even functions; more on these later. |
33 | 35 |
|
34 |
| -// SUMMARY TODO: |
| 36 | +Regular objects in JS are typically declared with literal syntax, like this: |
| 37 | + |
| 38 | +```js |
| 39 | +myObj = { |
| 40 | + // .. |
| 41 | +}; |
| 42 | +``` |
| 43 | + |
| 44 | +**Note:** There's an alternate way to create an object (using `myObj = new Object()`), but this is not common or preferred, and is almost never the appropriate way to go about it. Stick with object literal syntax. |
| 45 | + |
| 46 | +Inside the object, you associate one or more values with named locations (aka, "keys", "properties"), like this: |
| 47 | + |
| 48 | +```js |
| 49 | +myObj = { |
| 50 | + favoriteNumber: 42, |
| 51 | + isDeveloper: true, |
| 52 | + firstName: "Kyle" |
| 53 | +}; |
| 54 | +``` |
| 55 | + |
| 56 | +You may notice that this syntax resembles a related syntax called "JSON" (JavaScript Object Notation): |
| 57 | + |
| 58 | +```json |
| 59 | +{ |
| 60 | + "favoriteNumber": 42, |
| 61 | + "isDeveloper": true, |
| 62 | + "firstName": "Kyle" |
| 63 | +} |
| 64 | +``` |
| 65 | + |
| 66 | +In JSON, the property names must be quoted with `"` double-quote characters. |
| 67 | + |
| 68 | +However, in JS programs, an object literal does not require quoted property names -- you *can* quote them (`'` or `"` delimited), but it's usually optional. There are however characters that are valid in a property name which cannot be included without surrounding quotes, such as leading numbers or whitespace: |
| 69 | + |
| 70 | +```js |
| 71 | +myObj = { |
| 72 | + favoriteNumber: 42, |
| 73 | + isDeveloper: true, |
| 74 | + firstName: "Kyle", |
| 75 | + "2 nicknames": [ "getify", "ydkjs" ] |
| 76 | +}; |
| 77 | +``` |
| 78 | + |
| 79 | +Property names in object literals are always treated as string values, with the exception of numeric property "names": |
| 80 | + |
| 81 | +```js |
| 82 | +anotherObj = { |
| 83 | + 42: "<-- this property name will remain a number", |
| 84 | + true: "<-- this property name will be converted to a string", |
| 85 | + myObj: "<-- ...and so will this one" |
| 86 | +}; |
| 87 | +``` |
| 88 | + |
| 89 | +The `42` property name will remain a number, whereas the `true` property name as shown will become the string `"true"`, and the `myObj` property name will coerce the object to a string, generally the default `"[object Object]"`. |
| 90 | + |
| 91 | +Property access can be done with the `.` operator or the `[ .. ]` brackets. Generally, the `.` operator is preferred, unless the property name contains characters that must be quoted, in which case the `[ .. ]` is required. |
| 92 | + |
| 93 | +```js |
| 94 | +myObj.favoriteNumber; // 42 |
| 95 | +myObj.isDeveloper; // true |
| 96 | + |
| 97 | +myObj["2 nicknames"]; // [ "getify", "ydkjs" ] |
| 98 | + |
| 99 | +anotherObj[42]; // "<-- this property name will..." |
| 100 | +anotherObj["42"]; // "<-- this property name will..." |
| 101 | +``` |
| 102 | + |
| 103 | +Notice that even though numeric property "names" remain as numbers, property access via the `[ .. ]` brackets will coerce a string representation of a number, like `"42"`, to the `42` numeric equivalent, and then access the associated property accordingly. |
| 104 | + |
| 105 | +// TODO |
| 106 | + |
| 107 | +## Objects Overview |
| 108 | + |
| 109 | +Objects are not just containers for multiple values |
35 | 110 |
|
36 | 111 | Prototypes are internal linkages between objects that allow property or method access against one object -- if the property/method requested is absent -- to be handled by "delegating" that access to another object. When the delegation involves a method, the context for the method to run in is shared from the initial object to the target object via the `this` keyword.
|
37 | 112 |
|
38 |
| -Prior to ES6, the prototype system was how developers expressed (i.e., emulated) the class design pattern in JS -- so-called "prototypal inheritance". ES6 introduced the `class` keyword as a syntactic affordance to embrace and centralize the prevalence of varied class design approaches. Ostensibly, `class` was introduced as "sugar" built on top of manual/explicit prototypal class |
| 113 | +Prior to ES6, the prototype system was how developers expressed (i.e., emulated) the class design pattern in JS -- so-called "prototypal inheritance". ES6 introduced the `class` keyword as a syntactic affordance to embrace and centralize the prevalence of varied class design approaches. Ostensibly, `class` was introduced as "sugar" built on top of manual/explicit prototypal classes. |
0 commit comments