fbpx
April 2, 2020
javascript objects

JAVASCRIPT OBJECTS | Introduction to Objects in JavaScript

In this tutorial we will be discussing about JavaScript Objects which entails how to make use of objects when coding web pages. In our previous tutorial we discussed about JavaScript void keyword and we explained its importance and how it can be used when coding. If you haven’t gone through the tutorial you can do so using the link below

Read Previous Tutorial on: JAVASCRIPT VOID KEYWORD | How to use Void Keyword in JavaScript

JAVASCRIPT OBJECT

JavaScript is an object oriented programming language which simply means that it possesses the properties expected of any object oriented language and these properties include:

  • Polymorphism: JavaScript offers the ability to write a function that performs a particular action using different ways.
  • Inheritance: JavaScript classes can rely on another class for some properties and methods.
  • Encapsulation: JavaScript offers the ability to store related information together or methods in an object.
  • Aggregation: JavaScript offers the ability to store an object inside another object. This simply means a user defined object can be stored inside a JavaScript embedded object and vice versa.

Note: A typical object in JavaScript comprises of attributes and if the attributes contains a function, it is said to be a method of the object.

JAVASCRIPT OBJECT PROPERTIES

objects makes use of properties and these properties can be any of the data types used in JavaScript. This properties are used internally to help the object method but can also be used as a global variable on any part of the web page.

The syntax used in assigning an object property to an object is shown below

objectName.objectProperty=propertyValue;

JAVASCRIPT OBJECTS METHODS

Object methods are used for everything ranging from displaying object content to carrying out complex mathematical operations.

Methods are similar to functions just that methods are functions that allows the object carry out operations. Example of a method is the write(), alert(), print(), methods. These methods have been used in different scenario and examples in our previous JavaScript courses.

USER DEFINED JAVASCRIPT OBJECTS

While we have inbuilt objects in JavaScript, we also have user defined objects. These are objects defined by the developer but have it in mind that all built in and user defined objects are children of an object known as object in JavaScript.

The new operator

You must have come across the keyword “new” used in JavaScript. This is an operator which is used to create an instance of an object. for example we can use the new keyword to create and instance of a the object book where we will include the book title and author as properties of the object book.

The below example shows how to use the new keyword

var book = new object();
var car = new vehicle("toyota", "1998", "new model")

THE object () CONSTRUCTOR

The object() constructor is an inbuilt JavaScript object. The value returned by this object() is assigned to a JavaScript variable.

Example shown below

The below example shows how to make use of the object () constructor.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JAVASCRIPT object() CONSTRUCTOR</title>
    <script type="text/javascript" name="javascript">
    var school = new Object();
    school.title= "college";
    school.year= "2009";
    school.name= "binta";
    </script>
</head>
<body>
    
        <script type="text/javascript">
<--
            document.write("John joined a "+ school.title + " named "+ school.name + " in the year " + school.year );
        </script>
//-->
</body>
</html>

RESULT

JAVASCRIPT object() CONSTRUCTOR

Another Example

Now we will be looking at how we can carry out the same activity using a user defined object. In this case we will be needing the help of the this keyword which is used to pass properties into the object

<!DOCTYPE html>
<html lang="en">
<head>
    <title> USER DEFINED JAVASCRIPT</title>
    <script type="text/javascript" name="javascript">
    function school(title, year, name) {
    this.title= title;
    this.year= year;
    this.name= name;
    }
    </script>
</head>
<body>
        <script type="text/javascript">
        var school1 = new school("college","2009", "binta")
            document.write("John joined a "+ school1.title + " named "+ school1.name + " in the year " + school1.year );
        </script>
</body>
</html>

RESULT

USER DEFINED JAVASCRIPT

Another Example on user defined function

<!DOCTYPE html>
<html lang="en">
<head>
    <title>USER DEFINED OBJECT</title>
    <script type="text/javascript">
        function vehicles(name, model, plateNumber){
            this.name=name;
            this.model=model;
            this.plateNumber=plateNumber;
        }
    </script>
</head>
<body>
    <div>
        <script type="text/javascript">
        var vehicles1 = new vehicles('camry', '2006', '123456');
        document.write('name of car: '+vehicles1.name +'<br>');
        document.write('model of car: ' + vehicles1.model+'<br>');
        document.write('car plate number: '+ vehicles1.plateNumber+'<br>');

        </script>
    </div>
</body>
</html>

RESULT

USER DEFINED OBJECT

ASSIGNING METHODS TO JAVASCRIPT OBJECTS

Over here we are going to be showing you examples on how to assign methods to objects.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>USER DEFINED OBJECT</title>
    
    <script type="text/javascript">
    function newCar(amount){
        this.cost=amount;
    }
        function vehicles(name, model, plateNumber){
            this.name=name;
            this.model=model;
            this.plateNumber=plateNumber;
            this.newCar=newCar;
        }
    </script>
</head>
<body>
    <div>
        <script type="text/javascript">
        var vehicles1 = new vehicles('camry', '2006', '123456');
        vehicles1.newCar(2000);
        document.write('name of car: '+vehicles1.name +'<br>');
        document.write('model of car: ' + vehicles1.model+'<br>');
        document.write('car plate number: '+ vehicles1.plateNumber+'<br>');
        document.write("cost of car: "+ vehicles1.cost +'<br>');


        </script>
    </div>
</body>
</html>

RESULT

USER DEFINED OBJECT

CONCLUSION

JavaScript Objects are very important to every developer when working with JavaScript. We hope with the help of this tutorial you fully understand the basics of structuring built in and user defined objects in JavaScript.

NEXT TUTORIAL: JAVASCRIPT – NUMBER

Is JavaScript Object Oriented ?

Yes! JavaScript is an object oriented language because it has the four properties of an object oriented language such as aggregation, inheritance, polymorphism and Encapsulation.

Leave a Reply

Your email address will not be published. Required fields are marked *