English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Online tools

JavaScript basic tutorials

JavaScript objects

JavaScript functions

JS HTML DOM

JS browser BOM

AJAX basic tutorial

JavaScript Objects (Object)

Functions

Understanding JavaScript objectsObjectis a data type, consisting ofNameandValuecollection composed ofName:valueRepresentation.

Name:value pairs can contain any data type of properties (including strings, numbers, and booleans) as well as methods, which are functions contained within the object.

JavaScript objects are independent entities that can be compared to objects in real life.

For example, a car has names and colors, etc.Attributesuch as start (start) and stop (stop)Methodsof the object:

ObjectAttributeMethods

car.name = Scorpio
car.model = 600
car.color = red
car.horsePower = 103KW

car.start()
car.drive()
car.brake()
car.stop()

All cars have the sameAttributeHowever, each car's propertiesValues are.

All cars have the sameMethods, but these methods can haveDifferent functions.

Create an object

An object is a JavaScript data type, just like numbers or strings are also data types. As a data type, an object can be contained within a variable.

There are multiple ways to construct an object in JavaScript:

  • UsingObject constants, which uses curly braces: {}

  • UsingObject constructor, which uses new Object()

  • Or, you can create aConstructor, then instantiate an object that calls this function

In this example, we will use Object literalWhat is a literal? A constant value used to assign to a variable is called a literal

var user = {firstName: "Vishal", lastName: "Choudhary", age:22, location: "New Delhi";
Test to see‹/›

An object definition can span multiple lines.

var user = {
  firstName: "Vishal",
  lastName: "Choudhary",
  age: 22,
  location: "New Delhi"
};
Test to see‹/›

In the later part of this tutorial, we will discussObject constructorandConstructor.

Object attributes

Attributes are the associations between names and values in an object and can contain any data type.

Attributes usually refer to the characteristics of an object.

Attributeattribute value
firstNameVishal
lastNameChoudhary
age22
locationNew Delhi

Accessing object properties

There are two ways to access object properties:

  • Dot notation: .

  • Bracket symbol: []

Let's revisit the original example objectuser.

user.firstName;
Test to see‹/›
user["firstName"];
Test to see‹/›

The dot and parentheses are often used. However, the dot notation is faster and easier to read.

Object methods

Methods are functions as object attribute values, therefore they are tasks that an object can perform.

Methods are stored in properties asFunction definition.

Attributeattribute value
firstNameVishal
lastNameChoudhary
age22
locationNew Delhi
getNamefunction() {return this.firstName + " " + this.lastName;}
  var user = {
  firstName: "Vishal",
  lastName: "Choudhary",
  age: 22,
  location: "New Delhi",
  getName: function() {
   return this.firstName + " " + this.lastName;
  }
  };

Note:Methods are functions stored as properties.

Accessing object methods

To retrieve an object method, you can call it just like a regular function, just attach it to the object variable.

user.getName();
Test to see‹/›

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

user.getName;
Test to see‹/›

What isThe 'this' keyword?

You may have noticed that our methods are a bit strange. Take this for example:

  getName: function() {
   return this.firstName + " " + this.lastName;
  }

The this keyword refers to the code being written within the current object-So in this case, this is equivalent touser.

In other words, this.firstName representsThis objectthe firstName property.

You can accessJS thisTutorialJS this keywordTo learn more about this keyword.

You have been using objects all the time

When you browse these examples, you may have been thinking that the punctuation marks you are using are very familiar. That's because you have been using it throughout the tutorial.

Every time we traverse examples using built-in JavaScript objects.

When you access the Document Object Model using the following line:

  document.write("Hello world");
  document.getElementById("para");

You are usingDocumentare available on the class example. For each loaded web page, aDocumentFor example, a method calleddocumentIt represents the entire page structure, content, and other features, such as URL. Similarly, this means it has several commonly used methods/Property.

new Keyword

When you use the keyword 'new' to declare a JavaScript variable, the variable is created as an object:

  var a = new Number();  // Declare a as a Number object
  var b = new String();  // Declare b as a String object
  var c = new Boolean();   // Declare c as a Boolean object

Avoid usingString,NumberandBooleanObjects. They can complicate your code and slow down execution speed.

You will learn more about objects in the later part of this tutorial.