JavaScript Object

JavaScript objects are data with properties and methods.

Real-Life Objects, Properties, and Methods

In real life, a car is an object.

An object has properties like weight and color, and methods like start and stop:

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

All cars have these methods, but the methods are performed at different times.

JavaScript Objects

In JavaScript, almost everything is an object.

| | In JavaScript, objects are very important. Understanding objects helps you understand JavaScript. | | --- | --- |

You have learned to assign values to variables.

The following code assigns the value "Fiat" to the variable car:

var car = "Fiat";

An object is also a variable, but an object can contain multiple values (multiple variables), each value represented as a name:value pair.

var car = {name:"Fiat", model:500, color:"white"};

In the above example, three values ("Fiat", 500, "white") are assigned to the variable car.

| | JavaScript objects are containers for variables. | | --- | --- |

Object Definition

You can define and create a JavaScript object using a literal:

Example

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

JavaScript objects can span multiple lines; spaces and line breaks are not necessary:

Example

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

Object Properties

One can say "JavaScript objects are containers for variables."

However, we usually consider "JavaScript objects as containers for key-value pairs."

Key-value pairs are typically written as name : value (keys and values separated by a colon).

Key-value pairs in JavaScript objects are often referred to as object properties.

| | JavaScript objects are containers for property variables. | | --- | --- |

The key-value pair notation is similar to:

• Associative arrays in PHP
• Dictionaries in Python
• Hash tables in C
• Hash maps in Java
• Hashes in Ruby and Perl

Accessing Object Properties

You can access object properties in two ways:

Example 1

person.lastName;

Example 2

person["lastName"];

Object Methods

Object methods are functions stored as object properties.

Object methods are invoked by adding () (as a function).

This example accesses the fullName() method of the person object:

Example

name = person.fullName();

If you access the fullName property without (), it returns the function definition:

Example

name = person.fullName;

| | JavaScript objects are containers for properties and methods. | | --- | --- |

You will learn more about functions, properties, and methods in subsequent tutorials.

Accessing Object Methods

You can create an object method with the following syntax:

methodName : function() {
    // code 
}

You can access an object method with the following syntax:

Example

objectName.methodName()

Typically, fullName() is a method of the person object, and fullName is a property.

If you use the fullName property without (), it returns the function definition:

Example

objectName.methodName

There are multiple ways to create, use, and modify JavaScript objects.

Similarly, there are multiple ways to create, use, and modify properties and methods.

| | You will learn more about objects in subsequent tutorials. | | --- | --- |

More Examples

Create JavaScript Object I

Create JavaScript Object II

Access Object Properties I

Access Object Properties II

Access Function Property as a Method

Access Function Property as a Property