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/01-getting-started/1-intro/article.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -107,9 +107,9 @@ Ferramentas modernas tornam a transpilação muito rápida e transparente, permi
107
107
Exemplos de tais linguagens:
108
108
109
109
-[CoffeeScript](http://coffeescript.org/) é um "açúcar sintático" para JavaScript. Ele introduz uma sintaxe mais curta, permitindo-nos escrever um código mais claro e preciso. Normalmente, Ruby devs gostam dele.
110
-
-[TypeScript](http://www.typescriptlang.org/) está concentrado em adicionar "dados estritos de digitação" para simplificar o desenvolvimento e suporte de sistemas complexos. É desenvolvido pela Microsoft.
111
-
-[Flow](http://flow.org/) também adiciona dados de digitação, mas de uma forma diferente. Desenvolvido pela Facebook.
112
-
-[Dart](https://www.dartlang.org/) é uma linguagem autônoma que tem seu próprio mecanismo que roda em ambientes sem navegador (como aplicativos móveis), mas também pode ser transpilada para JavaScript. Desenvolvido pela Google.
110
+
-[TypeScript](http://www.typescriptlang.org/) está concentrado em adicionar "estritos tipos de dados" para simplificar o desenvolvimento e suporte de sistemas complexos. É desenvolvido pela Microsoft.
111
+
-[Flow](http://flow.org/) também adiciona tipos de dados, mas de uma forma diferente. Desenvolvido pela Facebook.
112
+
-[Dart](https://www.dartlang.org/) é uma linguagem autônoma que tem seu próprio interpretador que roda em ambientes fora do navegador (como aplicativos móveis), mas também pode ser transpilada para JavaScript. Desenvolvido pela Google.
113
113
-[Brython](https://brython.info/) é um transpilador de Python para JavaScript que permite escrever aplicativos em puro Python, sem JavaScript.
114
114
115
115
Há mais. Claro que, mesmo que usemos uma dessas linguagens transpiladas, também devemos saber JavaScript para entender o que estamos fazendo.
Copy file name to clipboardExpand all lines: 1-js/04-object-basics/02-object-copy/article.md
+23-23Lines changed: 23 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
1
# Object references and copying
2
2
3
-
One of the fundamental differences of objects versus primitives is that objects are stored and copied "by reference", as opposed to primitive values: strings, numbers, booleans, etc -- that are always copied "as a whole value".
3
+
One of the fundamental differences of objects versus primitives is that objects are stored and copied "by reference", whereas primitive values: strings, numbers, booleans, etc -- are always copied "as a whole value".
4
4
5
-
That's easy to understand if we look a bit "under a cover" of what happens when we copy a value.
5
+
That's easy to understand if we look a bit under the hood of what happens when we copy a value.
6
6
7
7
Let's start with a primitive, such as a string.
8
8
@@ -13,17 +13,17 @@ let message = "Hello!";
13
13
let phrase = message;
14
14
```
15
15
16
-
As a result we have two independent variables, each one is storing the string `"Hello!"`.
16
+
As a result we have two independent variables, each one storing the string `"Hello!"`.
17
17
18
18

19
19
20
20
Quite an obvious result, right?
21
21
22
22
Objects are not like that.
23
23
24
-
**A variable assigned to an object stores not the object itself, but its "address in memory", in other words "a reference" to it.**
24
+
**A variable assigned to an object stores not the object itself, but its "address in memory" -- in other words "a reference" to it.**
25
25
26
-
Let's look at an example of such variable:
26
+
Let's look at an example of such a variable:
27
27
28
28
```js
29
29
let user = {
@@ -37,13 +37,13 @@ And here's how it's actually stored in memory:
37
37
38
38
The object is stored somewhere in memory (at the right of the picture), while the `user` variable (at the left) has a "reference" to it.
39
39
40
-
We may think of an object variable, such as `user`, as of a sheet of paper with the address.
40
+
We may think of an object variable, such as `user`, as like a sheet of paper with the address of the object on it.
41
41
42
-
When we perform actions with the object, e.g. take a property `user.name`, JavaScript engine looks into that address and performs the operation on the actual object.
42
+
When we perform actions with the object, e.g. take a property `user.name`, the JavaScript engine looks at what's at that address and performs the operation on the actual object.
43
43
44
44
Now here's why it's important.
45
45
46
-
**When an object variable is copied -- the reference is copied, the object is not duplicated.**
46
+
**When an object variable is copied, the reference is copied, but the object itself is not duplicated.**
47
47
48
48
For instance:
49
49
@@ -53,13 +53,13 @@ let user = { name: "John" };
53
53
let admin = user; // copy the reference
54
54
```
55
55
56
-
Now we have two variables, each one with the reference to the same object:
56
+
Now we have two variables, each storing a reference to the same object:
57
57
58
58

59
59
60
-
As you can see, there's still one object, now with two variables that reference it.
60
+
As you can see, there's still one object, but now with two variables that reference it.
61
61
62
-
We can use any variable to access the object and modify its contents:
62
+
We can use either variable to access the object and modify its contents:
63
63
64
64
```js run
65
65
let user = { name:'John' };
@@ -73,7 +73,7 @@ admin.name = 'Pete'; // changed by the "admin" reference
73
73
alert(*!*user.name*/!*); //'Pete', changes are seen from the "user" reference
74
74
```
75
75
76
-
It's just as if we had a cabinet with two keys and used one of them (`admin`) to get into it. Then, if we later use another key (`user`) we can see changes.
76
+
It's as if we had a cabinet with two keys and used one of them (`admin`) to get into it and make changes. Then, if we later use another key (`user`), we are still opening the same cabinet and can access the changed contents.
77
77
78
78
## Comparison by reference
79
79
@@ -98,15 +98,15 @@ let b = {}; // two independent objects
98
98
alert( a == b ); // false
99
99
```
100
100
101
-
For comparisons like `obj1 > obj2` or for a comparison against a primitive `obj ==5`, objects are converted to primitives. We'll study how object conversions work very soon, but to tell the truth, such comparisons are needed very rarely, usually they appear as a result of a programming mistake.
101
+
For comparisons like `obj1 > obj2` or for a comparison against a primitive `obj ==5`, objects are converted to primitives. We'll study how object conversions work very soon, but to tell the truth, such comparisons are needed very rarely -- usually they appear as a result of a programming mistake.
102
102
103
103
## Cloning and merging, Object.assign
104
104
105
105
So, copying an object variable creates one more reference to the same object.
106
106
107
107
But what if we need to duplicate an object? Create an independent copy, a clone?
108
108
109
-
That's also doable, but a little bit more difficult, because there's no built-in method for that in JavaScript. Actually, that's rarely needed. Copying by reference is good most of the time.
109
+
That's also doable, but a little bit more difficult, because there's no built-in method for that in JavaScript. But there is rarely a need -- copying by reference is good most of the time.
110
110
111
111
But if we really want that, then we need to create a new object and replicate the structure of the existing one by iterating over its properties and copying them on the primitive level.
112
112
@@ -225,12 +225,12 @@ user.sizes.width++; // change a property from one place
225
225
alert(clone.sizes.width); // 51, see the result from the other one
226
226
```
227
227
228
-
To fix that, we should use the cloning loop that examines each value of `user[key]` and, if it's an object, then replicate its structure as well. That is called a "deep cloning".
228
+
To fix that, we should use a cloning loop that examines each value of `user[key]` and, if it's an object, then replicate its structure as well. That is called a "deep cloning".
229
229
230
-
We can use recursion to implement it. Or, not to reinvent the wheel, take an existing implementation, for instance [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep) from the JavaScript library [lodash](https://lodash.com).
230
+
We can use recursion to implement it. Or, to not reinvent the wheel, take an existing implementation, for instance [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep) from the JavaScript library [lodash](https://lodash.com).
231
231
232
-
```smart header="Const objects can be modified"
233
-
An important "side effect"of storing objects as references is that an object declared as `const`*can* be modified.
232
+
````smart header="Const objects can be modified"
233
+
An important side effect of storing objects as references is that an object declared as `const` *can* bemodified.
234
234
235
235
For instance:
236
236
@@ -246,16 +246,16 @@ user.name = "Pete"; // (*)
246
246
alert(user.name); // Pete
247
247
```
248
248
249
-
It might seem that the line `(*)` would cause an error, but no. The value of`user` is constant, it must always reference the same object. But properties of that object are free to change.
249
+
It might seem that the line `(*)` would cause an error, but it does not. The value of`user` is constant, it must always reference the same object, but properties of that object are free to change.
250
250
251
-
In other words, the `const user` gives an error only if we try to set `user=...` as a whole, and that's all.
251
+
In other words, the `const user` gives an error only if we try to set `user=...` as a whole.
252
252
253
-
That said, if we really need to make constant object properties, it's also possible, but using totally different methods, we'll mention that in the chapter <info:property-descriptors>.
254
-
```
253
+
That said, if we really need to make constant object properties, it's also possible, but using totally different methods. We'll mention that in the chapter <info:property-descriptors>.
254
+
````
255
255
256
256
## Summary
257
257
258
-
Objects are assigned and copied by reference. In other words, a variable stores not the "object value", but a "reference" (address in memory) for the value. So copying such a variable or passing it as a function argument copies that reference, not the object.
258
+
Objects are assigned and copied by reference. In other words, a variable stores not the "object value", but a "reference" (address in memory) for the value. So copying such a variable or passing it as a function argument copies that reference, not the object itself.
259
259
260
260
All operations via copied references (likeadding/removingproperties) are performed on the same single object.
Copy file name to clipboardExpand all lines: 1-js/05-data-types/05-array-methods/article.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -742,8 +742,8 @@ These methods are the most used ones, they cover 99% of use cases. But there are
742
742
-[arr.some(fn)](mdn:js/Array/some)/[arr.every(fn)](mdn:js/Array/every) check the array.
743
743
744
744
The function `fn` is called on each element of the array similar to `map`. If any/all results are `true`, returns `true`, otherwise `false`.
745
-
746
-
These methods behave sort of like `||` and `&&` operators: if `fn` returns a truthy value, `arr.some()` immediately returns `true` and stops iterating over the rest items; if `fn`returns a falsy value, `arr.every()` immediately returns `false` and stops iterating over the rest items as well.
745
+
746
+
These methods behave sort of like `||` and `&&` operators: if `fn` returns a truthy value, `arr.some()` immediately returns `true` and stops iterating over the rest of items; if `fn` returns a falsy value, `arr.every()` immediately returns `false` and stops iterating over the rest of items as well.
Copy file name to clipboardExpand all lines: 1-js/05-data-types/06-iterable/article.md
+9-7Lines changed: 9 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
2
2
# Iterables
3
3
4
-
*Iterable* objects is a generalization of arrays. That's a concept that allows us to make any object useable in a `for..of` loop.
4
+
*Iterable* objects are a generalization of arrays. That's a concept that allows us to make any object useable in a `for..of` loop.
5
5
6
6
Of course, Arrays are iterable. But there are many other built-in objects, that are iterable as well. For instance, Strings are iterable also. As we'll see, many built-in operators and methods rely on them.
7
7
@@ -26,7 +26,7 @@ let range = {
26
26
// for(let num of range) ... num=1,2,3,4,5
27
27
```
28
28
29
-
To make the `range` iterable (and thus let `for..of` work) we need to add a method to the object named `Symbol.iterator` (a special built-in symbol just for that).
29
+
To make the `range`object iterable (and thus let `for..of` work) we need to add a method to the object named `Symbol.iterator` (a special built-in symbol just for that).
30
30
31
31
1. When `for..of` starts, it calls that method once (or errors if not found). The method must return an *iterator* -- an object with the method `next`.
32
32
2. Onward, `for..of` works *only with that returned object*.
@@ -140,7 +140,7 @@ for (let char of str) {
140
140
141
141
## Calling an iterator explicitly
142
142
143
-
Normally, internals of iterables are hidden from the external code. There's a `for..of` loop, that works, that's all it needs to know.
143
+
For deeper understanding, let's see how to use an iterator explicitly.
144
144
145
145
We'll iterate over a string in exactly the same way as `for..of`, but with direct calls. This code creates a string iterator and gets values from it "manually":
146
146
@@ -165,14 +165,16 @@ That is rarely needed, but gives us more control over the process than `for..of`
165
165
166
166
## Iterables and array-likes [#array-like]
167
167
168
-
There are two official terms that look similar, but are very different. Please make sure you understand them well to avoid the confusion.
168
+
Two official terms look similar, but are very different. Please make sure you understand them well to avoid the confusion.
169
169
170
170
-*Iterables* are objects that implement the `Symbol.iterator` method, as described above.
171
171
-*Array-likes* are objects that have indexes and `length`, so they look like arrays.
172
172
173
-
Naturally, these properties can combine. For instance, strings are both iterable (`for..of` works on them) and array-like (they have numeric indexes and `length`).
173
+
When we use JavaScript for practical tasks in a browser or any other environment, we may meet objects that are iterables or array-likes, or both.
174
174
175
-
But an iterable may be not array-like. And vice versa an array-like may be not iterable.
175
+
For instance, strings are both iterable (`for..of` works on them) and array-like (they have numeric indexes and `length`).
176
+
177
+
But an iterable may not be array-like. And vice versa an array-like may not be iterable.
176
178
177
179
For example, the `range` in the example above is iterable, but not array-like, because it does not have indexed properties and `length`.
178
180
@@ -291,7 +293,7 @@ alert( str.slice(1, 3) ); // garbage (two pieces from different surrogate pairs)
291
293
Objects that can be used in `for..of` are called *iterable*.
292
294
293
295
- Technically, iterables must implement the method named `Symbol.iterator`.
294
-
- The result of `obj[Symbol.iterator]()` is called an *iterator*. It handles the further iteration process.
296
+
- The result of `obj[Symbol.iterator]()` is called an *iterator*. It handles further iteration process.
295
297
- An iterator must have the method named `next()` that returns an object `{done: Boolean, value: any}`, here `done:true` denotes the end of the iteration process, otherwise the `value` is the next value.
296
298
- The `Symbol.iterator` method is called automatically by `for..of`, but we also can do it directly.
297
299
- Built-in iterables like strings or arrays, also implement `Symbol.iterator`.
0 commit comments