Skip to content

Commit 6727bcc

Browse files
committed
objects-classes: more work on ch1
1 parent e5960d2 commit 6727bcc

File tree

2 files changed

+82
-6
lines changed

2 files changed

+82
-6
lines changed

objects-classes/ch1.md

Lines changed: 79 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# You Don't Know JS Yet: Objects & Classes - 2nd Edition
2-
# Chapter 1: TODO
2+
# Chapter 1: Object Foundations
33

44
| NOTE: |
55
| :--- |
@@ -27,12 +27,87 @@ It's quite an understatement to say a lot has changed in the JS landscape in the
2727

2828
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.
2929

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.
3131

32+
## Objects As Containers
3233

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.
3335

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
35110

36111
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.
37112

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.

objects-classes/toc.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88

99
* Foreword
1010
* Preface
11-
* Chapter 1: TODO
11+
* Chapter 1: Object Foundations
1212
* About This Book
13-
* TODO
13+
* Object As Containers
14+
* Objects Overview
1415
* Appendix A: TODO

0 commit comments

Comments
 (0)