JavaScript Object


JavaScript objects are data with properties and methods.


Objects, Properties and Methods in Real Life

In real life, a car is an object.

The object has its properties, such as weight and color, and methods such as start and stop:

ObjectAttributeMethod
image.png
car.name = Dodge

car.model = Challenger

car.weight = 1550kg

car.color = red

car.start()

car.drive()

car.brake()

car.stop()

All cars have these attributes, but the attributes of each car are different.

All cars have these methods, but they are executed at different times.


JavaScript Object

In JavaScript, almost everything is an object.

NoteIn JavaScript, objects are very important. When you understand objects, you can understand JavaScript.

You have learned the assignment of JavaScript variables.

The following code sets the value of the variable car to "Dodge":

var car = "Dodge";

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

var car = {name:"Dodge", model:"Challenger", color:"red"};

In the above example, 3 values ("Dodge", "Challenger", "red") are assigned to the variable car.

NoteJavaScript Objects are containers for variables.

Object Definition

You can use characters to define and create JavaScript objects:

Example

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

 Try It! 

It is defined that JavaScript objects can span multiple lines, and spaces and line breaks are not necessary:

Example

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

 Try It! 


Object Attributes

It can be said that "JavaScript objects are containers for variables".

However, we usually think that "JavaScript objects are containers for key-value pairs."

Key-value pairs are usually written as name: value (key and value are separated by colons).

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

NoteJavaScript objects are containers for attribute variables.

The writing method of object key-value pair is similar to:

  • Associative arrays in PHP

  • Dictionary in Python

  • Hash table in C language

  • Hash mapping in Java

  • Hash tables in Ruby and Perl


Access Object Properties

You can access object properties in two ways:

Example 1

person.lastName;

 Try It! 

Example 2

person["lastName"];

 Try It! 


Object Method

The method of an object defines a function and is stored as an attribute of the object.

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

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

Example

name = person.fullName();

 Try It! 

If you want to access the fullName property of the person object, it will be returned as a string defining a function:

Example

name = person.fullName;

 Try It! 

NoteJavaScript objects are containers for properties and methods.

In subsequent tutorials you will learn more about functions, properties and methods.


Access Object Method

You can create object methods using the following syntax:

methodName : function () { 
   // code
}  

You can access object methods using the following syntax:

Example

objectName.methodName()

 Try It! 

Usually fullName() is used as a method of the person object, and fullName is used as an attribute.

If you use the fullName attribute without adding () , it will return the definition of the function:

Example

objectName.methodName

 Try It! 

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

There are also many ways to create, use and modify properties and methods.

NoteIn subsequent tutorials, you will learn more about objects.

More Examples

Create JavaScript Object I

Create JavaScript Object II

Access object properties I

Access object properties II

Function attribute is accessed as a method

Function attribute is accessed as an attribute