English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
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:
Object | Attribute | 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 sameAttributeHowever, each car's propertiesValues are.
All cars have the sameMethods, but these methods can haveDifferent functions.
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.
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.
Attribute | attribute value |
---|---|
firstName | Vishal |
lastName | Choudhary |
age | 22 |
location | New Delhi |
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.
Methods are functions as object attribute values, therefore they are tasks that an object can perform.
Methods are stored in properties asFunction definition.
Attribute | attribute value |
---|---|
firstName | Vishal |
lastName | Choudhary |
age | 22 |
location | New Delhi |
getName | function() {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.
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‹/›
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.
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.
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.