Hello, and welcome to Techsith tutorials
In last tutorial we looked at a method name
Object.setPrototypeOf which allows you to use one objects method into another object
Using prototype link. In this tutorial, We are going to look at a method called "Object.assign()".
So instead of setting the prototype link ,object
Assigned helps you copy
properties of one object into another object.
This tutorial is part of a much larger series on overall object oriented programming.
So if you want to start from the beginning you can do so. I'll provide a link here at the top.
So, let's start with this object called Toyota,
Which has two method drive and break and it simply returns a string and this is an object literal.
I'm going to create another object call
Camry.
This will have it's own method called Wi-Fi.
It will just return
'using Wi-Fi' I can use object.assign() method method to Copy all the
Toyota's properties into Camry.
So, the way it would work is, I would say Object.assign and pass
Camry and
Toyota
now if I look at the
console.dir(camry)
I
Should see all the methods copied.
So, if I run it I would see camry methods with all three methods.
Two from the Toyota and one of it's own. What if I had my own 'drive()' method here
in the Camry?
and it would say
'driving
Camry' if I run it. I
Would have two methods break() and drive().
Basically it picks one of the drive and it's the copied one, the last one .
I can check it by
running the
Drive method.
If I run this I'll get 'driving Toyota'. Unlike the other method, Object.setPrototypeOf()
Which keeps its own method
here because the methods are copied, it will overwrite the
local method, If you have a name collision. One of the
Utility of Object.Assign() method is to create a clone.
So, let's say, if I have a Toyota object, and I want to create another object
From it. I can do it.
I would take an empty object
like and
Copy all the
Toyota's properties into this empty object and I would return a new object. I
would just call it
'CopyToyota'
If I look at the 'CopyToyota' object
It basically copied all the methods to it, but be careful, here
this is doing a shallow copy. Which means it's just basically taking all the properties and
copying it . It doesn't do anything to the prototype, so if you have any prototype methods
They don't get copied over, so this is only a shadow copy not a deep copy.
So you can make it clone or you can actually add a new properties to any object. let's say if I have
Toyota here, and then I can pass an object which has a method
called 'Wi-Fi'
which
returns 'using Wi-Fi' and you can add property called color red.
If I run it,
it would get an object with an additional method and a color property.
One of the cool utility I found of
Object.assign() is when you write a constructor. Let's say if I have a constructor
C1, Which
basically sets a bunch of properties.
let's Say 'x',
'Y',
and 'z'
properties.
Inside the function you have to say 'this.x = x'
'this.y = y'
, and 'this.z = z'
But ,instead of this , you can
Write it like this,
'let C1 = function( x, y, z)'
and inside you would say
Object.assign()
and
then you can pass all the properties x
y and Z.
So, basically, it would add
x,y, and z to 'this' . One of the most important utility of object or design is to
build 'function mixins' so in next tutorial we are going to look at function mixins and
how to use them.
I hope you learn something from this tutorial, and if you did please like subscribe and provide a constructive comment. Thank you!