Create many JavaScript objects as the same type?

Front End Technology Javascript Web Development

JavaScript is a lenient object-oriented language. We'll look at various JavaScript object creation methods in this article. It is crucial to know that JavaScript is an object-oriented language based on prototypes instead of classes before moving on. It can be more difficult to understand how JavaScript enables you to build hierarchies of objects and to get an inheritance of properties and their values because of this different foundation.

Programming objects can combine variables, functions, and data structures. In other words, objects can hold values, you can use objects to manipulate values, and you can combine values into more complicated objects, like arrays, while still enjoying all the advantages.

One of the simplest methods in JavaScript for creating an object. Constructor is simply a function, and with the new keyword, it is possible to create numerous objects with the same style.

Example 1

In this example let us understand how to create object with a constructor.

In OOPs, a class is made up of two main parts: a few member functions and a few arguments. There are three parameters in this method that are equivalent to a class: name, manufacturer, and engineCapacity ( the this keyword is used to differentiate the name,manufacturer,engineCapacityof the class to the name,manufacturer,engineCapacityof the arguments that are being supplied.). Then, we merely construct an object (obj) for the bike, initialise it, and call its method.


<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      function motorBike(name,manufacturer,engineCapacity){
         this.name = name;
         this.manufacturer = manufacturer;
         this.engineCapacity = engineCapacity;
      }
      let bike = new motorBike('Honda Shine','Honda','125cc');
      document.write(bike.name +'<br>');
      document.write(bike.manufacturer +'<br>');
      document.write(bike['engineCapacity']);
   </script>
</body>
</html>

Example 2

In this example let us understand Using object literals. Literals are more compact and straightforward ways to define things. Within curly brackets, we just declare the property and values as follows −

The object literal in the above code was used to build a straightforward object called bike, which has properties like name, manufacturer, and engine capacity. Therefore, we implement the property accessor methods (Dot notation, Bracket notation) to document.write the values.


<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let bike = {
         name : 'Honda Shine',
         manufacturer : 'Honda',
         engineCapacity : '125cc'
      };
      document.write(bike.name +'<br>');
      document.write(bike['manufacturer']);
   </script>
</body>
</html>

Example 3

In this example let us understand how methods are added to the objects.

As seen below, methods can be added afterwards, just like properties, or they can be a part of the object when it is created. In the code below, the bike object had a start function added to it, which the bike object then used. Added after the object was already declared were the EngineStart() and EngineStop() methods.


<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let bike = {
         name : 'Honda Shine',
         manufacturer : 'Honda',
         engineCapacity : '125cc',
         EngineStart : function(){
            document.write('Increasing the speed in Bike Race...' +'<br>');
         }
      };
      bike.EngineStart();
      bike.EngineStop = function() {
         document.write('Lightly press the brake...');
      }
      bike.EngineStop();
   </script>
</body>
</html>

Example 4

In this example let us understand Creating object with Object.create() method.

A new object is produced using the Object.create() method by using an existing object as its prototype.


<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      const motorBike = {
         isDriving : false,
         printText : function(){
            document.write(`I always ride my ${this.name}. I won the race: ${this.isDriving}`);
         }
      };
      const bike = Object.create(motorBike);
      bike.name = 'Honda Shine bike';
      bike.isDriving = true;
      bike.printText();
   </script>
</body>
</html>

Example 5

this example let us understand to Create JavaScript Object using ES6 classes

Like any other statically typed or object-oriented language, ES6 supports the class model. Consequently, as mentioned below, an object can be constructed with javascript from a class −


<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      class motorBike {
         constructor(name, manufacturer, engineCapacity) {
            this.name = name;
            this.manufacturer = manufacturer;
            this.engineCapacity = engineCapacity;
         }
      }
      let bike = new motorBike('Honda Shine', 'Honda', '125cc');
      document.write(bike.name);
   </script>
</body>
</html>