What are the rules to be followed for Object Definitions in JavaScript?

In this tutorial, we will discuss the rules to follow for Object Definitions in JavaScript.

JavaScript is an object-oriented scripting language. An object contains many properties. The property consists of a key and a value. The property is known as a method when this value is a function.

Predefined objects are available in the browser. We can also define our objects. A real-life example of an object is a cup. The color, design, weight, and material are the main properties of a cup.

The object name and the property name are case-sensitive. To define a property, we need to assign a value to the property.

Now we will see the rules to define an object.

Using the Keyword "new"

Rules

  • Declare the object name and give an equal sign between the object name and the new Object().

  • Define the key with the dot operator.

  • Assign the value with the equals operator.

  • Give quotes for string values.

We can follow the syntax below to define an object using this method.

Syntax

const objCar = new Object();
objCar.brand = 'Alto';
objCar.model = 'Model';
objCar.year = 1970;

Here, objCar is the object, and brand, model, and year are its properties.

Example

In this example, we use the keyword new to define an object and display every step of object creation to the user.

<html>
<head>
   <script type="text/javascript">
      function getObjDefNew()
      {
         var objDefBtnWrap = document.getElementById("objDefBtnWrap");
         var objDefPre = document.getElementById("objDefPre");
         var objDefStr = "";
         const objNew = new Object();
         objDefStr += JSON.stringify(objNew) + "<br>";
         objNew.newkey1 = 'New Value 1';
         objDefStr += JSON.stringify(objNew) + "<br>";
         objNew.newkey2 = 'New Value 2';
         objDefStr += JSON.stringify(objNew) + "<br>";
         objDefPre.innerHTML = "<b>Object creation steps using new keyword</b><br><br>" +objDefStr;
      }
   </script>
</head>
<body>
   <h2>Define an object using <i> the keyword new</i></h2>
   <div id="objDefBtnWrap">
      <p>Click the button</p>
      <button onclick="getObjDefNew()">Click Me</button>
   </div>
   <pre id="objDefPre"></pre>
</body>
</html>

Using Object Literal

We can also define an object with the help of an object initializer. An object initializer separates key-value pairs with commas and encloses everything in curly brackets.

Rules

  • Declare the object name and put an equal sign(=) before the opening flower bracket.
  • Put an opening flower bracket({).
  • Define each key-value pair with a colon(:) between them.
  • Separate each key-value pair with a comma(,).
  • Close the object definition with a closing flower bracket{}.

We can follow the syntax below to define an object using this method.

Syntax

const objCar = {
   brand: 'Alto',
   model: 'M1',
   year: 1970
};

Here we use the object initializer format to create the object objCar.

Example

In this example, we use the object literals to define an object and display every step of object creation to the user.

<html>
<head>
   <script type="text/javascript">
      function getobjLit()
      {
         var objLitBtnWrap = document.getElementById("objLitBtnWrap");
         var objLitPre = document.getElementById("objLitPre");
         const objLit = {
            litkey1: 'litval1',
            litkey2: 'litval2'
         };
         objLitPre.innerHTML = "<b>The object definition steps with the literals</b><br><br>" + JSON.stringify(objLit);
      }
   </script>
</head>
<body>
   <h2>Define an object using <i>the object literal</i></h2>
   <div id="objLitBtnWrap">
      <p>Click the button</p>
      <button onclick="getobjLit()">Click Me</button>
   </div>
   <pre id="objLitPre"></pre>
</body>
</html>

Using Constructor Function

Rules

  • It must give the same name for the constructor function and the object name.
  • To refer to an object, should use the 'this' operator.
  • Should give the value of each key after the equal sign(=).
  • Do not give any return statement in the constructor function.

We can follow the syntax below to define an object using this method.

Syntax

function Car(brand, model, year)
{
   this.brand = brand;
   this.model = model;
   this.year = year;
}
var objCar1 = new Car('C1', 'M1', 'Y1');
var objCar2 = new Car('C2', 'M2', 'Y2');

Here we use the new keyword and this keyword to create an object.

Example

In this example, we use the constructor function to define an object and display every step of object creation to the user.

<html>
<head>
   <script type="text/javascript">
      function getObjConst()
      {
         var objConstBtnWrap = document.getElementById("objConstBtnWrap");
         var objConstPre = document.getElementById("objConstPre");
         var objConstStr = "";
         function objConst(constval1, constval2)
         {
            this.constkey1 = constval1;
            this.constkey2 = constval2;
         }
         var objConst1 = new objConst('constval1', 'constval2');
         objConstStr += JSON.stringify(objConst1) + "<br>";
         var objConst2 = new objConst('constval3', 'constval4');
         objConstStr += JSON.stringify(objConst2) + "<br>";
         objConstPre.innerHTML = "<b>Object creation steps using constructor</b><br><br>" +objConstStr;
      }
   </script>
</head>
<body>
   <h2>Define an object using <i>the constructor function</i></h2>
   <div id="objConstBtnWrap">
      <p>Click the button</p>
      <button onclick="getObjConst()">Click Me</button>
   </div>
   <pre id="objConstPre"></pre>
</body>
</html>

Using the Object's create method

We can use this method because it allows us to access the object's prototype.

Rules

  • Should use object initialization syntax for adding key values and methods.
  • The object name and the argument name of the Object's create method must be the same.

Syntax

We can follow the syntax below to define an object using this method.

const Animal = {
   type: 't1',
   viewType() {
      console.log(this.type);
   }
};
const a1 = Object.create(Animal);
a1.viewType();//t1
const a2 = Object.create(Animal);
a2.type = 't2';
a2.viewType();//t2

Here we use the object initialization format and the Object's create a method to define the object.

Example

In this example, we use the Object's 'create' method to define an object and display every step of object creation and the output of the object's function to the user.

<html>
<head>
   <script type="text/javascript">
      function getObjCreat()
      {
         var objCreatBtnWrap = document.getElementById("objCreatBtnWrap");
         var objCreatPre = document.getElementById("objCreatPre");
         var objCreatStr = "";
         const objCreat = {
            creatkey1: 'creatval1',
            creatFunction() {
               objCreatStr += "<b>Inside the Object's Function</b><br><br>" + this.creatkey1 + "<br><br>";
            }
         };
         objCreatStr += JSON.stringify(objCreat) + "<br><br>";
         const objCreat1 = Object.create(objCreat);
         objCreat1.creatFunction();
         const objCreat2 = Object.create(objCreat);
         objCreat2.creatkey1 = 'creatval2';
         objCreatStr += JSON.stringify(objCreat2) + "<br><br>";
         objCreat2.creatFunction();
         objCreatPre.innerHTML = "<b>Output</b><br><br>" +objCreatStr;
      }
   </script>
</head>
<body>
   <h2>Define an object using <i>the create method</i></h2>
   <div id="objCreatBtnWrap">
      <p>Click the button</p>
      <button onclick="getObjCreat()">Click Me</button>
   </div>
   <pre id="objCreatPre"></pre>
</body>
</html>

In this tutorial, we have learned four methods to define an object and know the rules to define an object now. The new keyword method is handier to code among the four methods we have here.

Updated on: 31-Oct-2022

238 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements