What is an Object in JavaScript? : Part II
Tags: javascript, objects, webdev, codenewbie
Published: 2020-07-27 20:49:59

In this post we will go into a bit deeper understanding of how an object is structured, enumerating properties of an object, property descriptors, etc.So if you haven't checked out my previous post [What is an Object in JavaScript? : Part I](https://dev.to/ahmedtahir/javascript-fundamentals-introduction-to-object-literals-40jn) where I have discussed the basics of objects, I highly recommend you check that out first.

So let's go ahead and create an object `person` which has 2 properties: `name` & `age`. If you notice here that both of these keys are of type `string`. In javascript an object key can only be a string. What if we want the property name to be a number and not a string. It is not possible to have a key which is not a string. But what if we want a number as a key?
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sr9dls8po5gntpfuh2sx.png)

#### Square bracket notation[]:
At first square brackets may just seem as an alternative to the dot notation to access a property but in fact, it has some unique applications. Using the square bracket notation, you can actually create a `number` as a key, define a key with a `white space` in it, also define an `empty string` as a key.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2wry19ds63dx8yvgftme.png)

Now this is really weird!! Lets take a moment to let that sink in. So what is happening internally? When we use the `[]` bracket notation, anything inside it is **stringified** by javascript. For example, in the above code, when the key `404` was added to `person`, javascript calls the `'404.toString()'` method, and will use this result string as the new key. Well we just used a number as a key, I wonder is it possible to use a function as a key?

#### Function as Key of an object:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/er2d5a162du9gvz5o08y.png)
Yes, we can use a function as a key using the `[]` bracket notation. Remember that javascript calls the `toString()` method implicitly if you use a key other than string type or while using the bracket notation. In the above example, when we write `obj[funny]` javascript will call the `funny.toString()` method i.e. it will convert the whole function into a string & will use it as a key.If you print out `obj`, you will see something like this.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u52g3bgpnk4gatoa40u0.png)

I know, JavaScript is funny that way. The question now is, how can we invoke the `bunny` function which is the value assigned to our `key(funny)` which is also a function. Calling `obj.funny` or `obj.funny()` simply won't work. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3l4ob2fncz7e1i2o48fw.png)

#### Enumerating object properties:
We can iterate through the properties of an object. There are three native ways to list all the object properties:
1. `for...in`: This method traverses all enumerable properties of an object and its prototype chain.
2. `Object.keys()`: This method returns an array with all the own (not in the prototype chain) enumerable properties' names of an object.
3. `Object.getOwnPropertyNames()`: This method returns an array containing all own properties' names (enumerable or not) of an object. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nwtggjs4t9vs340jqe0z.png)

####Property Descriptors:
Every object property in javascript has its own property descriptors which hold additional information about that property. Further more each property descriptors have certain inbuilt attributes defined by javascript. They are mainly divided into 2 categories: `Data Descriptors` and `Accessor Descriptors`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ie3tr41ufkdtjodmnne.png)

In this post, I'll be talking about data descriptors only. We can very easily in javascript access the property descriptors of an object property using the in-built method `Object.getOwnPropertyDescriptor(obj, 'name')` where obj is the reference object and name is the property name.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/njnc7jjg1kvuxpcosxle.png)

Here the value of the property `name` of person object is `Betsy`, is writable(can be modified), is enumerable, is configurable. Likewise we can also change these default attribute values of a property descriptor as per our needs using the in-built `Object.defineProperty(obj, 'name', {descriptor})` method. An example illustrating its usage is given below.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zasbcrd508g8ibor22it.png)

And that is all about objects in javascript that you need to know for a head start. The predefined `Object` type of javascript however has a lot of other cool useful methods which can also be used to leverage performance of your application. Let me know if you guys have any questions. You could drop them in the comments section below. Happy learning !!....😊😊