Broad Network


Creating ECMAScript Objects by Literal Notation

Creating JavaScript Objects by Literal Notation

Forward: In this article I show you how to create JavaScript objects by Literal Notation (initializer).

By: Chrysanthus Date Published: 9 Aug 2012

Introduction

The aim of this article is to quickly make you understand the meaning of Program Objects (OOP) and how to create them in JavaScript. I assume in this article that you know the meaning of variables and functions in JavaScript, but you might not have understood JavaScript objects. There are three ways of creating JavaScript objects and in this article I show you the one that is indicated by the title (of this article). Let us start.

Note: If you cannot see the code or if you think anything is missing (broken link), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what has been typed.

Variables, Functions and Objects in JavaScript
Let us look at two variables and a function. The two variables hold two numbers. The function adds the two numbers. These are the two variables and the function:

        <script type="text/javascript">
         var num1 = 5;
         var num2 = 8;
         function add ()
                {
                 answer = num1 + num2;
                 return answer;
                }

         var result = add();
         alert(result);
        </script>

As you can see in the code, there are two variables. The function adds the values of the two variables, and returns the answer. Lower down in the code, the function is called, and the return value is assigned to a new variable, result. The last statement displays the result.

Now in programming (in a program code) you would find some functions that work with certain variables, such that if you remove one of the variables, the rest of the variables and the functions will not be very useful; if you remove one of the functions, the rest of the functions and the variables will not be very useful. In other words, the variables and functions in question form a set. The above group of statements is such a set. Would it not be nice if we had such a set in one unit? In fact, many modern programs have such sets in one unit, called an object. Many modern computer languages have each, its own syntax for creating an object. JavaScript has three ways of doing this and in this article we learn one of the ways.

Properties and Methods
A programming object fundamentally has what is called properties and methods. This is not a big deal. In the above script we have one function, which works with two variables. If we are to make this “set”, an object, then the variables would become the properties and the function would become the method. You can have more than one method in an object, just as you can have more than one property. As you can see it is not a big deal, all you have to do is to know the syntax that will make the variables, properties and the functions, methods.

The Literal Notation
A variable declaration begins with an optional, “var” reserved word, and then followed by the name of the variable. An object name is a variable name. Assume that you want to give the name, myObject to an object. You can declare the object as,

                 var myObject

To any declaration, you can assign a literal. You can assign a string (in quotes for example); a string in quotes is a literal. You can also assign a set of statements enclosed by a pair of curly braces. This pair of curly braces and their enclosed statements form a literal object. Basically, the statements consist of properties, which are like variables and methods, which are like functions. There is the use of the reserved word, “this”. “this” used within the curly braces refers to the object (having the statements). It is a substitute for the name of the object. We now look at an example.

Example of an object with the Literal Notation
The following script has the code of an object with literal notation (see explanation below):

        <script type="text/javascript">

         myObject = {
                                   numA:5,
                                   numB:8,
                                   add:function ()
                                           {
                                                    answer = this.numA + this.numB;
                                                    return answer;
                                           }
                          };

         result = myObject.add();
         alert(result);

        </script>

The first script statement is the object. You have the name of the object, followed by the assignment operator. After that you have the curly braces with its statements. Note that at the end of the curly braces, you have a semi colon (you do not have this semi colon after the closing brace in other situations).

Let us turn our attention now to what is inside the curly braces. Inside the curly braces, you have two properties and one method. The properties and methods in the curly braces are separated by commas. These properties and methods are like statements in the object literal but they are separated by commas and not semicolons.  That is, properties are separated from one another by commas; methods are separated from one another by commas; properties are separated from methods by commas.

The syntax for declaring and assigning a property in the object literal is

                   propertyName : value

From this you see that in our case above, the first property is, numA and the value, 5 is assigned to it. Note that the colon is used in the literal instead of the assignment operator. The first property takes the place of the first variable in the previous code above. The second property with name, numB takes the place of the second variable in the previous code.

After the two properties in the above code, you have the method, which takes the place of the function in the previous code. To declare a function in the object literal, you simply use the function name. To define the function, you follow the function name with a colon. After that you give a space and type the reserved word, “function” in lower case. After that you type the () brackets. These brackets can take parameters for the method (function). Next, you have statements for the method inside a pair of curly braces. To refer to any of the object properties, inside the curly braces, precede the property name with the reserved word, “this” and a dot.

In the body of the method above, the first statement adds the values (numbers) of the two properties and returns the answer.

Accessing Object Properties and Methods
You access a property in order to read or change its value. The syntax to access a JavaScript object property (outside the object code), is simply

                objectName.propertyName

There is a dot in between the object name and property name.

Generally you access a method to execute it: we say you call the method. The syntax for calling a JavaScript object method is

                objectName.methodName(args);

There is a dot in between the object name and method name. Some methods take arguments. If no arguments are involved, then you do not put anything in the () brackets; however, the brackets must be present when calling the method. Note: After the method name in the object code, the () brackets should not be present.

In the above case, we accessed only the method (outside the object code). This “add” method is called and the return value is assigned to the new variable, result.

Inheritance
You can create a child object from the object you have just created. Such a child object is called an inherited object. The object inherited from is the parent object. You can still create another child object from the child object. You can carry on creating children objects going down. In this way you would have a chain of descendant objects.

An inherited object inherits all the properties and methods of its parent object. In addition it can modify the inherited properties and methods and it can add new properties and methods.

The following script shows the object created above plus a child object (see explanation below).

        <script type="text/javascript">

         myObject = {
                                 numA:5,
                                 numB:8,
                                 add:function ()
                                         {
                                                 answer = this.numA + this.numB;
                                                 return answer;
                                         }
                                 };


         myChildObject = myObject;
         myChildObject.multiply = function ()
                                                         {
                                                         answer = this.numA * this.numB;
                                                         return answer;
                                                         }

         result1 = myChildObject.numA;
         result2 = myChildObject.multiply();
         alert(result1);
         alert(result2);

        </script>

The first statement in the script is the object we had before. This object becomes the parent object for the child (inherited) object created down in the code. To create a child object you simple assign the parent object to a new variable. The syntax is:

             var childObject = parentObject;

The “var” in the syntax is optional. In the above code, we have,

           myChildObject = myObject;

myChildObject is the child object. Immediately after this statement, the child object has all the properties and methods of the parent object. After this statement in the above code, the method, multiply, is added to the child object. The statement to add the method begins with the child object name. This is followed by a dot, then the function name without the () brackets. Next you have the equal sign and then the method definition as we saw above.

The last code segment of the script reads the value of the first property of the child object; calls the added method (multiply) of the child object; displays the value of the first property read and displays the return value of the method called. This last code segment is just to prove that the code works.

Note that the parent object, myObject does not have the method, multiply.

Adding Properties and Methods to an Object
All I will give you here is just the syntax. The syntax to add a new property to an object is,

            objectName.newPropName = value;

If the value is a string, it has to be in quotes. The syntax to add a new method to an object is,

           objectName.newMethodName = function (params)
                                                                  {
                                                                             method statements
                                                                  }



That is it: Creating JavaScript Objects by Literal Notation. I hope you appreciated it.

Chrys

Related Links

Major in Website Design
Web Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT

Comments

Become the Writer's Fan
Send the Writer a Message