Object in JavaScript

Object in JavaScript. All object oriented programming languages have the feature that enable programmer to create objects in their programmes. Creating object is very important to eradicate unnecessary duplication of codes in our programme.

What is an Object  in JavaScript? An Object is a blue print  of an item which contains the basic State and behaviour of this Item. For example  a dog is an object . The sharing feature of a dog are , it barks, have  4 legs , sleep etc. There are many types of dogs on earth such as poodle, bull dog , Labrador etc. But they are still dogs , they share all features of a dog.Thus  poodle , bull dog, Labrador in programming terms are known as an instance to the object Dog.

In this sample program below,we will look into how to create object in JavaScript.I will step through the code line by line and explain how to create an object. After creating the object , the sample code below will print out the object contains inside the Array.

---

Click the below button to see what object is inside the Array Element

Create a new product :

Create new product price :

---

Check out the Code below on how to create object in JavaScript

1. In this Sample program i will need to create 2 separate function. The first function is to create the instance of the Object the second function is to print out object store inside the array.
2. First declare a new array variable call var newProduct = []; this will be use to store instances created using the object later in the program
3. Declare the new object / constructor call function myProduct(Product,Price) and declare 2 parameter ” Product,Price “in the parentheses
4. Create the function that will create a new object , and push it into the array after the user input the parameter.
5. When the Create object button is click it will call the “cObject(createProduct,productprice)”function
6. Then the Function will get the User Input from the text box and assign the value into “createProduct,productprice “
7. ” newProduct.push(new myProduct(createProduct,productprice)); “ in this command line it will create a new “myProduct “ instance and push the value into the “newProduct ” Array.
8. Now lets create the print out object function call ” outArray() ”
9. First we need to know how much is the length of the Array and then loop through every single element in the Array
10. Then we need to loop through, the object to check how many element contains inside an object
11. Finally the program will print out the results

<script type="text/javascript">
//This is  a New Array
var newProduct = [];
    
// This a object Constructor  
function myProduct(Product,Price) {
    this.Product =  Product;
    this.Price = Price;
   
    };
  
    
// This Function is to output all obeject inside the element 
function outArray() {
        newProduct.toString();
    
        function displayArrayObjects(arrayObjects) {
                    // First Check the Array Length
                    var len = arrayObjects.length, text = "";
                          //Loop through the Array

                          for (var i = 0; i < len; i++) {
                                    var myObject = arrayObjects[i];
                          //Loop through the object in side the array
                                           for (var x in myObject) {
                                            text += ( x + ": " + myObject[x] + " ");
                                                                   }
                                                           text += "<br/>";
                                                         }

                      document.getElementById("outputArray").innerHTML = text;
                                                   }
  
    
    
       
     displayArrayObjects( newProduct);
    
               
    
    
    
                      }
    
// This Function is to create an object and store it inside an array.
function cObject(createProduct,productprice){
    // Get the User Input Object product name
       createProduct = document.getElementById("createObject").value;
    // Get the User Input Object product price
       productprice = document.getElementById("createProductPrice").value;
       
       newProduct.push(new myProduct(createProduct,productprice));
}
    

Check out how to use for loop in JavaScript here

Check out JavaScript Development Communities over here