Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Compose Objects with Object.assign to Create a Direct Copy

    Tyler ClarkTyler Clark
    javascriptJavaScript

    Coupling objects together can create a brittle relationship. If the prototype object is mutated or replaced later in development, that can cause issues to any new implementations of 'child' objects that use those properties. Instead, let's use Object.assign to compose objects. This method creates a direct copy of all properties and does not reference the source object's properties in memory.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 Let's create an object and assign it to a variable called parent. We'll give it a property of hair with a string of brown and a method called heightInInches, which returns this.height * 12.

    00:11 Then we do const child = Object.create, passing in parent. child.height = 6. Then if we console.log child.heightInInches and invoke it, we'll get a return of 72.

    00:27 This is a great example of prototypal inheritance. We have a parent-like object with two properties. Because we use Object.create, passing through parent as the designated next-in-line prototype chain object, we're given a brand-new object.

    00:42 The method heightInInches works in this case because we've assigned the parent object to be the prototype object of the child object. If we did parent.heightInInches and assigned it to a function that just returned true and then console.logged child.heightInInches, you would see that we now get true.

    01:05 It's important to understand that when dealing with prototypal inheritance, you need to remember to not update parent-like objects because it can mess with child implementations further down the road that depend on those properties.

    01:18 As a developer, I would expect to still see 72 here and not true. Instead of relying on the prototype chain that references objects, let's go and change our Object.create to Object.assign. We'll pass through an object literal that has height of six and then ", parent."

    01:38 Now we can remove this child.height. If we look at console.logs, they're now both 72. This is because the Object.assign method is used to copy the values of all innumerable own properties from one source to a target source. Then it will return this target source.

    01:58 Now our child object has a direct copy of all the properties that live on parent. It's not being referenced anymore through the prototype chain. This method heightInInches actually exists on the child object.

    Discuss

    Discuss