Welcome back.
Let's talk about passed by reference versus passed by value to finish our discussion about JavaScript
types.
Now in the previous video I said that primitive types are immutable.
What does that mean.
Well it means that we can't really change them in order to change them.
We need to completely remove the primitive type and let's say if variable A equals five.
Well in order for me to change what that five value is I have to literally move it from memory and create
something new like a equals 10 I can really modify it just something new gets created and primitive
types are exactly like that when I assign a variable a to five somewhere in memory variable a is going
to contain and reference the value five if I do variable B equals two let's say 10 again same thing
and they don't really know of each other's existence.
This is what we call pass by value objects on the other hand are what we call pass by reference let's
write some code to figure out what this really means.
If I do variable A equals to five and then I do variable B equals to 10 well a now has an address of
where this primitive value five sits in memory.
And same with b b has an address of where the primitive value 10 sits in memory.
What if I do B.
Very Bobbie equals two.
Hey what happens then remember primitive types they're passed by value when we do pass by value.
Well what if I do something like B plus plus here.
So that is add one to b if I console dot log a I have five and if I console dot log B I have six and
this is because of past by value all I did or all the JavaScript engine did was copy the primitive type
value five as if I was doing B equals five so that now B has a reference to the value primitive type
five all we did was copy the value so looking at this this diagram should make sense any time even though
we did B equals to a we simply copied the value and put it into a new memory space in our machine remember
our memory heap or our stack where we store information we just simply made a copy they don't really
have any connection whatsoever and that's what passed by.
Value meets pass by value simply means we copy the value and we create that value somewhere else in
memory.
Now let's see how objects are different unlike what we had before or let's keep this here for now just
so you can see if I create an object let's say Object 1 and object 1 has name of Yao and let's say this
is a user that also has a password with 1 2 3 as the password super secure I now and we're also going
to create another object let object to and this is going to be well we can just copy the first object
so object to an object one should be the same right but what if I go ahead and with object 2 I change
password to equal easy peasy what will happen then if I console dialog Object 1 and I also console log
object to
and I run whoa what just happened password has been changed both object one's password and object two's
password were updated by doing this.
And this is due to pass by reference.
You see objects in javascript are stored in memory and are passed by reference which means that we don't
copy the values like we did with primitive types.
We simply when we assigned it object one to object to we're simply said hey this is where the object
is in memory.
If we go back to the code object 1 and object 2 are both pointing somewhere in memory.
We don't know where.
Somewhere in the memory heap to a shelf that contains this information.
So all I did by saying object to equals object want is hey this is let's say the address in memory of
wherever this is located.
So that what that means is when I change object dot password like this I'm saying well change password
on this object in memory that also object one is pointing to its referencing that's where passed by
reference comes from.
Now why do you think that's a good idea.
Let's think about this.
Why is this good.
I mean it's kind of nice right.
Because by just having one object here we're saving space and memory.
We're not copying and cloning the object creating multiple version.
We can simply save memory reference just one location instead of just loading up our memory heap.
But why might this also be bad.
Well because unlike a primitive type we might have this issue where by mistake somebody else changes
a property on that referenced object.
So this is something that we need to be careful let's do another example.
And just to prove like I said before that arrays are simply objects.
Let's try this with an array.
If I do variable C and this variable C has one two three four five and then variable D is equal to C
and then finally we'll say D dot push some giant number on make sure it's a number not a string if I
console log C or let's console log D first and I run this.
I see that.
Yep.
We modified the array but because arrays are objects they're passed by reference C should also have
changed right.
Fight console log C and I run Yep C has also changed as well
we noticed something here right.
This is good.
We're saving memory.
We're not just constantly copying things.
Imagine if C was a massive massive object.
If we're copying two different parts of the code every time well.
This would create a lot of memory but then there are times where maybe we do want to own an object copy
it so that we don't modify it like this.
How can we do that well with something like an array.
There's different ways of doing it but I can simply do array an empty array and then do the cone cat
method which pushes whatever I have in C into this empty array so that when I run here you see that
C is still the same.
But if I go to D I have a new array.
It's cloned an array.
Objects are a little bit more difficult.
Let's say we had an object.
That equals a one let's say B is two.
That's a little confusing let's do a and then B B and then finally c equals C
and this object I want a copy.
I want to have this piece of code.
This object in a different location in memory.
How can we do that.
Well I can't do another object like this because it's simply going to pass by reference and we're still
going to be referencing the same object instead we can clone an object by doing something like this
object dot a sign in here the first parameter is the object to copy to which is an empty object.
And then what is the source.
So that is from which to copy the properties.
So in my case they'll be the object so that now if I change let's say object a far less new object C
to equal five if I console dot log the clone object and I run well I made a little big mistake.
Let's see here.
Knife had a semicolon instead of a comma.
There we go.
If I run this look at that the cloned object was not affected at all.
Even though we changed C to be five.
Remember if we didn't do this we didn't clone it and we just did object that would have been passed
by reference and we would see the change that we saw in the original object but because of object a
sign we were able to clone the object.
Very cool.
There's also another way of doing it and that is using the spread operator.
I can do let alone two equal object or not really.
We just create an object and then do dot dot dot and then the object nice and clean and this is a new
feature that we got in the javascript language which is really really nice and once again if I run this
code I see that clone hasn't been modified and if I do clone to
that hasn't been modified either just for a reference I'll add the original object as well to see that
indeed it is different than what we had before.
Awesome.
So cloning is great but let me ask you this what do you think will happen with the code that we have
if we have an object inside an object.
For example if C instead of just being a string is a another pass by reference object that let's say
has deep as a property and this deep is going to equal try and copy me.
I hope that makes sense.
Let me adjust the indentation here so you see it better.
As to what is happening.
So what happens here.
We have a object that is referenced somewhere in memory and inside of that object there is again another
pointer to another place in memory that references this object let's run this code
well nothing has changed.
Right.
I mean C has obviously changed and.
Well that's something that we already saw before.
But what if I change d this time around instead of C What if I do object dot c dot deep and deep is
now going to say hahaha what do you think will happen here let's run this code and oh no we've just
we cloned everything but it got overwritten I thought we cloned everything what happened here remember
each object gets passed by reference.
So although we cloned the object the initial object.
This is what we call a shallow clone it clone the first level.
So that is the memory address in this object but within this object there was another address to another
object.
So again remember this is just another address that we had someplace in memory and this address.
Well it never changed.
It always referenced this object.
So this is shallow cloning where we can only clone the first layer.
That's a big problem right.
How can we do deep cloning and the way we can do this is.
Well a little funky we use Jason we say let super clone and we're going to use the Jason dot pass method
and this is beyond the scope of the course.
You can read up on what Jason pass does.
But this Jason object is going to say Jason dot stringy ify let's make this a little bit bigger.
There you go.
We're going to string ify that is turn everything in here into a string and then once we turn everything
into a string we're going to pass it and turn that string back into an object so that if I do super
clone now
at the bottom here let's do super clone and I run look at that try and copy me super clone.
Let's make this a little bit smaller.
There you go.
Super clone version did a deep clone of the object very very cool now before.
And this video I hope passed by reference and passed by value makes sense to you.
Now I do want to give you a bit of a warning.
However if you're doing a deep clone Well you should be careful because this can have some performance
implications if this object was extremely deep a massive object.
It's going to take a long time to clone everything right.
So you won't see this out in the wild too much if you're cloning objects like this.
There's most likely some other ways that you should be doing things.
But I wanted to show you the idea of pass by reference the idea of shallow cloning deep cloning and
some of the ways that we can use objects to get the desired.
All right I hope that was fun.
I'll see you in the next video by.