JavaScript  

Building Objects in JavaScript

Introduction

JavaScript is an object-based language, which does not Completely support object oriented programming concepts. It provides a mechanism by which user-defined Objects can be created.

Before creating a new object, it is necessary to define the same object by Outlining its properties. In JavaScript, objects are defined using a function, now this might be Confusing for those who are familiar with C++ or Java programming languages. Every language has its own way of doing things and this is how objects are defined in JavaScript.

As we know that an object is a collection of properties and methods.

An object type for students in a class with properties for name, age and grade can be created in the following manner.

function student (s_name, s_age, s_grade)
{
this.name=s_name
this.age=s_age
this.qrade = s_grade
)

The function defined above is known as constructor function. Now, you will be able to create objects of type student. It can be done in the following manner.

s1 = new student (“Ashish B.”, 17, “A”)
s2 = new student (“Sonali”, 16, “B”)
s3 = new student (“Gullu”, 17, “A”’)

s1, s2, and s3 are instances of the student object. The properties of s1, s2 and s3 can be accessed in the following manner

s1.grade = “A+”
s2.age = “17”
s3.name = “Ashish Bhatnagar”

this is a special keyword, which refers to the current object.

Adding Methods to an object

In C++ or Java programming languages, the methods are part of the class. But in JavaScript, methods of an object are not actually a part of the object and they are defined outside. Consider adding a method to the student object, which displays the name, age and grade of students. In order to add the above method, you need to define the method first and then associate the method with the student object.

The function given below displays the student's name, age and grade.

function Display ()
{ 
document.write (“Student's Name : +this.name  + “<BR>”)
document .write (“Student’s Age : “+this.age+”<BR>”)
document .write (“Student’s Grade : “+this.grade+”<BR>”)
}

This function has to be associated with the student object, so that the objects of student type can invoke it. It can be done as follows:

function student (s_name, s_age, s_grade)
{
this.name = s_name
this.age = s_age
this.grade = s_grade
this.disp details = Display /* You should not specify the braces “(" and “)” */
)

If you have to display the name, age and grade for the object s2, then invoke the method disp_details() in the following manner.

s2.disp_details()

Even the Display() function uses this keyword to access the student's name, age and grade. this refers to the invoking object, which ensures that the contents of the invoking object only are displayed.

Objects as Properties of Objects

You can also use objects as properties of other objects. For instance the grade property can be made as an object.

function grade (subjectl, subject2, subject3)
{
this.science = subjectl
this.maths = subject2
this.history = subject3
}

Now you can create instances of the grade object.

Ashish_grade = new grade (“A”’, “B”, “A+”) .
Sonali_grade = new grade (“B”, “B+”, “A”)

Using these objects, you can create the student objects in the following manner,

s1= new student(“Ashish”, 17, Ashish_grade)
s2=new student(“Sonali”,16, Sonali_grade)

You could refer to John’s science grade and history grades as s1. grade.science and s1.grade.history

You can also create no argument Constructor and initialize the properties after the object is created. Consider the following example

function student ()
{
this.name = “”
this.age = 0
this.disp_details = Display
}
sl = new Student ()
sl.name = “Ashish”
sl.age = 17
sl.disp_details()

You can try the following program and observe the output appears on screen on execution.

Souce Code

<!DOCTYPE html>
<html>
<head>
    <title>The Grade Object</title>
</head>
<body>
<pre>
<script>
function Display() {
    document.write("Student's Name: " + this.name + "<br>");
    document.write("Student's Age: " + this.age + "<br>");
    document.write("Grade Science: " + this.grade.science + "<br>");
    document.write("Grade Maths: " + this.grade.maths + "<br>");
    document.write("Grade History: " + this.grade.history + "<br>");
}

function Grade(subject1, subject2, subject3) {
    this.science = subject1;
    this.maths = subject2;
    this.history = subject3;
}

function Student(s_name, s_age) {
    this.name = s_name;
    this.age = s_age;
    this.grade = new Grade("A", "B", "A+");
    this.disp_details = Display;
}

let s1 = new Student("Ashish", 17);
s1.disp_details();
</script>
</pre>
</body>
</html>

This code defines a simple JavaScript program that creates and displays a student's personal information and academic grades. It uses constructor functions to build two objects: one for the student's grades (Grade) and one for the student's details (Student). The Student object includes the student's name, age, and an instance of the Grade object. A separate function, Display, is used to output all these details to the webpage using document.write(). Finally, an instance of the Student is created with the name "Ashish" and age 17, and the disp_details method is called to display the student's full profile, including grades in Science, Maths, and History.

Output

Grade object

Summary

This document explains how to create and use objects in JavaScript using constructor functions, the this keyword, and method binding. It shows how to define properties like name, age, and grade, and how to add methods like Display() to output object data. It also covers using nested objects (e.g., grade as a separate object) and initializing properties either during or after object creation. A sample HTML script is included to demonstrate displaying student details using these concepts.

Membership not found