An object is an un-ordered list of primitive data types that is stored as a series of name-value pairs. Each item in the list is called a property. There are number of ways to create JavaScript Objects and they are shown below.
1. Creating JavaScript Objects using Object Literals
It is one of the simplest method and a common ways to create JavaScript Objects. To create JavaScript object from Object literal you simply define a property and their values inside braces like below.
var website = {name: 'Coding Defined', URL: 'www.codingdefined.com' }
Now to get the name of the website you simply type website.name which will give you an output as "Coding Defined". Lets say you want to change the object and want to add one more property (say author) and a method. We don't have to go and change our object, or change our datatype or even recompile, we can simply do it as shown below. This is because of the dynamic nature of JavaScript.
var website = {name: 'Coding Defined', URL: 'www.codingdefined.com' }
website.author = 'Hemnat Joshi'
website.about = function() { display("A programming blog") }
website.about(); // Will display A programming blog
2. Creating JavaScript Objects using Constructor Functions
Now we want to create multiple instance of object (website), all with the same structure like a Class. Since JavaScript is a dynamic nature it does not have a concept of class. But you have an option to accomplish the same concept in JavaScript using the new keyword. The new keyword is followed by a function that you create to initialize the object as shown below.
function Website(name, url) {
this.name = name
this.URL = url
}
var cdWebsite = new Website('Coding Defined', 'www.codingdefined.com');
var glWebsite = new Website('Google', 'www.google.com');
Here in the above code we have used this keyword. this keyword refers to an object, that object can be anything which is executing current bit of code. By default that is the global object. So now when we execute this website function, this referring to new empty object.
3. Creating JavaScript Objects using Object.create()
These above methods are nothing but syntactically sugar of Object.create() method to create objects in JavaScript as shown below. We have used Object.prototype to pass into the Object.create() function. And then we are creating name and URL properties with value, enumerable, writable and configurable properties. The same thing happens when we use Constructor Functions or Object Literals for creating objects.
var website = Object.create(object.prototype,
{
name: {
value: 'Coding Defined',
enumerable: true,
writable: true,
configurable: true
}
url: {
value: 'www.codingdefined.com',
enumerable: true,
writable: true,
configurable: true
}
})
4. Creating JavaScript Objects using ECMASCript6
ECMAScript6 provides functionality to create objects using the Class Structure. So to create object using Class we will do something like below :
class Website {
constructor(name, url) {
this.name = name
this.color = color
}
about() {
display("A programming blog")
}
}
var website = new Website('Coding Defined', 'www.codingdefined.com')
Behind the scenes ECMAScript6 Classes are creating the classes same way as other methods shown above. Please Like and Share the CodingDefined Blog, if you find it interesting and helpful.
No comments:
Post a Comment