5.6 Working With the Object Type

Hi folks. In this lesson we're going to look at some of the properties and methods that we have available through the object constructor. So let's start with the prototype property. All objects in Java Script are descended ultimately from the object constructor. And the properties and methods that it has access to are inherited from this prototype object. This object is considered a live object, so if we modify properties or add new properties or methods to it all other objects that are descended from it will inherit from them. Let's take a look at an example. So let's just see the output in a browser and then we'll talk about what actually happened. So we do see a type error here. Unfortunately, this is an issue with browser sync rather than a genuine JavaScript error. Above the type error we can see that the string special has been logged to the console. So let's ignore the type error and go back and look at the code. So first of all, we created a brand new object literal, and we didn't add any properties, or values, or anything to the object at all. We then used the upper case O object to access the prototype of all objects. And we added a new property to the prototype called mySpecialProperty, which we set to a string which just says special. We then logged the new property that we added to the object prototype, mySpecialProperty, via the new object literal that we created, newObj. And as you saw from the console, we could access this string special even though we added it to the prototype after we defined our object literal. It still inherits it from the prototype. And that's what I mean when I say the prototype is considered a live object. We can also make use of the prototype property when working with other types of objects in JavaScript like numbers or arrays. For example if we wanted to add a new method to all arrays called head, we just returned the first item in the array we could do this. And we can that it has pulled out the first item from the array. So let's look at exactly what we did in this second example. So we first defined a new array instance, which contains three items. And these are just the numbers 1, 2, 3. We then modified the prototype of the array constructor so that's array with a capital A. To add a new method called head, this method just returns the first item on the array that's being called on. And in this context, that's what the key word this refers to. This refers to the array that the method is being called on. Don't worry too much about this for now. We're gonna come back and look at the this object in much more detail a bit later on in the course. And on the last line of the example there, you can see that we invoke our new head method on the array instance that we created. And when we saw the outputs in the browser's console, we could see that it simply output to the first element from the array, the number one. So the prototype is very, very powerful. And we need to be very, very careful when we're updating the prototype of any of JavaScript's built in or native types, just in case we override a method that already exists. Some developers take a very strong stance against modifying the prototypes of any of JavaScript's built-in objects. Sometimes, however, it can be useful to add a polyfill for a method, which is supported in some, but not all, browsers. In this case, we would check whether the property already existed before trying to add it. So let's just make our previous example a little bit more defensive and robust, just in case JavaScript does decide to add a head method to arrays in future. Messing with the prototype is both powerful and potentially problematic. So do make sure you understand the implications of using it fully before you proceed with it. Going back to the object constructor now, the prototype property is really the only property that we'll ever use. So let's move on to look at some of the methods which are available through the object constructor. A very commonly used method is the keys method. This method returns an array containing just the keys from the object which it is called on. This is very, very useful, because it means we can use it with a 4 each array to iterate over an objects properties, while ignoring any properties that might be coming from the object's prototype. So first of all, let's add a new object. So we've defined a new object let rule, again, called newObj, which just contains a single property which has a key called prop1 and a value of the string, property1. Now let's use the keys method to iterate just the own property, prop1, which we added to our object let rule. And, let's check the output now in the browser. And we can see that we have managed to extract the value of an object using "for each." When usually for each only works with arrays. So the keys method is called directly on the object's capital O constructor. And we pass the object whose keys that we want to get as an argument to the keys method. If we were to go ahead and add a new property to all objects via the object constructor's prototype. When we go back and check the output in the browser, we find that it is still only logging property one. Even though our object literal will contain this test property the test property is inherited from the prototype of the object constructor. And so the keys method We’ll completely ignore it. So this is a useful way of filtering out properties that might be inherited from an object’s prototype and it means that we can avoid using the has own property check that we used earlier in the course. I’m just going to comma out this line once again because otherwise, we’ll see that horrible error in the browser. Another thing that we can do is freeze an object and that prevents any other code from deleting any of the existing properties or changing any of their values. So to do this we use the freeze. Is method of the object constructor. The freeze method is simple to use and just takes a single argument which is the object that we want to freeze. Once an object is frozen we cannot any new properties to it. So let's see what happens when we run this in a browser now. So this time we see an error again but unlike the previous errors that we’ve seen in this lesson, this is a genuine error, and the error is coming from the fact that we’re trying to add a new property to a frozen object. So when an object is frozen, it is classed as being not extensible. We can’t extend it with any new properties or values, and we’ll see this same error message if we try to alter The value of an existing property. To avoid seeing errors in the console like this, we can check whether an object is frozen using the isFrozen method. So let's just make our code a bit safer and avoid that error. So now let's go back to the browser again. This time, we can see that the arrow has been avoided. We using the is frozen method which is another method of the capital O object constructor. And again, we passed the objects to the method that we'd like to test. And with the F statement with saying, execute the block of code if the object is not frozen. That's what the exclamation mark at the start means. So in this case the object is frozen. So, we don't try to add the new property and we don't see the arrow in the console. Once an object becomes frozen, it can never be unfrozen again. There is no unfreeze method. What we would have to do in this situation is to create a new object and copy the properties from the frozen object to the new object. We could do that using the keys and four each methods that we looked at earlier on. As a quick example to test your own knowledge why don't you see if you can do this. Similar to the freeze method but not quite as severe is the seal method. When we seal an object we can change the values of existing properties but we can't delete them and we can't add any new properties. We also can't change a regular property into a getter or a setter. We haven't covered these yet, so don't worry about them too much for now. So to seal an object, we use the seal method. At this point, we can still update the value that the new obj object contains. And we shouldn't see any areas in the console if we go back to the browser. But if we try to delete a property or add a new one, we will see an error because sealed objects do not allow this. [SOUND] So we can see the message that we can't delete the property prop !1 of the object. If we want to test Whether an object is sealed, we can use the isSealed method, which works in a similar way to the isFrozen method. So if we wanted to prevent the error that we just saw in the console, we can just use the isSealed method in a very similar way to we used the isFrozen method earlier. And as before, the error message goes away. Slightly less extreme even than the seal method is the preventExtensions method which simply prevents any new properties from being added to an object. We can change existing properties and we can delete existing properties. We just can't add new ones. There was also a corresponding is extensible method, that tells us whether an object is extensible. So if we try to add a new property in this case. So if we try to add a new property to the objects we see a message saying that the object is not extensible. And now we can make the error message go away by checking whether the object is extensible before we try to add any new properties to it. So in this lesson, we looked at some of the different methods that we can use which are available from the Object constructor. and that's object with a capital O and not a lower case o. We first looked at the prototype property, which allows us to add new properties and methods to existing objects that may have already been created. We then looks at the keys method which we saw overtime in array, containing only the keys from an object, and we saw that this can be useful for filtering out properties that the objects may have inherited from its prototype. We then looked at how we can lock down objects to prevent them from being changed using the freeze method. And we looked at different levels of control over this that we have including sealing an object and just marking it as non extensible. We also saw how we can check for these different object states using isFrozen, isSealed, or isExtensible. In the next lesson we're going to look at some conveniences that we can make use of when using Object literal's. Thanks for watching.