Skip to content

Commit 79f3775

Browse files
committed
minor
1 parent bc9117e commit 79f3775

File tree

7 files changed

+89
-75
lines changed

7 files changed

+89
-75
lines changed

1-js/04-object-basics/03-symbol/article.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,4 @@ Other symbols will also become familiar when we study the corresponding language
233233
- Symbols created with `Symbol(name)` are always different, even if they have the same name. If we want same-named symbols to be equal, then we should use the global registry: `Symbol.for(name)` returns (creates if needed) a global symbol with the given name. Multiple calls return the same symbol.
234234
- There are system symbols used by JavaScript and accessible as `Symbol.*`. We can use them to alter some built-in behaviors.
235235

236-
Technically, symbols are not 100% hidden. There is a build-in method [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) that allows to get all symbols. Also there is a method named [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) that returns *all* keys of an object including symbolic ones. So they are not really hidden.
237-
238-
But most libraries, built-in methods and syntax constructs adhere to a common agreement that they are. And the one who explicitly calls the aforementioned methods probably understands well what he's doing.
236+
Technically, symbols are not 100% hidden. There is a build-in method [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) that allows to get all symbols. Also there is a method named [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) that returns *all* keys of an object including symbolic ones. So they are not really hidden. But most libraries, built-in methods and syntax constructs adhere to a common agreement that they are. And the one who explicitly calls the aforementioned methods probably understands well what he's doing.

1-js/04-object-basics/04-object-methods/article.md

Lines changed: 48 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ let user = {
99
};
1010
```
1111

12-
And, in the real world, a user can `act`: to select something from the shopping cart, to login, to logout etc.
12+
And, in the real world, a user can *act*: select something from the shopping cart, login, logout etc.
1313

14-
Let's implement the same in JavaScript using functions in properties.
14+
Actions are represented in JavaScript by functions in properties.
1515

1616
[cut]
1717

@@ -42,7 +42,7 @@ A function that is the property of an object is called its *method*.
4242

4343
So, here we've got a method `sayHi` of the object `user`.
4444

45-
Of course, we could use a Function Declaration to add a method:
45+
Of course, we could use a pre-declared function as a method, like this:
4646

4747
```js run
4848
let user = {
@@ -55,19 +55,17 @@ function sayHi() {
5555
alert("Hello!");
5656
};
5757

58-
// then add the method
58+
// then add as a method
5959
user.sayHi = sayHi;
6060
*/!*
6161

6262
user.sayHi(); // Hello!
6363
```
6464

65-
That would also work, but is longer. Also we get an "extra" function `sayHi` outside of the `user` object. Usually we don't want that.
66-
6765
```smart header="Object-oriented programming"
6866
When we write our code using objects to represent entities, that's called an [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), in short: "OOP".
6967
70-
OOP is a big thing, an interesting science of its own. How to choose the right entities? How to organize the interaction between them? That's architecture.
68+
OOP is a big thing, an interesting science of its own. How to choose the right entities? How to organize the interaction between them? That's architecture, and there are great books on that topic, like "Design Patterns: Elements of Reusable Object-Oriented Software" by E.Gamma, R.Helm, R.Johnson, J.Vissides or "Object-Oriented Analysis and Design with Applications" by G.Booch, and more. We'll scratch the surface of that topic later in the chapter <info:object-oriented-programming>.
7169
```
7270
### Method shorthand
7371

@@ -100,7 +98,7 @@ To say the truth, the notations are not fully identical. There are subtle differ
10098

10199
It's common that an object method needs to access the information stored in the object to do its job.
102100

103-
For instance, `user.sayHi()` may need to mention the name of the user.
101+
For instance, the code inside `user.sayHi()` may need the name of the `user`.
104102

105103
**To access the object, a method can use the `this` keyword.**
106104

@@ -115,7 +113,7 @@ let user = {
115113

116114
sayHi() {
117115
*!*
118-
alert( this.name ); // "this" means "this object"
116+
alert(this.name);
119117
*/!*
120118
}
121119

@@ -126,14 +124,20 @@ user.sayHi(); // John
126124

127125
Here during the execution of `user.sayHi()`, the value of `this` will be `user`.
128126

129-
Technically, it's also possible to access the object without `this`:
127+
Technically, it's also possible to access the object without `this`, by referencing it via the outer variable:
130128

131129
```js
132-
...
130+
let user = {
131+
name: "John",
132+
age: 30,
133+
133134
sayHi() {
134-
alert( *!*user.name*/!* );
135+
*!*
136+
alert(user.name); // "user" instead of "this"
137+
*/!*
135138
}
136-
...
139+
140+
};
137141
```
138142

139143
...But such code is unreliable. If we decide to copy `user` to another variable, e.g. `admin = user` and overwrite `user` with something else, then it will access the wrong object.
@@ -207,27 +211,29 @@ function sayHi() {
207211
alert(this);
208212
}
209213

210-
sayHi();
214+
sayHi(); // undefined
211215
```
212216

213217
In this case `this` is `undefined` in strict mode. If we try to access `this.name`, there will be an error.
214218

215-
In non-strict mode (if you forgot `use strict`) the value of `this` in such case will be the *global object* (`"window"` for browser, we'll study it later). This is just a historical thing that `"use strict"` fixes.
219+
In non-strict mode (if one forgets `use strict`) the value of `this` in such case will be the *global object* (`window` in a browser, we'll get to it later). This is a historical behavior that `"use strict"` fixes.
216220

217-
Please note that usually a call of a function using `this` without an object is not normal, but rather a programming mistake. If a function has `this`, then it is usually meant to be called in the context of an object.
221+
Please note that usually a call of a function that uses `this` without an object is not normal, but rather a programming mistake. If a function has `this`, then it is usually meant to be called in the context of an object.
218222

219223
```smart header="The consequences of unbound `this`"
220224
If you come from another programming languages, then you are probably used to an idea of a "bound `this`", where methods defined in an object always have `this` referencing that object.
221225

222-
The idea of unbound, run-time evaluated `this` has both pluses and minuses. From one side, a function can be reused for different objects. From the other side, greater flexibility opens a place for mistakes.
226+
In JavaScript `this` is "free", its value is evaluated at the call time and depends not on where the method was declared, but rather on what's the object "before dot".
223227

224-
Here we are not to judge whether this language design decision is good or bad. We will understand how to work with it, how to get benefits and evade problems.
228+
The concept of run-time evaluated `this` has both pluses and minuses. From one side, a function can be reused for different objects. From the other side, greater flexibility opens a place for mistakes.
229+
230+
Here our position is not to judge whether this language design decision is good or bad. We'll understand how to work with it, how to get benefits and evade problems.
225231
```
226232
227233
## Internals: Reference Type
228234
229235
```warn header="In-depth language feature"
230-
This section covers advanced topic that may interest those who want to know JavaScript better.
236+
This section covers an advanced topic, to understand certain edge-cases better.
231237
232238
If you want to go on faster, it can be skipped or postponed.
233239
```
@@ -249,20 +255,32 @@ user.hi(); // John (the simple call works)
249255
*/!*
250256
```
251257

252-
On the last line there is an intricate code that evaluates an expression to get the method. In this case the result is `user.hi`.
258+
On the last line there is a ternary operator that chooses either `user.hi` or `user.bye`. In this case the result is `user.hi`.
253259

254-
The method is immediately called with brackets `()`. But that doesn't work right. You can see that the call results in an error, cause the value of `"this"` inside the call becomes `undefined`.
260+
The method is immediately called with parentheses `()`. But it doesn't work right!
255261

256-
Actually, anything more complex than a simple `obj.method()` (or square brackets here) looses `this`.
262+
You can see that the call results in an error, cause the value of `"this"` inside the call becomes `undefined`.
257263

258-
If we want to understand why it happens -- let's get under the hood of how `obj.method()` call works.
264+
This works (object dot method):
265+
```js
266+
user.hi();
267+
```
268+
269+
This doesn't (evaluated method):
270+
```js
271+
(user.name == "John" ? user.hi : user.bye)(); // Error!
272+
```
273+
274+
Why? If we want to understand why it happens -- let's get under the hood of how `obj.method()` call works.
259275

260276
Looking closely, we may notice two operations in `obj.method()` statement:
261277

262-
- the dot `'.'` retrieves the property `obj.method`.
263-
- brackets `()` execute it (assuming that's a function).
278+
1. First, the dot `'.'` retrieves the property `obj.method`.
279+
2. Then parentheses `()` execute it.
280+
281+
So, how the information about `this` gets passed from the first part to the second one?
264282

265-
So, you might have already asked yourself, why does it work? That is, if we put these operations on separate lines, then `this` will be lost for sure:
283+
If we put these operations on separate lines, then `this` will be lost for sure:
266284

267285
```js run
268286
let user = {
@@ -277,7 +295,7 @@ hi(); // Error, because this is undefined
277295
*/!*
278296
```
279297

280-
That's because a function is a value of its own. It does not carry the object. So `hi = user.hi` saves it into the variable, and then on the last line it is completely standalone.
298+
Here `hi = user.hi` puts the function into the variable, and then on the last line it is completely standalone, and so there's no `this`.
281299

282300
**To make `user.hi()` calls work, JavaScript uses a trick -- the dot `'.'` returns not a function, but a value of the special [Reference Type](https://tc39.github.io/ecma262/#sec-reference-specification-type).**
283301

@@ -289,14 +307,14 @@ The value of Reference Type is a three-value combination `(base, name, strict)`,
289307
- `name` is the property.
290308
- `strict` is true if `use strict` is in effect.
291309

292-
The result of a property access `'.'` is a value of Reference Type. For `user.hi` in strict mode it is:
310+
The result of a property access `user.hi` is not a function, but a value of Reference Type. For `user.hi` in strict mode it is:
293311

294312
```js
295313
// Reference Type value
296314
(user, "hi", true)
297315
```
298316

299-
When brackets `()` are called on the Reference Type, they receive the full information about the object and it's method, and can set the right `this` (`=user` in this case).
317+
When parentheses `()` are called on the Reference Type, they receive the full information about the object and it's method, and can set the right `this` (`=user` in this case).
300318

301319
Any other operation like assignment `hi = user.hi` discards the reference type as a whole, takes the value of `user.hi` (a function) and passes it on. So any further operation "looses" `this`.
302320

@@ -320,7 +338,7 @@ let user = {
320338
user.sayHi(); // Ilya
321339
```
322340

323-
That's a special feature of arrow functions, it's useful when we actually do not want to have a separate `this`, but rather to take it from the outer context. Later in the chapter <info:arrow-functions> we'll dig more deeply into what's going on.
341+
That's a special feature of arrow functions, it's useful when we actually do not want to have a separate `this`, but rather to take it from the outer context. Later in the chapter <info:arrow-functions> we'll go more deeply into arrow functions.
324342

325343

326344
## Summary

1-js/04-object-basics/05-object-toprimitive/article.md

Lines changed: 26 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,32 @@
11

22
# Object to primitive conversion
33

4-
In the chapter <info:type-conversions> we've seen the rules for numeric, string and boolean conversions of primitives.
4+
What happens when objects are added `obj1 + obj2`, substracted `obj1 - obj2` or printed using `alert(obj)`?
55

6-
But we left a gap for objects. Now let's close it. And, in the process, we'll see some built-in methods and the example of a built-in symbol.
6+
There are special methods in objects that do the conversion.
77

8-
[cut]
9-
10-
## Where and why?
11-
12-
The process of object to primitive conversion can be customized, here we'll see how to implement our own methods for it. But first, let's see when it happens.
8+
In the chapter <info:type-conversions> we've seen the rules for numeric, string and boolean conversions of primitives. But we left a gap for objects. Now, as we know about methods and symbols it becomes possible to close it.
139

14-
That's because the conversion of an object to primitive value (a number or a string) is a rare thing in practice.
10+
[cut]
1511

1612
For objects, there's no to-boolean conversion, because all objects are `true` in a boolean context. So there are only string and numeric conversions.
1713

18-
For instance, numeric conversion happens in most mathematical functions. But do we run maths on an object as a whole? Rarely the case. It also occurs when we compare an object against a primitive: `user > 18`. But should we write like that? What such comparison actually means? Maybe we want to compare `18` against the age of the `user`? Then it would be more obvious to write `user.age > 18`. And it's easier to read and understand it too.
19-
20-
As for the string conversion... Where does it occur? Usually, when we output an object like `alert(obj)`. But `alert` and similar ways to show an object are only used for debugging and logging purposes. For real stuff, the output is more complicated. It is usually implemented with special object methods like `user.format(...)` or in more advanced ways.
14+
The numeric conversion happens when we substract objects or apply mathematical functions. For instance, `Date` objects (to be covered in the chapter <info:date>) can be substracted, and the result of `date1 - date2` is the time difference between two dates.
2115

22-
Still, there are still valid reasons why we should know how to-primitive conversion works:
23-
24-
- Simple object-as-string output (`alert` and alike) is useable sometimes.
25-
- Many built-in objects implement their own to-primitive conversion, we need to know how to work with that.
26-
- Sometimes an unexpected conversion happens, and we should understand what's going on.
27-
- The final one. There are quizzes and questions on interviews that rely on that knowledge. Looks like people think it's a good sign that person understands JavaScript if he knows type conversions well.
16+
As for the string conversion -- it usually happens when we output an object like `alert(obj)` and in similar contexts.
2817

2918
## ToPrimitive
3019

31-
When an object is used in the context where a primitive is required, it is converted to primitive using the `ToPrimitive` algorithm, thoroughly described in the [specification](https://tc39.github.io/ecma262/#sec-toprimitive)).
20+
When an object is used in the context where a primitive is required, for instance, in an `alert` or mathematical operations, it's converted to a primitive value using the `ToPrimitive` algorithm ([specification](https://tc39.github.io/ecma262/#sec-toprimitive)).
21+
22+
That algorithm allows to customize the conversion using in a special object method.
3223

33-
That algorithm joins all conversion cases and allows to customize them in a special object method.
24+
Depending on the context, the conversion has a so-called "hint".
3425

35-
When a built-in function (like `alert` or mathematical functions) or an operator (like an addition or substraction) get an object as their argument, they initiate the to-primitive conversion using one of 3 so-called "hints":
26+
There are 3 variants:
3627

3728
`"string"`
38-
: When an operation expects a string, for object-to-string conversions, like:
29+
: When an operation expects a string, for object-to-string conversions, like `alert`:
3930

4031
```js
4132
// output
@@ -46,7 +37,7 @@ When a built-in function (like `alert` or mathematical functions) or an operator
4637
```
4738

4839
`"number"`
49-
: When an operation expects a number, for object-to-number conversions, like:
40+
: When an operation expects a number, for object-to-number conversions, like maths:
5041

5142
```js
5243
// explicit conversion
@@ -63,9 +54,7 @@ When a built-in function (like `alert` or mathematical functions) or an operator
6354
`"default"`
6455
: Occurs in rare cases when the operator is "not sure" what type to expect.
6556

66-
For instance, binary plus `+` can work both with strings (concatenates them) and numbers (adds them).
67-
68-
Or when an object is compared with a string, number or a symbol using `==`, then also the `"default"` hint is used.
57+
For instance, binary plus `+` can work both with strings (concatenates them) and numbers (adds them), so both strings and numbers would do. Or when an object is compared using `==` with a string, number or a symbol.
6958

7059
```js
7160
// binary plus
@@ -75,7 +64,7 @@ When a built-in function (like `alert` or mathematical functions) or an operator
7564
if (user == 1) { ... };
7665
```
7766

78-
Seems right to use that hint for binary addition `+` and equality check `==`, because they operate both on strings and numbers. Although, there's some inconsistency here. The greater/less operator `<>` can work with both strings and numbers too. Still, it uses "number" hint, not "default". That's for historical reasons.
67+
The greater/less operator `<>` can work with both strings and numbers too. Still, it uses "number" hint, not "default". That's for historical reasons.
7968

8069
In practice, all built-in objects except for one case (`Date` object, we'll learn it later) implement `"default"` conversion the same way as `"number"`. And probably we should do the same.
8170

@@ -185,19 +174,19 @@ An operation that initiated the conversion gets that primitive, and then continu
185174

186175
For instance:
187176

188-
- Mathematical operations (except binary plus) apply `ToNumber` after `ToPrimitive` with `"number"` hint:
177+
- Mathematical operations (except binary plus) perform `ToNumber` conversion:
189178

190179
```js run
191180
let obj = {
192-
toString() { // toString handles all ToPrimitive in the absense of other methods
181+
toString() { // toString handles all conversions in the absense of other methods
193182
return "2";
194183
}
195184
};
196185

197186
alert(obj * 2); // 4, ToPrimitive gives "2", then it becomes 2
198187
```
199188

200-
- Binary plus first checks if the primitive is a string, and then does concatenation, otherwise performs `ToNumber` and works with numbers.
189+
- Binary plus performs checks the primitive -- if it's a string, then it does concatenation, otherwise performs `ToNumber` and works with numbers.
201190
202191
String example:
203192
```js run
@@ -221,21 +210,22 @@ For instance:
221210
alert(obj + 2); // 3 (ToPrimitive returned boolean, not string => ToNumber)
222211
```
223212
224-
```smart header="Minor notes"
225-
- If `Symbol.toPrimitive` exists, it *must* return an primitive, otherwise there will be an error.
226-
- Methods `toString` or `valueOf` *should* return a primitive: if any of them returns and object, then it is ignored (like if the method didn't exist). That's the historical behavior.
213+
```smart header="Historical notes"
214+
For historical reasons, methods `toString` or `valueOf` *should* return a primitive: if any of them returns an object, then there's no error, but the object is ignored (like if the method didn't exist).
215+
216+
In contrast, `Symbol.toPrimitive` *must* return an primitive, otherwise there will be an error.
227217
```
228218
229219
## Summary
230220
231221
The object-to-primitive conversion is called automatically by many built-in functions and operators that expect a primitive as a value.
232222
233223
There are 3 types (hints) of it:
234-
- `"string"`
235-
- `"number"`
236-
- `"default"`
224+
- `"string"` (for `alert` and other string conversions)
225+
- `"number"` (for maths)
226+
- `"default"` (few operators)
237227
238-
So, operations use the hint depending on what they expect to get. The specification describes explicitly which operator uses which hint. There are very few operators that "don't know what to expect" and use the `"default"` hint. Usually for built-in objects it works the same way as `"number"`, so in practice the last two are often merged together.
228+
The specification describes explicitly which operator uses which hint. There are very few operators that "don't know what to expect" and use the `"default"` hint. Usually for built-in objects `"default"` hint is handled the same way as `"number"`, so in practice the last two are often merged together.
239229
240230
The conversion algorithm is:
241231

1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ importance: 2
22

33
---
44

5-
# Two functions -- one object
5+
# Two functions one object
66

77
Is it possible to create functions `A` and `B` such as `new A()==new B()`?
88

0 commit comments

Comments
 (0)