5.8 Enumeration of properties of an object

So here we have this circle object with the radius property and the draw method. Earlier in the course, you learned how to use the for in and for of loops to go through the properties of an object. So in this video, we're going to go over it one more time to make sure you understand how everything works. So first, let's take a look at the for in loop. So we're going to do a for let in key in circle. With this, we can go through all the properties and methods of an object. Now we can record the key on the console, so we have a radius / radius and draw, and if you want to get the value of a property, we use the bracketed notation here. So as a second argument here, we pass the key circle. So we use the bracketed notation to get the value of that key or property. Save the changes so you can see that the radius value is 1 and the draw value is a function. And this is the implementation of our draw function or draw method. Now we also have this new for loop of, let's take a look. So, we do a for let key of circle, console.log of key, now when I save the changes, we get an error, the circle is not iterable. So earlier I told you that the for of loop can only be used with iterables such as arrays and maps. You haven't seen maps yet, you'll find out about them later in the course, what you need to know is that an object is not iterable, so we can't iterate it using a for of loop. However, we have this method object point keys From circle. With this, we can get all the keys of our circle object, and it will return an array. And since arrays are iterable. We can use the for loop of to iterate them. Now save the changes, again, we get radius and draw. Now let's take a closer look at this method here. So earlier you learned that this object is a built-in constructor function. Somewhere we have this constructor function like this, and whenever we create an object using the object literal syntax, internally it's translated into a call to this constructor function. So whenever we create an object using the object literal syntax, like this one, the value is 1, internally it's translated into a call to this object constructor function. So it looks like this, New object. Also, you learned that all functions in JavaScript are objects, so, although they have properties and methods that we can access using dot notation. So, when we type object dot we can see all the properties and methods defined in this object, so here we use the keys method, and this method returns an array of strings that contains all the properties and methods of this object. We have another similar method for object point keys. Let me reproduce that, this other method is called entrys. So instead of returning the keys as an array of strings, it returns each pair of values as an array. Let me explain this in detail. So let's rename the key to entry. And to do this, we can press ctrl f2, to rename all references to this key variable. Let's change that to entry, we can see that it's updated here as well. Save the changes. So you can see that each entry is an array, the first element of this array is the key and the second element is the value. So this is also another way to access all the properties and methods of an object. And finally, sometimes you want to see if a given object has a given property or method. To do this, you can use the in operator. Here is an example. If radius as a string in circle a message like yes is displayed on the console. With the in operator, you can see if a given property exists in a given object. Save the changes, so we get yes here, if I change radius to color, we won't see the yes message now. Save the changes, the yes disappears. So the easiest way to enumerate the properties of an object is to use the for in loop, but we can also use the for of loop with the point key object and point entries object and finally to see if a given property or method exists in an object, we use the in operator. That's it for this video on enumerating the properties of an object in JavaScript, we'll meet again for a next video