How to Use Objects in JavaScript

Zia

2 Followers

Oct 27, 2024

0 sec read

147

Objects

Objects are entities with properties and methods that resemble real-life objects. Properties specify an object's characteristics or attributes, while methods identify its behavior. Consider a real-life object, namely a car.

The attributes of the Car object can include color, car number, and model. The car's methods could be run () to specify its running behavior. Similarly, in JavaScript, objects have properties and methods.

JavaScript provides built-in objects and allows the creation of user-defined objects. The description of the object is as follows:

Built-in Objects - These are pre-defined objects that are already defined. Their properties and methods need to be called to fulfill a task. An example of a pre-defined object is the array object.
Custom Objects - These are user-defined objects that the developer explicitly creates in the script and defines their properties and methods. For example, to store doctor details, such as name, age, hospital name, and so on an object named doctor can be created.

1. Creating Custom Objects

The object is the parent object from which all JavaScript objects are derived. Custom objects can be derived from this object by using the new keyword.

There are two main methods of creating a custom object. In the first method, an object can be created by using the built-in Object object, which is also known as the direct method. In the second method, an object can be created by defining a template and initializing it with the new keyword.

The syntax to create an object using these methods is as follows:

i. The Direct Method:

The syntax to create a custom object using the Object object is as follows:

Syntax:

var object_name = new Object();

Where,

object_name: This is the name of the object.
New: This is the keyword that allocates memory to the custom object. This is known as the instantiation of an object.
Object: is the built-in JavaScript object that allows creating custom objects.

ii. Template Method:

An object's template refers to a structure that specifies the custom properties and methods of an object. There are two steps to creating an object using this method. First, the object type is declared using a constructor function. Second, you specify the object of the declared object type by using the new keyword.

JavaScript allows the creation of a reusable template without having to redefine properties and methods repeatedly to fulfill a particular object's requirements. This template is known as the constructor function. A constructor function is a reusable block that specifies the type of object, its properties, and methods. It might or might not take any parameters. After creating the constructor function, you specify an object of the declared object type using the new keyword. The new keyword allocates memory for the object and invokes a constructor function.

The syntax to create a constructor function is as follows:

Syntax:

function object_type (list of parameters ){

// Body specifying properties and methods

}

Where,

object_type: Indicates the object type.
list of parameters: This is optional and specifies the parameters to be passed to a function separated by commas.

The syntax to create an object using the new keyword is as follows:

Syntax:

object_name = new object_type (optional list of arguments):

Where,

object_name: This is the name of the object.

The creation of objects using the direct method and the template method.

// Create an object using the object literal method

var doctorDetails = {};

// Create a constructor function for student information

function StudentInfo(name, age, location) {

this.name = name;

this.age = age;

this.location = location;

}

// Create an instance of StudentInfo

var studentOne = new StudentInfo('James', 23, 'New Jersey');

</script>

2. Creating Properties for Custom Objects

Properties specify the characteristics of an object. They can be specified for objects created through the Object or Template method. To create and access a property of an object created using an Object object, specify the object name followed by a period and the property name.

The script creates the student details object and adds properties namely, first name, last name, and age along with their values.

// Create an object using the object literal method

var studentDetails = new Object();

// Define properties for the studentDetails object

studentDetails.firstName = 'John';

studentDetails.lastName = 'Fernando';

studentDetails.age = 15;

// Display the student's full name in an alert

alert("Student's name: " + studentDetails.firstName + " " + studentDetails.lastName);

</script>

3. Creating Methods for Custom Objects

Methods are similar to JavaScript functions, but there is a slight difference between them. A method is always associated with an object and is executed by referring to that object. On the other hand, a function is not associated with any object and is executed independently. Similar to functions, custom methods can also take parameters.

Methods can be specified after creating an object using the Object object or while creating a template. To invoke a method, they must be specified with the object name followed by a period, method name, and parenthesis with parameters, if any.

The code defines a custom method to calculate the area of a square.

// Define a constructor function for a Student object

function Student(firstName, lastName, age) {

this.firstName = firstName;

this.lastName = lastName;

this.age = age;

// Define a method to get the full name

this.getFullName = function() {

return this.firstName + " " + this.lastName;

};

// Define a method to check if the student is an adult

this.isAdult = function() {

return this.age >= 18;

};

}

// Create an instance of Student

var studentOne = new Student('John', 'Fernando', 15);

// Use the methods

alert("Student's full name: " + studentOne.getFullName());

alert("Is the student an adult? " + (studentOne.isAdult() ? "Yes" : "No"));

</script>

JavaScript Objects Objects in JavaScript JavaScript Objects How to use Objects How to use objects in javascript JavaScript built in Objects Javascript custom objects creating custom objects creating properties for custom objects creating methods for custom objects

Published by:

2 Followers

Zia

Zia, founder and CEO of Texvn and Toolx, is a passionate entrepreneur and tech enthusiast. With a strong focus on empowering developers, he creates innovative tools and content, making coding and idea generation easier.