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
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".
3
+
Uma das diferenças fundamentais entre objetos e primitivos é que objetos são armazenados e copiados por "referência", enquanto valores primitivos: strings, números, booleanos, etc -- são sempre copiados "como um valor integral".
4
4
5
-
That's easy to understand if we look a bit under the hood of what happens when we copy a value.
5
+
Isso é fácil de entender se olharmos um pouco por debaixo dos panos do que acontece quando copiamos um valor.
6
6
7
-
Let's start with a primitive, such as a string.
7
+
Vamos começar com um primitivo, como uma string.
8
8
9
-
Here we put a copy of `message`into`phrase`:
9
+
Aqui fazemos uma cópia de `message`para`phrase`
10
10
11
11
```js
12
12
let message ="Hello!";
13
13
let phrase = message;
14
14
```
15
15
16
-
As a result we have two independent variables, each one storing the string `"Hello!"`.
16
+
Como resultado temos duas variáveis independentes, cada uma armazenando a string `"Hello!"`
17
17
18
18

19
19
20
-
Quite an obvious result, right?
20
+
Um resultado bastante óbvio, certo?
21
21
22
-
Objects are not like that.
22
+
Objetos não são assim.
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
+
**Uma variável atribuída a um objeto armazena não o próprio objeto, mas sim o seu "endereço em memória" -- em outras palavras "uma referência" a ele.**
25
25
26
-
Let's look at an example of such a variable:
26
+
Vamos analisar o exemplo dessa variável
27
27
28
28
```js
29
29
let user = {
30
-
name:"John"
30
+
name:"John",
31
31
};
32
32
```
33
33
34
-
And here's how it's actually stored in memory:
34
+
E aqui é como ela está realmente armazenada na memória
35
35
36
36

37
37
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.
38
+
O objeto é armazenado em algum lugar na memória (à direita da imagem), enquanto a variável `user`(à esquerda) possui uma referência a ele.
39
39
40
-
We may think of an object variable, such as `user`, like a sheet of paper with the address of the object on it.
40
+
Podemos pensar em uma variável de objeto, `user`, como uma folha de papel com o endereço do objeto escrito nela.
41
41
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.
42
+
Quando realizamos ações com o objeto, por exemplo, acessar a propriedade`user.name`, o motor do Javascript verifica o que está nesse endereço e realiza a operação no objeto real.
43
43
44
-
Now here's why it's important.
44
+
Agora está aqui o motivo pelo qual isso é importante:
45
45
46
-
**When an object variable is copied, the reference is copied, but the object itself is not duplicated.**
46
+
**Quando uma variável de objeto é copiada, a referência é copiada, mas o próprio objeto não é duplicado**
47
47
48
-
For instance:
48
+
Por exemplo:
49
49
50
50
```js no-beautify
51
51
let user = { name:"John" };
52
52
53
-
let admin = user; //copy the reference
53
+
let admin = user; //copia a referência
54
54
```
55
55
56
-
Now we have two variables, each storing a reference to the same object:
56
+
Agora temos duas variáveis, cada uma armazenando uma referência para o mesmo objeto:
57
57
58
58

59
59
60
-
As you can see, there's still one object, but now with two variables that reference it.
60
+
Como você pode ver, ainda há apenas um objeto, porém agora com duas variáveis que o referenciam.
61
61
62
-
We can use either variable to access the object and modify its contents:
62
+
Podemos usar qualquer uma das variáveis para acessar o objeto e modificar o seu conteúdo:
63
63
64
64
```js run
65
65
let user = { name:'John' };
66
66
67
67
let admin = user;
68
68
69
69
*!*
70
-
admin.name='Pete'; //changed by the "admin" reference
70
+
admin.name='Pete'; //alterado pela referência "admin"
71
71
*/!*
72
72
73
-
alert(*!*user.name*/!*); //'Pete', changes are seen from the "user" reference
73
+
alert(*!*user.name*/!*); //'Pete', alterações são vistas a partir da referência "user"
74
74
```
75
75
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.
76
+
É como se tivéssemos um armário com duas chaves e usado uma delas (`admin`) para abri-lo e fazer alterações. Então, se depois usarmos a outra chave (`user`), ainda estaremos abrindo o mesmo armário e podemos acessar o conteúdo alterado.
77
77
78
-
## Comparison by reference
78
+
## Comparação por referência
79
79
80
-
Two objects are equal only if they are the same object.
80
+
Dois objetos são iguais apenas se possuem a mesma referência.
81
81
82
-
For instance, here`a`and`b`reference the same object, thus they are equal:
82
+
Por exemplo, aqui`a`e`b`faz referência ao mesmo objeto, por isso eles são iguais:
83
83
84
84
```js run
85
85
let a = {};
86
-
let b = a; //copy the reference
86
+
let b = a; //copia a referência
87
87
88
-
alert(a == b); // true, both variables reference the same object
89
-
alert(a === b); // true
88
+
alert(a == b); // true, ambas as variáveis referenciam o mesmo objeto
89
+
alert(a === b); // true
90
90
```
91
91
92
-
And here two independent objects are not equal, even though they look alike (both are empty):
92
+
E aqui, dois objetos independentes não são iguais, apesar deles pareceram iguais (ambos estão vazios):
93
93
94
94
```js run
95
95
let a = {};
96
-
let b = {}; //two independent objects
96
+
let b = {}; //dois objetos independentes
97
97
98
-
alert(a == b); // false
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
+
Para comparações como`obj1 > obj2`ou para uma comparação com um primitivo`obj ==5`, os objetos são convertidos em primitivos. Vamos estudar como as conversões de objetos funcionam muito em breve, mas, para ser honesto, tais comparações são necessárias muito raramente - geralmente, elas surgem como resultado de um erro de programação.
102
102
103
-
````smart header="Const objects can be modified"
104
-
An important side effect of storing objects as references is that an object declared as`const` *can* bemodified.
103
+
````smart header="Objetos com const podem ser modificados"
104
+
Um efeito colateral importante de armazenar objetos como referência é que um objeto declarado como`const` *pode* sermodificado
105
105
106
-
For instance:
106
+
Por exemplo:
107
107
108
108
```js run
109
109
const user = {
@@ -117,22 +117,22 @@ user.name = "Pete"; // (*)
117
117
alert(user.name); // Pete
118
118
```
119
119
120
-
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.
120
+
Pode parecer que a linha `(*)`causaria um erro, mas não causa. O valor de`user`é constante, ele deve sempre referenciar o mesmo objeto, porém as propriedades desse objeto são livres para mudar.
121
121
122
-
In other words, the`const user`gives an error only if we try to set `user=...`as a whole.
122
+
Em outras palavras, o`const user`gera um erro apenas se tentarmos definir `user=...`como um todo.
123
123
124
-
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>.
124
+
Dito isto, se realmente precisamos tornar as propriedades do objeto constantes, também é possível, porém usando métodos totalmente diferentes. Vamos mencionar isto no capítulo<info:property-descriptors>.
125
125
````
126
126
127
-
## Cloning and merging, Object.assign [#cloning-and-merging-object-assign]
127
+
## Clonando e mesclando, Object.assign [#cloning-and-merging-object-assign]
128
128
129
-
So, copying an object variable creates one more reference to the same object.
129
+
Sim, copiar uma variável de objeto cria mais uma referência para o mesmo objeto.
130
130
131
-
But what if we need to duplicate an object?
131
+
Mas e se precisamos duplicar um objeto?
132
132
133
-
We can create a newobject and replicate the structure of the existing one, by iterating over its properties and copying them on the primitive level.
133
+
Podemos criar um novo objeto e replicar a estrutura existente, iterando sobre suas propriedades e copiando-as no nível primitivo.
134
134
135
-
Like this:
135
+
Como neste exemplo:
136
136
137
137
```js run
138
138
let user = {
@@ -141,34 +141,34 @@ let user = {
141
141
};
142
142
143
143
*!*
144
-
let clone = {}; // the new empty object
144
+
let clone = {}; // o novo objeto vazio
145
145
146
-
// let's copy all user properties into it
146
+
// vamos copiar todas as propriedades de usuário para ele
147
147
for (let key in user) {
148
148
clone[key] = user[key];
149
149
}
150
150
*/!*
151
151
152
-
// now clone is a fully independent object with the same content
153
-
clone.name = "Pete"; // changed the data in it
152
+
// agora clone é um objeto totalmente independente com o mesmo conteúdo
153
+
clone.name = "Pete"; // altera o dado nele
154
154
155
-
alert( user.name ); // still John in the original object
155
+
alert( user.name ); // Ainda será John no objeto original
156
156
```
157
157
158
-
We can also use the method [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign).
158
+
Também podemos usar o método [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign).
159
159
160
-
The syntax is:
160
+
A sintaxe é:
161
161
162
162
```js
163
-
Object.assign(dest, ...sources)
163
+
Object.assign(dest, ...sources);
164
164
```
165
165
166
-
-The first argument`dest`is a target object.
167
-
-Further arguments is a list of source objects.
166
+
-O primeiro argumento`dest`é um objeto destino.
167
+
-Os demais argumentos são uma lista de objetos de origem.
168
168
169
-
It copies the properties of all source objects into the target `dest`, and then returns it as the result.
169
+
Ele copia as propriedades de todos os objetos de origem para o destino `dest`, e em seguida, retorna-o como resultado.
170
170
171
-
For example, we have `user` object, let's add a couple of permissions to it:
171
+
Por exemplo, temos o objeto `user`, vamos adicionar um par de permissões a ele:
We also can use `Object.assign` to perform a simple object cloning:
200
+
Também podemos usar `Object.assign`para realizar uma clonagem simples de objeto:
201
201
202
202
```js run
203
203
let user = {
@@ -213,55 +213,55 @@ alert(clone.name); // John
213
213
alert(clone.age); // 30
214
214
```
215
215
216
-
Here it copies all properties of `user` into the empty object and returns it.
216
+
Aqui ele copia todas as propriedades de `user`para o objeto vazio e o retorna.
217
217
218
-
There are also other methods of cloning an object, e.g. using the [spread syntax](info:rest-parameters-spread) `clone = {...user}`, covered later in the tutorial.
218
+
Também há outros métodos de clonar um objeto, por exemplo, usando a [sintaxe de spread](info:rest-parameters-spread) `clone = {...user}`, abordado mais tarde no tutorial.
219
219
220
-
## Nested cloning
220
+
## Clonagem aninhada
221
221
222
-
Until now we assumed that all properties of `user` are primitive. But properties can be references to other objects.
222
+
Até agora, assumimos que todas as propriedades de `user` são primitivas. No entanto, propriedades podem ser referências a outros objetos.
223
+
224
+
Como neste exemplo:
223
225
224
-
Like this:
225
226
```js run
226
227
let user = {
227
228
name: "John",
228
229
sizes: {
229
230
height: 182,
230
-
width: 50
231
-
}
231
+
width: 50,
232
+
},
232
233
};
233
234
234
-
alert(user.sizes.height); // 182
235
+
alert(user.sizes.height); // 182
235
236
```
236
237
237
-
Now it's not enough to copy `clone.sizes = user.sizes`, because`user.sizes`is an object, and will be copied by reference, so`clone`and`user`will share the same sizes:
238
+
Agora, não é suficiente copiar `clone.sizes = user.sizes`, porque`user.sizes`é um objeto e será copiado por referência, portanto`clone`e`user`irão compartilhar o mesmo objeto `sizes`:
238
239
239
240
```js run
240
241
let user = {
241
242
name: "John",
242
243
sizes: {
243
244
height: 182,
244
-
width: 50
245
-
}
245
+
width: 50,
246
+
},
246
247
};
247
248
248
249
let clone = Object.assign({}, user);
249
250
250
-
alert(user.sizes === clone.sizes); // true, same object
251
+
alert(user.sizes === clone.sizes); // true, mesmo objeto
251
252
252
-
// user and clone share sizes
253
-
user.sizes.width = 60; // change a property from one place
254
-
alert(clone.sizes.width); // 60, get the result from the other one
253
+
// user e clone compartilham sizes
254
+
user.sizes.width = 60; // altera uma propriedade de um local
255
+
alert(clone.sizes.width); // 60, obtém o resultado do outro
255
256
```
256
257
257
-
To fix that and make `user` and `clone` truly separate objects, 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" or "structured cloning". There's [structuredClone](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone) method that implements deep cloning.
258
-
258
+
Para corrigir isso e tornar `user` e `clone` objetos verdadeiramente separados, devemos usar um loop de clonagem que examina cada valor de `user[key]` e, se for um objeto, replica sua estrutura também. Isto é chamado "clonagem profunda" ou "clonagem estruturada". Existe o método [structuredClone](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone) que implementa a clonagem profunda.
259
259
260
260
### structuredClone
261
261
262
-
The call`structuredClone(object)`clones the`object`with all nested properties.
262
+
A chamada`structuredClone(object)`clona o`object`com todas as propriedades aninhadas.
263
263
264
-
Here's how we can use it in our example:
264
+
Aqui está com podemos usá-lo em nosso exemplo:
265
265
266
266
```js run
267
267
let user = {
@@ -276,50 +276,50 @@ let user = {
276
276
let clone = structuredClone(user);
277
277
*/!*
278
278
279
-
alert( user.sizes === clone.sizes ); // false, different objects
279
+
alert( user.sizes === clone.sizes ); // false, objetos diferentes
280
280
281
-
// user and clone are totally unrelated now
282
-
user.sizes.width = 60; // change a property from one place
283
-
alert(clone.sizes.width); // 50, not related
281
+
// Agora, user e clone são completamente independentes
282
+
user.sizes.width = 60; // altera uma propriedade de um local
283
+
alert(clone.sizes.width); // 50, não relacionado
284
284
```
285
285
286
-
The `structuredClone` method can clone most data types, such as objects, arrays, primitive values.
286
+
O método `structuredClone`pode clonar a maioria dos tipos de dados, como objetos, arrays e valores primitivos.
287
287
288
-
It also supports circular references, when an object property references the object itself (directly or via a chain or references).
288
+
Ele também oferece suporte a referências circulares, quando uma propriedade de um objeto referencia o próprio objeto (diretamente ou através de uma cadeia de referências)
289
289
290
-
For instance:
290
+
Por exemplo:
291
291
292
292
```js run
293
293
let user = {};
294
-
// let's create a circular reference:
294
+
// vamos criar uma referência circular:
295
295
// user.me references the user itself
296
296
user.me = user;
297
297
298
298
let clone = structuredClone(user);
299
299
alert(clone.me === clone); // true
300
300
```
301
301
302
-
As you can see,`clone.me`references the `clone`, not the`user`! So the circular reference was cloned correctly as well.
302
+
Como você pode ver`clone.me`faz referência a `clone`, não a`user`!Então a referência circular foi clonada corretamente também.
303
303
304
-
Although, there are cases when`structuredClone`fails.
304
+
No entanto, existem casos em que`structuredClone`falha.
305
305
306
-
For instance, when an object has a function property:
306
+
Por exemplo, quando um objeto possui uma propriedade que é uma função:
307
307
308
308
```js run
309
309
// error
310
310
structuredClone({
311
-
f:function() {}
311
+
f: function() {},
312
312
});
313
313
```
314
314
315
-
Function properties aren't supported.
315
+
Propriedades que são funções não são suportadas.
316
316
317
-
To handle such complex cases we may need to use a combination of cloning methods, write custom code 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).
317
+
Para lidar com casos complexos, podemos precisar usar uma combinação de métodos de clonagem, escrever código personalizado ou, para não inventar a roda, usar uma implementação existente, como [\_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep) da biblioteca JavaScript [lodash](https://lodash.com).
318
318
319
-
## Summary
319
+
## Resumo
320
320
321
-
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.
321
+
Objetos são atribuídos e copiados por referência. Em outras palavras, uma variável armazena não o "valor do objeto", mas uma "referência" (endereço em memória) para o valor. Portanto, copiar a variável ou passá-la como argumento de uma função copia essa referência, não o objeto em si.
322
322
323
-
All operations via copied references (like adding/removing properties) are performed on the same single object.
323
+
Todas as operações feitas através de referências copiadas (como adição/remoção de propriedades) são realizadas no mesmo objeto único.
324
324
325
-
To make a "real copy" (a clone) we can use `Object.assign`for the so-called "shallow copy" (nested objects are copied by reference) or a "deep cloning" function `structuredClone`or use a custom cloning implementation, such as [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep).
325
+
Para fazer uma "cópia real" (um clone) podemos usar `Object.assign`caracterizando a chamada "cópia rasa" (objetos aninhados são copiados por referência) ou uma função `structuredClone`de "clonagem profunda" ou usar uma implementação de clonagem personalizada, como [\_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep).
0 commit comments