Types of Objects in JavaScript | User Defined, Built In

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)

Types of objects in JavaScript

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 ⇒

Please share your love