JS Objects
JavaScript
In this tutorial we will learn about JavaScript objects.
Object
JavaScript object is a special type of variable that can hold multiple named values.
To create an object in JavaScript we use the { } braces.
Object Property and Value
Inside the opening-closing braces we have name-value pair. These are called the object property and property value.
Syntax propertyName : propertyValue
The propertyValue can be of any type - null, undefined, number, string, object, function and even an array.
In the following example we have created an object student having some properties and values.
var student = {
name : "Yusuf Shakeel",
studentid : 123
};
So, in the above example student is an object. name and studentid are the properties of the student object. And Yusuf Shakeel and 123 are the values of the properties.
Object Method
When property of an object is assigned a function then it is a method of the object.
In the following example we have added object method displayStream to the student object.
var student = {
name : "Yusuf Shakeel",
studentid : 123,
displayStream : function () {
console.log("Computer");
}
};
So, in the above example student is an object. displayStream is a property of the student object. And it is assigned a functions so, it is the method of the student object.
Accessing Object Property
In order to access a property of an object we use the object name followed by the . operator and then the name of the property.
In the following example we are accessing the name property of the student object.
var student = {
name : "Yusuf Shakeel",
studentid : 123,
displayStream : function () {
console.log("Computer");
}
};
//accessing name property
console.log(student.name);
Another way to access object property is by using [ ] square brackets and placing the object property name in quotes.
In the following example we are accessing the name property of the student object.
var student = {
name : "Yusuf Shakeel",
studentid : 123,
displayStream : function () {
console.log("Computer");
}
};
//accessing name property
console.log(student["name"]);
Invoking (calling) Object Method
To invoke or call an object method we use the object name followed by . operator then the method name and followed by the ( ) operator. And if there is any argument that needs to be passed, we put it inside the ( ) parenthesis separated by commas.
In the following example we are calling the displayStream method of the student object.
var student = {
name : "Yusuf Shakeel",
studentid : 123,
displayStream : function () {
console.log("Computer");
}
};
//calling displayName method
student.displayStream();
Adding new property to the object
To add a new property to an object we use the . operator.
In the following example we are adding a new property points to the student object.
var student = {
name : "Yusuf Shakeel",
studentid : 123,
displayStream : function () {
console.log("Computer");
}
};
//adding a new property
student.points = 10;
Another way to add new property to the object is by using the [ ] square brackets.
In the following example we are adding a new property points to the student object.
var student = {
name : "Yusuf Shakeel",
studentid : 123,
displayStream : function () {
console.log("Computer");
}
};
//adding a new property
student["points"] = 10;
Adding new method to the object
We can add new method to an object using the . operator.
In the following example we are adding a new method displayMessage to the student object.
var student = {
name : "Yusuf Shakeel",
studentid : 123,
displayStream : function () {
console.log("Computer");
}
};
//adding a new method
student.displayMessage = function () {
console.log("Hello World!");
};
The this keyword
We use the this keyword inside an object when we want to access the object's property.
In the following example we have the student object and we are going to display the value of the name property from the displayName method.
When we are not using the this keyword then we will get undefined as output as shown below.
var student = {
name : "Yusuf Shakeel",
studentid : 123,
displayName : function () {
console.log(name);
}
};
//calling the method
student.displayName(); //this will print undefined
The reason why we get undefined is because inside the displayName method the variable name is treated as a new variable and not the name property of the student object. And a new variable always gets the undefined value so, the output is undefined.
To access the name property of the student object from the object method displayName we have to use the this keyword.
Inside the student object the this keyword points at the object.
In the following example we will get the name as output.
var student = {
name : "Yusuf Shakeel",
studentid : 123,
displayName : function () {
console.log(this.name);
}
};
//calling the method
student.displayName(); //this will print "Yusuf Shakeel"
Deleting object property
To delete an object property we use the delete keyword.
To delete the property we use the object name followed by the . operator and then the object property name.
In the following example we are deleting the studentid property of the student object.
var student = {
name : "Yusuf Shakeel",
studentid : 123,
displayName : function () {
console.log(this.name);
}
};
//delete object property
delete student.studentid;
Another way of deleting an object property is by writing the object followed by [ ] square brackets. Inside the brackets we write the property name within quotes.
In the following example we are deleting the studentid property of the student object.
var student = {
name : "Yusuf Shakeel",
studentid : 123,
displayName : function () {
console.log(this.name);
}
};
//delete object property
delete student["studentid"];
Deleting object method
To delete an object method we use the delete keyword.
To delete the method we use the object name followed by the . operator and then the object method name.
In the following example we are deleting the displayName method of the student object.
var student = {
name : "Yusuf Shakeel",
studentid : 123,
displayName : function () {
console.log(this.name);
}
};
//delete object method
delete student.displayName;