We know JavaScript is an object-based language. In the world of JavaScript, an object is a collection of properties and methods that are grouped together in a single name.
Properties contain data and methods perform operations on that data contained in those properties.
Properties and methods are the core elements from which objects formed in JavaScript.
In JavaScript, there are four types of objects. They are as follows:
- User-defined objects
- Built-in objects ( such as Date and Math objects)
- Browser objects (such as window, navigator, and history objects)
- Document objects (for example, link, forms and images)
Let us discuss one by one.
User-defined Objects in JavaScript
User-defined objects in JavaScript are custom objects created by the programmer for specific programming tasks. They are associated with properties and methods.
For example, a person is an object. The properties of a person are name, height, weight, age, etc. All persons have these properties, but values of those person’s properties may differ from person to person.
The actions (called functions) of a person include eat(), sleep(), play(), work(), etc.
In JavaScript, there are three ways to create user-defined objects to manage enormous tasks and data sets within an application. They are:
- By object literal
- By creating an instance of Object directly (using new keyword)
- Using object constructor
Object literal is the simplest and the most popular way to create a user-defined object in JavaScript. We can create a user-defined object with several properties by using object literal, as follows:
var person = { // Declaration of properties of an object person. firstName: "John", lastName: "Herry", age: 25, skinColor: "White" };
In the above code, we have created an object called person, which holds four properties: firstName, lastName, age, and skinColor. The values contained in each property are “John”, “Herry”, 25, and “White” respectively.
Let’s create an HTML program where we will create an object person and access the various properties and display them on browser’s window.
Program code 1:
<html> <head> <title>User defined Object Example</title> <script> var person = { firstName:"John", lastName:"Herry", age: 25, skinColor:"White" }; // Accessing properties of person object. document.write("First name: " +person.firstName+ "<br>"); document.write("Last name: " +person.lastName+ "<br>"); document.write("Age: " +person.age+ "<br>"); document.write("Skin color: " +person.skinColor); </script> </head> <body> </body> </html>
Output: First name: John Last name: Herry Age: 25 Skin color: White
To understand other methods for creating user-defined objects in JavaScript, go to this tutorial: Objects in JavaScript
Built-in Objects in JavaScript
Built-in objects are native objects that are part of core JavaScript and they are defined in ECMAScript standard. JavaScript supports the number of built-in objects.
These built-in objects are available for both client side JavaScript and server-side applications. Some important built-in objects include:
- String object
- Array object
- Date object
- Math object
We will discuss features of built-in objects in JavaScript in the further tutorial one by one.
Browser Objects in JavaScript
Browser objects are those objects that interact with the browser window. These objects are not part of JavaScript language but most browser commonly support them. Example of browser objects are:
- Window object
- History object
- Location object
- Navigator object
- Screen object
We will understand all browser objects one by one in the further tutorials.
Document Objects in JavaScript
Document objects are part of Document Object Model (DOM) defined by W3C. Every window is connected with document object. It is a container for all HTML objects associated with the HTML tags of an HTML document.
The document object provides various properties such as anchor, alinkColor, cookie, forms, history, etc. and methods such as clear, close, open, etc.
We can access document objects using document property of the window object provided by the browser. For example, we can change document’s background color by setting the document’s bgcolor property. The syntax is as follows:
window.document.bgcolor = "red";
We will understand DOM in more detail in the further tutorials.
In this tutorial, you learned types of objects in JavaScript with example. Hope that you will have understood basic points of types of objects: user-defined objects, built-in objects, browser objects, and document objects.
In the next tutorial, we will learn arrays in JavaScript with example programs.
Thanks for reading!!!
Next ⇒ Arrays in JavaScript⇐ Prev Next ⇒