DEV Community

Cover image for primitives vs objects in JAVASCRIPT : copying
Anwar
Anwar

Posted on

primitives vs objects in JAVASCRIPT : copying

In the previous article we talked about mutability and saw how primitives can't be mutated while objects can.
In this article we're going to see how primitives and objects behave when we try to copy them.

Copying primitives

let's start with something simple, let's create a variable x that has a value of two

let x = 2;
Enter fullscreen mode Exit fullscreen mode

Now if we wanted to represent this variable visually, it's like a box with some value inside of it so here's how it might look(P.S : I'm not a designer 🙃)
visual representation of a variable

Second thing I'd like to do is make a copy of x and log it to the console

y = x;
console.log(y); 
Enter fullscreen mode Exit fullscreen mode

and here the result, it works just fine

result

Now the question is, If we changed the value of x would that affect y ? let's see

x = 100;
console.log(x , y); // what's the output??
Enter fullscreen mode Exit fullscreen mode

The change in x won't affect the value stored in y at all, here's the output if you don't believe me
result

Our first rule

In the statement let y = x; we've created a new box y and copied the value of x inside it.
We've two independent boxes and that makes sense, if you have two copies of the same book cutting a page form one won't affect the other.
so our first rule is Primitive and its copy are two different variables with the same value
copying primitive

practice time

Try to figure out the output of the following(answered in the comments below, but try to figure it out yourself)

let str = "hello world";
let copy = str;
str.toUpperCase();
console.log(str , copy); // what's the output ?
Enter fullscreen mode Exit fullscreen mode

Copying objects

Objects are stored and copied differently, they're stored and copied by reference

What's a reference ?

It's simply an address in memory, when you initialize some variable (obj for example) and assign it an object you're storing the address of that object in memory and when you try to perform an operation on that object it's like telling Javascript to go to that address and perform some operation.

I like to think about references like I'm looking for {name : "anwar" , age:19} inside the Javascripts engine's memory and the variable obj telling me "hey, the object you're looking for is right over there"

enough with the theoretical talk and let's look at an example

let obj = {name : "anwar" , age:19};
obj.age++;
Enter fullscreen mode Exit fullscreen mode

In this code the variable obj is a reference(address in memory) to {name : "anwar" , age:19} this is how it might look
objects
now the line obj.age++; remember obj is the reference(again, an address in memory) so this statement means : "go to the object at the following address and increment its age property by one"

what happens when you copy an object ?

previously I mentioned that objects are copied by REFERENCE it means that when you copy an object you're copying the reference of the that object, the object itself isn't duplicated.

for example :

let obj = {name : "anwar" , age: 19};
let copy = obj;
Enter fullscreen mode Exit fullscreen mode

this is how it looks
copying objects

obj and copy are two variable that store references to the same object, they both point to the same object

our second rule

Now if we wanted to access or modify {name : "anwar" , age: 19} we can do that using the variable obj or copy as they're referencing the same object.
so our second rule an object and its copy are references to the exact same object

so if we mutated obj the same change will happen in copy(and vice versa) because they reference the same object

remember, mutating is changing object properties without changing the object as a whole(changing the object as a whole is reassignment)

let obj = {name : "anwar" , age: 19};
let copy = obj;
obj.age++;
console.log(copy); // {name : "anwar" , age: 20}
Enter fullscreen mode Exit fullscreen mode

what if we did the following, what is the output ?

let obj = {name : "anwar" , age: 19};
let copy = obj;
obj = {};
console.log(obj , copy); //??
Enter fullscreen mode Exit fullscreen mode

the output will be {} {name : "anwar" , age: 19} because in the line obj = {}; we're not mutating obj we're making it reference another object (reassigning it)

So remember mutating one copy mutates all copies, reassigning one copy doesn't affect other copies.

reassigning copies

comparing objects

Third rule

objects are compared by reference, meaning that objects are equal only if they have the same reference

example:

let arr = [1,2,3];
let arr_2 = [1,2,3];
console.log(arr === arr_2); // false
Enter fullscreen mode Exit fullscreen mode

Javascript compares the references of both objects(arrays are objects) and these two arrays don't have the same address in memory so the result is false
comparing objects

cloning objects

you might want to make a copy of an object that doesn't have the same reference so you can change stuff in one place without affecting other places, that's called object cloning and you can read about it here or here.

And that's it for this article, hope you understand it and find it helpful

Top comments (1)

Collapse
 
anwarr_________ profile image
Anwar

The answer to this question:

let str = "hello world";
let copy = str;
str.toUpperCase();
console.log(str , copy); // what's the output ?
Enter fullscreen mode Exit fullscreen mode

the output will be hello world hello world
no change will happen in either string because using a string method doesn't affect the original string
more on that here developer.mozilla.org/en-US/docs/G...