JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

Understanding Objects in JavaScript

An object in JavaScript is a data-type that is composed of a collection of names and values, represented in name:value pairs.

The name:value pairs can consist of properties that may contain any data type — including strings, numbers, and Booleans — as well as methods, which are functions contained within an object.

Objects in JavaScript are standalone entities that can be likened to objects in real life.

For example, a car might be an object that has properties like name and color, and methods like start and stop:

Object Properties Methods

car.name = Scorpio

car.model = 600

car.color = red

car.horsePower = 103KW

car.start()

car.drive()

car.brake()

car.stop()

All cars have the same properties, but the property values differ from car to car.

All cars have the same methods, but the methods can have different functionality.


Creating an Object

An object is a JavaScript data type, just as a number or a string is also a data type. As a data type, an object can be contained in a variable.

There are different ways to construct an object in JavaScript:

  • Using object literal, which uses curly brackets: {}
  • Using object constructor, which uses the new Object()
  • Alternatively, you can first create a constructor function and then instantiate an object invoking that function

In this example, we'll use the object literal.

Run code

Spaces and line breaks are not important. An object definition can span multiple lines:

Run code

We will discuss object constructor and constructor function later in this tutorial.



Object Properties

A property is the association between a name and value within an object, and it can contain any data-type.

A property generally refers to the characteristic of an object.

Property Property Value
firstName Vishal
lastName Choudhary
age 22
location New Delhi

Accessing Object Properties

There are two ways to access an object's properties:

  • Dot notation: .
  • Bracket notation: []

Let's revisit our original example object, user.

Run code
Run code

Both dot notation and bracket notation are used regularly. However, Dot notation is faster and more readable.


Object Methods

A method is a function that is the value of an object property, and therefore a task that an object can perform.

Methods are stored in properties as function definitions.

Property Property Value
firstName Vishal
lastName Choudhary
age 22
location New Delhi
getName function() {return this.firstName + " " + this.lastName;}

Note: A method is a function stored as a property.


Accessing Object Methods

In order to retrieve an object method, you would call it much in the same way you would call a regular function, just attached to the object variable.

Run code

If you access a method without the () parentheses, it will return the function definition:

Run code

What is "this"?

You may have noticed something slightly strange in our method. Look at this one for example:

The this keyword refers to the current object the code is being written inside — so in this case this is equivalent to user.

In other words, this.firstName means the firstName property of this object.

You can learn more about the this keyword in out JS this Keyword tutorial.


You've been using objects all along

As you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. That's because you've been using it throughout the tutorial.

Every time we've been working through an example that uses a built-in JavaScript object.

When you accessed the document object model using lines like this:

You were using methods available on an instance of the Document class. For each webpage loaded, an instance of Document is created, called document, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods/properties available on it.


The new Keyword

When a JavaScript variable is declared with the keyword new, the variable is created as an object:

Avoid String, Number, and Boolean objects. They complicate your code and slow down execution speed.

You will learn more about objects later in this tutorial.