Exponent operator in ES2016 - ES7

Array Includes method in ES2016 - ES7

Iterate over properties of an object with ES2017 Object.entries()

Iterate over values of an object with ES2017 Object.values()

String Padding in Javascript using padStart and padEnd functions

Clone Objects and Copy Properties with ES2017 Property Descriptors

Async keyword in es2016 

Learn JavaScript es2016 and Beyond

Property descriptors describe the attributes of a property (its value, whether it is writable, etc.). 

We will look at `Object.getOwnPropertyDescriptors()` and present different use cases that it can be used in such as `cloning objects`, `copying properties into an object`.

Property descriptors are not available in all browsers, example code will be added when available.

https://app.egghead.io/api/v1/lessons/javascript-clone-objects-and-copy-properties-with-es2017-property-descriptors/subtitles

Instructor: [00:00] Let's say we have an object named tiger. It has a key value property. The key is name. The value is judge. You also have a get a function with the name type. We've just written big cat.

[00:12] Now let's look at the get on property descriptors meta. We will console log get on property descriptors and pass in the tiger object. If we run the file, you'll get the output and key value pass, each key being each property of the tiger and each value being the value of the key.

[00:31] We also get the get a function as a key value pair where the key is type, the name of the function, and the value has the get on set methods. Each property descriptor has a set of properties to describe the attributes of this particular property this is inside the tiger object.

[00:49] Let's suppose we had the property name. It has an attribute stating its value, stating its writability, and then if it's enumerable or not and also its consolability. This comes in really handy when you're playing around with internals as an object and want to do object manipulation.

[01:08] This is particularly useful when you're cloning an object. Let's create a constant and name it clone. Then we'll use the object.create method. It takes in two parameters. The first one is the object that needs to be cloned. The second parameter is the property descriptor set which we get from the object.get on property descriptors method.

[01:31] Let's log the clone and see the output. You can see that we have two key value packs, one with the key name and the value judge and the exact type, get a function.

[01:44] Let's take this a step further and dig into the clone object and see all of its property descriptors. We have the name and type key value pairs from the original tiger object. It exactly matches the name and the type key value pair in the clone object.

[02:03] Let's clear the terminal. Let's also remove this clone. Now we'll look at copying properties into an object. First of all, let's make a small change. We'll change the getter into a setup. We'll pass in the value as an argument. Then we'll simply log the value. Let's create a constant target and make it equal to an empty object. Now we'll assign the additional tiger object to our target object.

[02:34] Let's check the property descriptors inside the target. If we are in a Node file, you can see that the name is exactly replicated. But the type setter method is not replicated exactly. The get and set methods are not successfully copied. We have a value of undefined.

[02:57] To prove this further, we can use the target.type and set it to something like big cat. If type was successfully cloned, then this will be invoked. We would log the value that is passed. In this case, that would be big cat.

[03:16] If we run the file again, you can see that there is nothing printed over here. That means the type function that I set the method is not replicated or is not copied into the target object successfully.

[03:30] We can fix this by using object.define properties method. We'll pass in the target and pass in the same get on property descriptor method to copy the property descriptors from the tiger object into the target object. Now if the type is successfully copied, we should have the log value.

[03:52] If we run the file, you can see that we have big cat at the end of the log. That means the type is now successfully copied. But the type value is still undefined.

[04:02] For this, let's move the object to a different properties method, a step [inaudible] . We'll log it after the different properties method. Now if we run the file, you can see that our type also has the get answer to methods defined.

[04:19] There are a couple of things that you need to remember when dealing with classes specifically. Here we get the property descriptors from the direct class declaration. Then we get the property descriptor from an object that is created using the class.

[04:35] If we run this file, you can see that we have the prototype object only when we get the property descriptors from the class itself. If you take a look at the property descriptor of the instantiated object, it only has the name key in it.

[04:51] That means the prototype object only comes when you get the property descriptor from the class but not when you get the property descriptors from the instantiated object.

Clone Objects and Copy Properties with ES2017 Property Descriptors

Share this video with your friends

Course

Learn JavaScript es2016 and Beyond