You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/03-code-quality/01-debugging-chrome/article.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
Before writing more complex code, let's talk about debugging.
4
4
5
-
[Debugging](https://en.wikipedia.org/wiki/Debugging) is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools -- a special UI in developer tools that enable debugging much easier. It also allows to trace the code step by step to see what exactly is going on.
5
+
[Debugging](https://en.wikipedia.org/wiki/Debugging) is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools -- a special UI in developer tools that makes debugging much easier. It also allows to trace the code step by step to see what exactly is going on.
6
6
7
7
We'll be using Chrome here, because it has enough features, most other browsers have a similar process`.
Copy file name to clipboardExpand all lines: 1-js/04-object-basics/03-symbol/article.md
+29-16Lines changed: 29 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,11 +3,11 @@
3
3
4
4
By specification, object property keys may be either of string type, or of symbol type. Not numbers, not booleans, only strings or symbols, these two types.
5
5
6
-
Till now we've only seen strings. Now let's see the advantages that symbols can give us.
6
+
Till now we've been using only strings. Now let's see the benefits that symbols can give us.
7
7
8
8
## Symbols
9
9
10
-
"Symbol" value represents a unique identifier.
10
+
A "symbol" represents a unique identifier.
11
11
12
12
A value of this type can be created using `Symbol()`:
13
13
@@ -18,7 +18,7 @@ let id = Symbol();
18
18
19
19
Upon creation, we can give symbol a description (also called a symbol name), mostly useful for debugging purposes:
20
20
21
-
```js
21
+
```js run
22
22
// id is a symbol with the description "id"
23
23
let id =Symbol("id");
24
24
```
@@ -50,36 +50,49 @@ alert(id); // TypeError: Cannot convert a Symbol value to a string
50
50
*/!*
51
51
```
52
52
53
-
If we really want to show a symbol, we need to call `.toString()` on it, like here:
53
+
That's a "language guard" against messing up, because strings and symbols are fundamentally different and should not accidentally convert one into another.
54
+
55
+
If we really want to show a symbol, we need to explicitly call `.toString()` on it, like here:
54
56
```js run
55
57
let id = Symbol("id");
56
58
*!*
57
59
alert(id.toString()); // Symbol(id), now it works
58
60
*/!*
59
61
```
60
62
61
-
That's a "language guard" against messing up, because strings and symbols are fundamentally different and should not occasionally convert one into another.
63
+
Or get `symbol.description` property to show the description only:
64
+
```js run
65
+
let id = Symbol("id");
66
+
*!*
67
+
alert(id.description); // id
68
+
*/!*
69
+
```
70
+
62
71
````
63
72
64
73
## "Hidden" properties
65
74
66
-
Symbols allow us to create "hidden" properties of an object, that no other part of code can occasionally access or overwrite.
75
+
Symbols allow us to create "hidden" properties of an object, that no other part of code can accidentally access or overwrite.
67
76
68
-
For instance, if we're working with `user` objects, that belong to a third-party code and don't have any `id` field. We'd like to add identifiers to them.
77
+
For instance, if we're working with `user` objects, that belong to a third-party code. We'd like to add identifiers to them.
69
78
70
79
Let's use a symbol key for it:
71
80
72
81
```js run
73
-
let user = { name:"John" };
82
+
let user = { // belongs to another code
83
+
name:"John"
84
+
};
85
+
74
86
let id =Symbol("id");
75
87
76
-
user[id] ="ID Value";
88
+
user[id] =1;
89
+
77
90
alert( user[id] ); // we can access the data using the symbol as the key
78
91
```
79
92
80
93
What's the benefit of using `Symbol("id")` over a string `"id"`?
81
94
82
-
As `user` objects belongs to another code, and that code also works with them, we shouldn't just add any fields to it. That's unsafe. But a symbol cannot be accessed occasionally, the third-party code probably won't even see it, so it's probably all right to do.
95
+
As `user` objects belongs to another code, and that code also works with them, we shouldn't just add any fields to it. That's unsafe. But a symbol cannot be accessed accidentally, the third-party code probably won't even see it, so it's probably all right to do.
83
96
84
97
Also, imagine that another script wants to have its own identifier inside `user`, for its own purposes. That may be another JavaScript library, so that the scripts are completely unaware of each other.
85
98
@@ -99,13 +112,13 @@ There will be no conflict between our and their identifiers, because symbols are
99
112
```js run
100
113
let user = { name:"John" };
101
114
102
-
//our script uses "id" property
103
-
user.id="ID Value";
115
+
//Our script uses "id" property
116
+
user.id="Our id value";
104
117
105
-
// ...if later another script the uses "id" for its purposes...
118
+
// ...Another script also wants "id" for its purposes...
106
119
107
120
user.id="Their id value"
108
-
//boom! overwritten! it did not mean to harm the colleague, but did it!
121
+
//Boom! overwritten by another script!
109
122
```
110
123
111
124
### Symbols in a literal
@@ -120,7 +133,7 @@ let id = Symbol("id");
120
133
let user = {
121
134
name:"John",
122
135
*!*
123
-
[id]:123// not just "id: 123"
136
+
[id]:123// not "id: 123"
124
137
*/!*
125
138
};
126
139
```
@@ -271,7 +284,7 @@ Symbols are always different values, even if they have the same name. If we want
271
284
Symbols have two main use cases:
272
285
273
286
1. "Hidden" object properties.
274
-
If we want to add a property into an object that "belongs" to another script or a library, we can create a symbol and use it as a property key. A symbolic property does not appear in `for..in`, so it won't be occasionally processed together with other properties. Also it won't be accessed directly, because another script does not have our symbol. So the property will be protected from occasional use or overwrite.
287
+
If we want to add a property into an object that "belongs" to another script or a library, we can create a symbol and use it as a property key. A symbolic property does not appear in `for..in`, so it won't be accidentally processed together with other properties. Also it won't be accessed directly, because another script does not have our symbol. So the property will be protected from accidental use or overwrite.
275
288
276
289
So we can "covertly" hide something into objects that we need, but others should not see, using symbolic properties.
Copy file name to clipboardExpand all lines: 1-js/05-data-types/05-array-methods/article.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -124,7 +124,7 @@ arr.slice(start, end)
124
124
125
125
It returns a new array copying to it all items from index `start` to `end` (not including `end`). Both `start` and `end` can be negative, in that case position from array end is assumed.
126
126
127
-
It's similar to a string method `str.slice`, but instead of substringss it makes subarrays.
127
+
It's similar to a string method `str.slice`, but instead of substrings it makes subarrays.
0 commit comments