Using Javascript objects

How to use Javascript objects.

  • In contrast to the primitive data types such as numbers and strings, objects have the ability to contain a collection of different data types, not only a single value.
  • An object will consist of an unordered collection of properties, each has a name and a value.
  • A property name can be a JavaScript identifier or a string, and each property value can be a primitive datatype or a reference to another object or function.

Creating Javascript objects with properties.

  • The easiest way to create an object is to specify a comma separated list of property name/value pairs, enclosed in curly brackets.
    var person1 ={"firstName":"George","lastName":"Collins" };
    var person2 ={"firstName":"Ricard","lastName":"Marvin" };
    var peoples={"company":"Google",p1:person1,p2:person2};
  • Javascript does not have any class, such as Java and C++, that are used to create objects.
  • In Javascript, new objects can be created using a constructor function type.
  • Constructor function types can be build-in objects like Object, Number, String and Date or it can be constructor function types that you creates on your own with the function statement.
  • So, to create an object with the constuctor function Object (base object for all other objects) you must use the keyword, new.
  • You can also use Object as a function which also returns an object.
  • This means we can create an object out of the constructor function, Object, in three ways:
    var myobj1={}; // is an ease way to create an empty object
    var myobj2= new Object(); // using constructor (Object) to create an object
    var myobj3= Object(); // using Object as a function to create an object

Using properties to unique objects.

  • All objects you create in Javascript inherits at least the properties from the Object object.
  • Whatever inherited property or not, all properties in an object are accessible in two ways:
    1. Using square bracket notation.
    2. Using the dot notation.
  • You are free to both read and write the value of all the properties this way, as they all are public.

    Example:
    <script type="text/javascript">
    var person1 ={"firstName":"George","lastName":"Collins" };
    var person2 ={"firstName":"Ricard","lastName":"Marvin" };
    var peoples={"company":"Google",p1:person1,p2:person2};
    // using square bracket .
    document.write("p1.lastname: "+peoples["p2"]["lastName"]+"<br>");
    // using dot notation.
    document.write("p1.firstname: "+peoples.p1.firstName+"<br>");
    // using an inherited method from the Object object
    document.write("people contains p2 is: "+peoples.hasOwnProperty("p2")+"<br>");
    document.write("people contains p2 is: "+peoples["hasOwnProperty"]("p2")+"<br>");
    </script>
  • Remember that a property value can be a function which you can execute (it is functions are values).
  • A contained object in an object can also contain an object, that contain an object and so on. This gives a chain of objects that can be accessed using the same notation as above.

    (variableName.object1.object2. ..... or variableName["object1"]["object2"][...]...)
  • At run-time you can also change the value of a property, add a new property or delete an existing property in an object.
  • To delete a property you must use the Javascript delete statement.

    Example:
    <script type="text/javascript">
      function Iam(){
        alert("I am "+person.firstName+" "+person.lastName);
      }
      var person ={"firstName":"George","lastName":"Collins",who:Iam };
      function show(personObj) {
        for (var prop in personObj){
          if (prop!="who"){
            document.write(prop+"="+personObj[prop]+"<br>");
          }else {
            personObj[prop]();
          }
        }
        document.write("<br>");
      }
      show(person);
      // add a property
      person.company="Google";
      // delete a property
      delete person.who;
      show(person);
    </script>

© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.