Skip to content

Commit 769acd2

Browse files
Updates Object references and copying article
Updates Object references and copying article by @danilolmc
2 parents b569358 + 8ae0cf1 commit 769acd2

File tree

1 file changed

+99
-99
lines changed

1 file changed

+99
-99
lines changed
Lines changed: 99 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,109 @@
1-
# Object references and copying
1+
# Referências e cópias de objetos
22

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".
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".
44

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

7-
Let's start with a primitive, such as a string.
7+
Vamos começar com um primitivo, como uma string.
88

9-
Here we put a copy of `message` into `phrase`:
9+
Aqui fazemos uma cópia de `message` para `phrase`
1010

1111
```js
1212
let message = "Hello!";
1313
let phrase = message;
1414
```
1515

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!"`
1717

1818
![](variable-copy-value.svg)
1919

20-
Quite an obvious result, right?
20+
Um resultado bastante óbvio, certo?
2121

22-
Objects are not like that.
22+
Objetos não são assim.
2323

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.**
2525

26-
Let's look at an example of such a variable:
26+
Vamos analisar o exemplo dessa variável
2727

2828
```js
2929
let user = {
30-
name: "John"
30+
name: "John",
3131
};
3232
```
3333

34-
And here's how it's actually stored in memory:
34+
E aqui é como ela está realmente armazenada na memória
3535

3636
![](variable-contains-reference.svg)
3737

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

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

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

44-
Now here's why it's important.
44+
Agora está aqui o motivo pelo qual isso é importante:
4545

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**
4747

48-
For instance:
48+
Por exemplo:
4949

5050
```js no-beautify
5151
let user = { name: "John" };
5252

53-
let admin = user; // copy the reference
53+
let admin = user; // copia a referência
5454
```
5555

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:
5757

5858
![](variable-copy-reference.svg)
5959

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

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:
6363

6464
```js run
6565
let user = { name: 'John' };
6666

6767
let admin = user;
6868

6969
*!*
70-
admin.name = 'Pete'; // changed by the "admin" reference
70+
admin.name = 'Pete'; // alterado pela referência "admin"
7171
*/!*
7272

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"
7474
```
7575
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.
7777
78-
## Comparison by reference
78+
## Comparação por referência
7979
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.
8181
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:
8383
8484
```js run
8585
let a = {};
86-
let b = a; // copy the reference
86+
let b = a; // copia a referência
8787

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
9090
```
9191
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):
9393
9494
```js run
9595
let a = {};
96-
let b = {}; // two independent objects
96+
let b = {}; // dois objetos independentes
9797

98-
alert( a == b ); // false
98+
alert(a == b); // false
9999
```
100100
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.
102102
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* be modified.
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* ser modificado
105105

106-
For instance:
106+
Por exemplo:
107107

108108
```js run
109109
const user = {
@@ -117,22 +117,22 @@ user.name = "Pete"; // (*)
117117
alert(user.name); // Pete
118118
```
119119

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

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

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>.
125125
````
126126

127-
## Cloning and merging, Object.assign [#cloning-and-merging-object-assign]
127+
## Clonando e mesclando, Object.assign [#cloning-and-merging-object-assign]
128128

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

131-
But what if we need to duplicate an object?
131+
Mas e se precisamos duplicar um objeto?
132132

133-
We can create a new object 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.
134134

135-
Like this:
135+
Como neste exemplo:
136136

137137
```js run
138138
let user = {
@@ -141,34 +141,34 @@ let user = {
141141
};
142142
143143
*!*
144-
let clone = {}; // the new empty object
144+
let clone = {}; // o novo objeto vazio
145145
146-
// let's copy all user properties into it
146+
// vamos copiar todas as propriedades de usuário para ele
147147
for (let key in user) {
148148
clone[key] = user[key];
149149
}
150150
*/!*
151151
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
154154
155-
alert( user.name ); // still John in the original object
155+
alert( user.name ); // Ainda será John no objeto original
156156
```
157157

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).
159159

160-
The syntax is:
160+
A sintaxe é:
161161

162162
```js
163-
Object.assign(dest, ...sources)
163+
Object.assign(dest, ...sources);
164164
```
165165

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

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

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:
172172

173173
```js run
174174
let user = { name: "John" };
@@ -177,17 +177,17 @@ let permissions1 = { canView: true };
177177
let permissions2 = { canEdit: true };
178178
179179
*!*
180-
// copies all properties from permissions1 and permissions2 into user
180+
// copia todas as propriedades de permissions1 e permissions2 para user
181181
Object.assign(user, permissions1, permissions2);
182182
*/!*
183183
184-
// now user = { name: "John", canView: true, canEdit: true }
184+
// agora user = { name: "John", canView: true, canEdit: true }
185185
alert(user.name); // John
186186
alert(user.canView); // true
187187
alert(user.canEdit); // true
188188
```
189189

190-
If the copied property name already exists, it gets overwritten:
190+
Se o nome da propriedade copiada já existir, ela será sobrescrita.
191191

192192
```js run
193193
let user = { name: "John" };
@@ -197,7 +197,7 @@ Object.assign(user, { name: "Pete" });
197197
alert(user.name); // now user = { name: "Pete" }
198198
```
199199

200-
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:
201201

202202
```js run
203203
let user = {
@@ -213,55 +213,55 @@ alert(clone.name); // John
213213
alert(clone.age); // 30
214214
```
215215

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

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

220-
## Nested cloning
220+
## Clonagem aninhada
221221

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:
223225

224-
Like this:
225226
```js run
226227
let user = {
227228
name: "John",
228229
sizes: {
229230
height: 182,
230-
width: 50
231-
}
231+
width: 50,
232+
},
232233
};
233234
234-
alert( user.sizes.height ); // 182
235+
alert(user.sizes.height); // 182
235236
```
236237

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`:
238239

239240
```js run
240241
let user = {
241242
name: "John",
242243
sizes: {
243244
height: 182,
244-
width: 50
245-
}
245+
width: 50,
246+
},
246247
};
247248
248249
let clone = Object.assign({}, user);
249250
250-
alert( user.sizes === clone.sizes ); // true, same object
251+
alert(user.sizes === clone.sizes); // true, mesmo objeto
251252
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
255256
```
256257

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

260260
### structuredClone
261261

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

264-
Here's how we can use it in our example:
264+
Aqui está com podemos usá-lo em nosso exemplo:
265265

266266
```js run
267267
let user = {
@@ -276,50 +276,50 @@ let user = {
276276
let clone = structuredClone(user);
277277
*/!*
278278
279-
alert( user.sizes === clone.sizes ); // false, different objects
279+
alert( user.sizes === clone.sizes ); // false, objetos diferentes
280280
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
284284
```
285285

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

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)
289289

290-
For instance:
290+
Por exemplo:
291291

292292
```js run
293293
let user = {};
294-
// let's create a circular reference:
294+
// vamos criar uma referência circular:
295295
// user.me references the user itself
296296
user.me = user;
297297
298298
let clone = structuredClone(user);
299299
alert(clone.me === clone); // true
300300
```
301301

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

304-
Although, there are cases when `structuredClone` fails.
304+
No entanto, existem casos em que `structuredClone` falha.
305305

306-
For instance, when an object has a function property:
306+
Por exemplo, quando um objeto possui uma propriedade que é uma função:
307307

308308
```js run
309309
// error
310310
structuredClone({
311-
f: function() {}
311+
f: function () {},
312312
});
313313
```
314314

315-
Function properties aren't supported.
315+
Propriedades que são funções não são suportadas.
316316

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).
318318

319-
## Summary
319+
## Resumo
320320

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

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

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

Comments
 (0)