An object is a non-primitive, structured data type in JavaScript. Objects are same as variables in JavaScript, the only difference is that an object holds multiple values in terms of properties and methods.
In JavaScript, an object can be created in two ways: 1) using Object Literal/Initializer Syntax 2) using the Object() Constructor function with the new keyword. Objects created using any of these methods are the same.
The following example demonstrates creating objects using both ways.
Example: JavaScript Object
var p1 = { name:"Ritesh" }; // object literal syntax
var p2 = new Object(); // Object() constructor function
p2.name = "Ritesh"; // property
Above, p1 and p2 are the names of objects. Objects can be declared same as variables using var or let keywords. The p1 object is created using the object literal syntax (a short form of creating objects) with a property named name. The p2 object is created by calling the Object() constructor function with the new keyword. The p2.name = "Ritesh"; attach a property name to p2 object with a string value "Ritesh".
The object literal is a short form of creating an object. Define an object in the brackets with key:value pairs separated by a comma. The key would be the name of the property and the value will be a literal value or a function.
Syntax:
var object-name = { key1: value1, key2: value2,...};
The following example demonstrates objects created using object literal syntax.
Example:object literal syntax
var empty_obj = {}; // object with no properties or methods
var person = { firstName: "Ritesh" }; // object with single property
// object with single method
var msg = {
showMessage: function (val) {
alert(val);
}
};
// object with properties & method
var person = {
firstName: "Ritesh",
lastName: "Kumar",
age: 25,
getFullName: function () {
return this.firstName + ' ' + this.lastName
}
};
Note that the whole key-value pair must be declared. Declaring only a key without a value is invalid, as shown below.
Example: wrong syntax
var person={firstname};
var person={getFullName;};
Another way of creating objects is using the Object() constructor function using the new keyword. Properties and methods can be declared using the dot notation .property-nameor using the square brackets ["property-name"], as shown below.
Example:Create Object using Object() Constructor
// Attach properties and methods to person object
person.firstName = "Ritesh";
person["lastName"] = "Kumar";
person.age = 35;
person.getFullName = function () {
return this.firstName + ' ' + this.lastName;
};
An object can have variables as properties or can have computed properties, as shown below.
Example:Variables as Object Properties
var firstName = "Ritesh";
var lastName = "Kumar";
var person = { firstName, lastName }
An object's properties can be accessed using the dot notation obj.property-name or the square brackets obj["property-name"]. However, method can be invoked only using the dot notation with the parenthesis, obj.method-name(), as shown below.
Example:
var person = {
firstName: "Raushan",
lastName: "Kumar",
age: 35,
getFullName: function () {
return this.firstName + ' ' + this.lastName
}
};
person.firstName; // returns Raushan
person.lastName; // returns Kumar
person["firstName"];// returns Raushan
person["lastName"];// returns Kumar
person.getFullName(); // calling getFullName function
In the above example, the person.firstName access the firstName property of a person object. The person["firstName"] is another way of accessing a property. An object's methods can be called using () operator e.g. person.getFullName(). JavaScript engine will return the function definition if accessed method without the parenthesis.
Accessing undeclared properties of an object will return undefined. If you are not sure whether an object has a particular property or not, then use the hasOwnProperty() method before accessing them, as shown below.
Example:hasOwnProperty()
var person = new Object();
person.firstName; // returns undefined
if(person.hasOwnProperty("firstName")){
person.firstName;
}
The properties and methods will be available only to an object where they are declared.
Example: Object constructor
var p1 = new Object();
p1.firstName = "Raushan";
p1.lastName = "Kumar";
var p2 = new Object();
p2.firstName; // undefined
p2.lastName; // undefined
p3 = p1; // assigns object
p3.firstName; // Raushan
p3.lastName; // Kumar
p3.firstName = "Sachin"; // assigns new value
p3.lastName = "Tendulkar"; // assigns new value
Use the for in loop to enumerate an object, as shown below.
Example:Access Object Keys
var person = new Object();
person.firstName = "Raushan";
person.lastName = "Kumar";
for(var prop in person){
alert(prop); // access property name
alert(person[prop]); // access property value
};
Use the for in loop to enumerate an object, as shown below.
Example:Access Object keys
var person = new Object();
person.firstName = "Raushan";
person.lastName = "Kumar";
for(var prop in person){
alert(prop); // access property name
alert(person[prop]); // access property value
};
Object in JavaScript passes by reference from one function to another.
Example:pass by reference
function changeFirstName(per)
{
per.firstName = "Raushan";
}
var person = { firstName : "Raju" };
changeFirstName(person)
person.firstName; // returns Raushan
An object can be a property of another object. It is called a nested object.
Example: nested object
var person = {
firstName: "Raushan",
lastName: "Kumar",
age: 25,
address: {
id: 1,
country:"India"
}
};
person.address.country; // returns "India"