JavaScript
In this tutorial we will learn about JavaScript objects.
JavaScript object is a special type of variable that can hold multiple named values.
To create an object in JavaScript we use the { } braces.
{ }
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.
student
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.
name
studentid
Yusuf Shakeel
123
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.
displayStream
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.
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.
[ ]
var student = { name : "Yusuf Shakeel", studentid : 123, displayStream : function () { console.log("Computer"); } }; //accessing name property console.log(student["name"]);
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();
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.
points
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.
var student = { name : "Yusuf Shakeel", studentid : 123, displayStream : function () { console.log("Computer"); } }; //adding a new property student["points"] = 10;
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.
displayMessage
var student = { name : "Yusuf Shakeel", studentid : 123, displayStream : function () { console.log("Computer"); } }; //adding a new method student.displayMessage = function () { console.log("Hello World!"); };
this
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.
displayName
When we are not using the this keyword then we will get undefined as output as shown below.
undefined
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"
To delete an object property we use the delete keyword.
delete
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.
var student = { name : "Yusuf Shakeel", studentid : 123, displayName : function () { console.log(this.name); } }; //delete object property delete student["studentid"];
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;