10 - Objects and Functions in Javascript

So, we learnt what objects are and saw how functions work too. Now we will see how objects and functions work together.

Let us take a few seconds to recall what objects are. They are the code versions of what one can see in real life.  Objects have properties which are also called as attributes. These properties hold some values which make up the state of the object. For example if an object car has a property colour, then it can be assigned a value red. With that, one can imply that there is a red car. In real life, the car exhibits certain behaviour. It can run, move, stand still and so on. 

When we codify objects, we use variables to use as properties. The same way to define the behaviour of an object, we can use functions. Each operation or behaviour can be defined as a function. The functions of an object are also called methods.

The dot operator

In real world there can be several objects of the same type. Mostly we would be referring to a specific object at a given point of time. In the English language, to denote that a thing belongs to someone we use an apostrophe followed by an S. in programming we do so with the dot operator. When we want to access an object’s property we specify the name of the object followed by the dot operator and the name of the property.

person.name
person.age

Imagine that the name of the object is person. When referring to the property name or age, we do so using the dot operator. The same can be done with methods of objects. The methods placed inside an object are usually meant to work on the properties and help manipulate them.

The ‘new’ Keyword

The new keyword in Javascript can help create new objects and functions as the name suggests.  We can put it to different uses depending on the context in which the keyword is being used. As and when we learn to create methods and objects we can learn how to use the new keyword.

Creating objects with Object() function

We know that an object is basically a customised variable. One can store multiple values in it using properties. We will use the new keyword and the Object() function to create objects.

var car = new Object();
car.make = "Toyota";

Methods in objects

Methods are functions that are specifically written for objects. They are created using a variable, the new keyword and the Function() method. For now, we will assume that we know what predefined functions are. Not to worry. We will learn about them in detail. For now we will learn how to create methods for objects. For the object car that we created earlier, we will create a method which will tell it to move the specified units along the X and the Y axis.

var car = new Object();
car.make = "Toyota";
car.xCoordinate = 10;
car.yCoordinate = 10;
car.move = new Function(x,y)
{
  this.xCoordinate = this.xCoordinate + x;
  this.yCoordinate = this.yCoordinate + y;
}
// Now whenever we want to move the car, we can call the move function.
//When we call the function, we should specify how many units along the X //and Y axis it should move. Below is the statement which moves the car.
car.move(5,10); 

Now, let’s create a working example where we will have a car object. First we will write its position in the page and then move it. We will then update its position with the X and Y coordinate.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            var car = new Object();
            car.manufacturer = "Toyota";
            car.move = function(x,y)
            {
                this.xCoordinate = this.xCoordinate + x;
                this.yCoordinate = this.yCoordinate + y;
            };
        </script>
    </head>
    <body>
        <hr>
        <script type = "text/javascript">
        car.xCoordinate = 10;
            car.yCoordinate = 10;
            document.write("The Position of the car is now at " + car.xCoordinate + ", " + car.yCoordinate + ".<br/>")
            car.move(10,10);
            document.write("The Position of the car is now at " + car.xCoordinate + ", " + car.yCoordinate + ".<br/>")
        </script>
    </body>
</html>

 

 Using constructors to create objects

Constructors are special types of functions that can be used to initialise the properties of an object.  This function is called when creating the variable for the object and helps to create standard objects. First we would need to create a function. Then whenever we create the object we should call that function.

function createPerson(firstname, lastname, age)
{
  this.firstname = firstname;
  this.lastname = lastname;
  this.age = age;
}
var Richard = new createPerson("Richard", "Wellington", 23);

 We will learn how to apply each and every single of these concepts as building blocks to write great scripts and to write them in the best ways possible.

Like us on Facebook

Wideskills