Back to: JavaScript Tutorial For Beginners and Professionals
How to Create Objects in JavaScript?
In this article, I am going to discuss How to Create objects in JavaScript using Literal and Constructor Functions with Examples. So, at the end of this article, you will understand the following pointers in detail.
- What is object-oriented programming?
- How to Create Objects JavaScript?
- How do we create a Literal Object?
- Can we create instances of a literal object?
- How to create an object using the constructor function?
- When to use Literal objects and when to use Constructor objects in JavaScript?
What Is Object-Oriented Programming?
We create applications for peoples or we can say for business. So, it is very essentials that our application should represent entities or objects of the business or peoples for whom we are creating the software. For example, let say we are creating an application for a hospital. In our code, if we represent entities of the hospital such as Patients, Nurses, Doctors, etc. then our code is going to be more maintainable, it will be easier to give knowledge transferable to new people, and so on. This approach of representing real-world objects in our code is termed object-oriented programming.
How to Create objects in JavaScript?
Let us proceed and understand how to implement object-oriented programming in JavaScript. In this article, we will keep the focus on different ways to create objects in JavaScript. In JavaScript, we can create objects in two different ways. They are as follows:
- Literal
- Constructor Functions
Creating JavaScript Object using Literal:
Before understanding how to create an object using JavaScript Literal, let us first try to understand the meaning of Literal. Please have a look at the below image. Here, you can see in the below image, we are saying the name is Anurag, he is working for DotNetTutorials, his experience is 10 years and Salary is 10000. From this information, if we want to conclude a basic meaning then we can say he is an Employee. In the below example, the Employee is nothing but a Literal.
Let us see how to represent the above and create an object using JavaScript Literal. Please have a look at the following image. Here we are representing the data using key-value pair separated by a colon and representing these data using a literal called Employee.
In Literal, what we are doing is, we are defining comma-separated key-value pairs which are wrapped within a pair of curly braces and then we assign it to a variable, that what you can see in the above image. Once you create the object, then you can consume that object as shown in the below example. Here we are accessing the members using the object and dot operator followed by member name.
<html>
<head>
<title>JavaScript Literal Example</title>
</head>
<body>
<script>
var Employee = {
"Name" : "Anurag",
"Company" : "DotNetTutorials",
"Experience" : 10,
"Salary" : 10000
};
console.log("Name : " + Employee.Name);
console.log("Company : " + Employee.Company);
console.log("Experience : " + Employee.Experience);
console.log("Salary : " + Employee.Salary);
</script>
</body>
</html>
Run the above code and open the browser console window by pressing the F12 key and you should see the following in the browser console window.
Creating JavaScript Object using Constructor Function:
Let us proceed and understand how to create a JavaScript object using the Constructor Function. Creating an object using the Constructor function in JavaScript is a two-step process. As you can see in the below image, first we create one function and initializing the members using this operator. In the second step, we create an object using the new operator followed by the function name.
Once you have created the object, then you can access the members using the object name dot (.) operator followed by the member name as shown in the below example.
<html>
<head>
<title>JavaScript Literal Example</title>
</head>
<body>
<script>
//Step1: Creating Constructor Function
function Employee() {
this.Name = "Anurag",
this.Company = "DotNetTutorials",
this.Experience = 10,
this.Salary = 10000
};
//Step2: Creating object using the Constructor Function
var Emp1 = new Employee();
console.log("Name : " + Emp1.Name);
console.log("Company : " + Emp1.Company);
console.log("Experience : " + Emp1.Experience);
console.log("Salary : " + Emp1.Salary);
</script>
</body>
</html>
Once you run the above code, you will get the following output in the browser console window. You can open the browser console window by pressing the F12 Key.
So, we have two ways to create an object in JavaScript i.e. using Literal and using Constructor Function. Now the question that should come to your mind is when to use Literal and when to use Constructor Function in JavaScript to create an object.
When to use Literal and when to use Constructor Function in JavaScript to create an object?
Let us understand in which scenarios we need to use Literal and in which scenarios we need to Constructor Functions. Please have a look at the following image. If you want to create multiple instances of an object, then the only way of doing so is Constructor Function. But if you want to create a Global object or you can say a singleton object which must be shared throughout the HTML, then you should go with the Literal way of creating the object.
Using the Literal way, you cannot create an object using the new operator. If you try to do so, you will get an error which is shown in the below example. As you can not create an object using the new operator, this means only one instance exists of that object.
<html>
<head>
<title>JavaScript Literal Example</title>
</head>
<body>
<script>
var Employee = {
"Name" : "Anurag",
"Company" : "DotNetTutorials",
"Experience" : 10,
"Salary" : 10000
};
var emp1 = new Employee();
</script>
</body>
</html>
Now if you run the above code, then you will get an error which you can see in the browser console window as shown below. It is clearly saying that Employee is not a constructor and hence you can not create an object using the new operator.
So, in your project, if you want to create a global object or singleton object which must be shared in the whole HTML, then you should go with the Literal way. But if you want to create multiple instances of an object, then you need to go with Constructor Function. In the below example, we are creating three instances of the Employee object.
<html>
<head>
<title>JavaScript Literal Example</title>
</head>
<body>
<script>
function Employee() {
this.Name = "Anurag",
this.Company = "DotNetTutorials",
this.Experience = 10,
this.Salary = 10000
};
//Instance1
var Emp1 = new Employee();
console.log("Name : " + Emp1.Name);
//Instance2
var Emp2 = new Employee();
console.log("Company : " + Emp2.Company);
//Instance3
var Emp3 = new Employee();
console.log("Experience : " + Emp3.Experience);
</script>
</body>
</html>
In the next article, I am going to discuss Prototypical Inheritance in JavaScript with Examples. Here, in this article, I try to explain How to Create Objects in JavaScript using Literal and Constructor Functions with Examples. I hope you enjoy this How to Create Objects in JavaScript using Literal and Constructor Function article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.