A property in JS object is a relation between name and key.
Above code is a jQuery code snippet which sends a post request to given URL. In this example, you can see a property “Complete” which invokes a function as soon as the request is completed. Let’s see how this function works.
In the above example, we have an object “me” having two properties, name and greeting which is in actual not a property but a function. We can assign this function using dot syntax such as me.greeting or using this keyword.
While creating JS objects, one should keep these basic characteristics in mind.
- An object is always encased in curly brackets.
- Property value can be of multiple types including integers, strings, arrays and other objects
- Property value can be of multiple types including integers, strings, arrays and other objects.
- Property name can be unquoted; however, they must be quoted if they contain special characters.
We now know how to create a JS object within a website, it is now time we see how we can access this object. Let me demonstrate this with a small example.
As you can see in the above snippet, we can use dot syntax or bracket notation to access different properties of the object.
Here is the output of what you have written above. As you can see, we now have a complete object with its information in the console of the web browser.
Also, we can recall functions just like we used to do in other programming languages.
When you create one object inside another object, it is called a nested object. As for those who have queries, Yes! you can also create a nested JS object. Here is an example of how you can do that.
Iterating over Key Values
Suppose, you have an object with properties and you want to iterate on all of its properties. This can be achieved with the help of a FOR loop.
Here is an example:
Your Object “menu” has three properties. Once we use the FOR loop to iterate this “menu” with its key, we will get the following results:
Iteration 1: Key: width value:300
Iteration 2: Key: width value:200
Iteration 3: Key: width value:Menu
Object variables are references
By reference, it means an object is nothing but holding a reference to another object. This can be easily understood with an example.
As you can see in the above example that we first declared an object “user” and another object “obj”, which was equal to “user” in the second line. Since, obj is just a pointer and is holding reference to a user object, when we change the [name] property of “obj” it actually changes the overall value of the “user” object. This can be seen when we send user.name to console and we see “Peter” as a result on the output screen.
So “obj” is nothing but a reference/pointer to the object “user”. Any changes made to “obj” is actually pointed towards “user” object.
We see have a function name “Tweet” as a constructor. This constructor accepts parameters on its creation i.e. text and username. So, whenever an object of this function is created it needs to have these two parameters to start with. Every statement written in constructor is called at initialization time of the object.
nd tweet_2 being created. Keep in mind that we have to pass the text and username parameters as well.
This is an important OOP concept which serves the purpose of reusability. You can now create as many objects of Tweet you want and all of them will have these properties and method in them by default.