How to create an object with prototype in JavaScript ?
Last Updated :
21 Jul, 2023
In this article, we will discuss object creation & prototypes, along with understanding the different ways for object creation & their implementation through the examples. Prototypes are the mechanism by which objects in JavaScript inherit features from another object. A prototype property is also an object whose methods and properties will be inherited by any new object.
A simple object in JavaScript can be compared with real-life objects with some properties. For instance, an Employee can be considered as an object, having the properties like “name”, “age”, “department”, “id”, etc, which is unique for each employee.
Here are some common approaches to creating an object with a prototype in javascript.
- Using Object Literal
- Using Prototypes
- Using Constructor
- Using function constructor
- using functions in a Constructor function
The first method to create an object is by using Object Literal. It describes the methods and properties that the object will inherit directly.
Syntax:
let Object = {name: "value", id: "number" , category: "section"}
Example:
Javascript
let Student = {
name: "GeeksforGeeks",
age: 18,
class: 11,
roll: 34,
section: "F"
}
console.log(Student);
|
Output
{ name: 'GeeksforGeeks', age: 18, class: 11, roll: 34, section: 'F' }
Another method to create an object is by defining its prototype.
Every JavaScript function has a prototype object property that is empty by default. We can initialize methods and properties to this prototype for creating an object.
Syntax:
let obj = Object.create(Object_prototype)
Example:
Javascript
let Employee = {
id: 565,
department: "Finance"
}
let Employee1 = Object.create(Employee);
console.log("id :", Employee1.id);
console.log("department :", Employee1.department);
|
Output
id : 565
department : Finance
Approach 3: Using Constructor:
This is a function that is used to define an object and its properties. this keyword is used to assign a value to these properties of the object.
Syntax:
function Object(property1, property2) {
this.property1 = property1;
this.property2 = property2;
}
let obj = new Object(property1, property2);
Example:
Javascript
function Employee(name, id, job) {
this.name = name;
this.id = id;
this.job = job;
}
console.log(Employee.prototype);
|
{constructor: ƒ}
constructor: ƒ Employee(name, id, job)
[[Prototype]]: Object
Here, a constructor of an Employee object is defined that contains basic details of an Employee i.e. name, id, and job.
We can create an Employee object using this Employee function constructor which will inherit the properties of this constructor.
Syntax:
let Object1 = new Object(property1, property2, property3)
Example:
Javascript
function Employee(name, id, job) {
this.name = name;
this.id = id;
this.job = job;
}
let Employee1 = new
Employee('Stephen', 2364, 'developer');
console.log(Employee1);
let Employee2 = new
Employee('Maria', 8896, 'tester');
console.log(Employee2);
|
Output
Employee { name: 'Stephen', id: 2364, job: 'developer' }
Employee { name: 'Maria', id: 8896, job: 'tester' }
Approach 5: Using functions in a Constructor function
We can also add certain functions in a Constructor function, which can be called for any object.
Example:
Javascript
function Employee(name, id, job) {
this.name = name;
this.id = id;
this.job = job;
}
Employee.prototype.intro = function () {
console.log('My name is ' + this.name +
' and I am a ' + this.job);
};
let Employee1 = new Employee('Stephen',
2364, 'developer');
let Employee2 = new Employee('Maria',
8896, 'tester');
Employee1.intro();
Employee2.intro();
|
Output
My name is Stephen and I am a developer
My name is Maria and I am a tester
After creating two objects Employee1 and Employee2, we called Employee1.intro() and Employee2.intro() . At first, it will check if the property’s name and job are present in the respective objects. If not, then that property will be considered undefined. Thus, a constructor defines all the properties and methods that an object will inherit.
Similar Reads
How to get dynamic access to an object property in JavaScript ?
In JavaScript, an object is a collection of properties, where each property consists of a key-value pair. Objects are a fundamental data type in JavaScript. You can create an object in JavaScript in the following ways: By using the object literal notation, which is a comma-separated list of key-valu
7 min read
How to Remove an Entry by Key in JavaScript Object?
In JavaScript, objects store data in the form of key-value pairs where the key may be any property of the object. In this article let us see how to remove key-value pairs a by given key in the object. Table of Content Using the delete operatorUsing the filter() methodUsing Destructuring and Object.a
3 min read
How to modify an object's property in an array of objects in JavaScript ?
Modifying an object's property in an array of objects in JavaScript involves accessing the specific object within the array and updating its property. Using the Array.map() methodUsing the map() method to create a new array by transforming each element of the original array based on a specified func
5 min read
How to compare Arrays of Objects in JavaScript?
In JavaScript, comparing arrays of objects can be more complex than comparing primitive data types. We will discuss different ways to compare arrays of objects effectively, with detailed code examples and explanations. Syntax: Before going to detail the comparison techniques, let's first understand
5 min read
How to create object properties in JavaScript ?
JavaScript is built on an object-oriented framework. An object is a collection of properties, where each property links a key to a value. These properties are not in any specific order. The value of a JavaScript property can be a method (function). Object properties can be updated, modified, added,
4 min read
How to create an object with prototype in JavaScript ?
In this article, we will discuss object creation & prototypes, along with understanding the different ways for object creation & their implementation through the examples. Prototypes are the mechanism by which objects in JavaScript inherit features from another object. A prototype property i
4 min read
How to declare object with computed property name in JavaScript ?
In this article, we learn how to declare an object with a computed property name. Before beginning this article, we have to know about the javascript objects. Computed Property Names: The ES6 computed property names feature allows us to compute an expression as a property name on an object. Javascri
2 min read
How to add and remove properties from objects in JavaScript ?
We will try to understand how to add properties to an object and how to add or remove properties from an object in JavaScript. Before we go and see the addition and removal of properties from an object let us first understand the basics of an object in JavaScript. Object: An object in JavaScript is
6 min read
How to check if a value is object-like in JavaScript ?
In JavaScript, objects are a collection of related data. It is also a container for name-value pairs. In JavaScript, we can check the type of value in many ways. Basically, we check if a value is object-like using typeof, instanceof, constructor, and Object.prototype.toString.call(k). All of the ope
4 min read
JavaScript - Convert Two-Dimensional Array Into an Object
Here are the different methods to convert the two-dimensional array into an object in JavaScript. 1. Using a for LoopThe simplest way to convert a two-dimensional array into an object is by iterating through the array using a for loop and assigning key-value pairs. [GFGTABS] JavaScript const a = [[
2 min read