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 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?
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.
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:
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.
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.
Enumerating object properties:
We can iterate through the properties of an object. There are three native ways to list all the object properties:
-
for...in: This method traverses all enumerable properties of an object and its prototype chain. -
Object.keys(): This method returns an array with all the own (not in the prototype chain) enumerable properties' names of an object. -
Object.getOwnPropertyNames(): This method returns an array containing all own properties' names (enumerable or not) of an object.
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
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.
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.
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 !!....😊😊
Top comments (3)
They may also be Symbols.
It is also worth noting that Arrays are objects, and that while numbers are effectively converted to strings, in practice they are not, unless some operation is performed which requires the string value to be exposed.
So it may be better to say that they are referred to by strings and Symbols, rather than actually being those.
Couldn't have put that in a better way myself. Yes, after the introduction of Symbols in ES6, an object key can be either a string or a Symbol. Also, all keys in the square bracket notation are converted to string unless they're Symbols. Since this post was targeted to an audience who've just started with JS, I was trying not to get into Symbols for now :)
Let's consider x[0].
Here 0 probably actually won't be converted to a string, at least until you try to look at it in a way that requires presenting it as a string.
So, I think it's worth distinguishing between "X is Y" and "X is presented as Y in some situations." :)