- 4 years ago
- Zaid Bin Khalid
- 2549 Views
-
4
In this session, you will learn how to create and use objects in JavaScript with the help of an example.
What is an Object?
Object-based language is a JavaScript and almost everything is an object or acts as an object in JavaScript. So to work in JavaScript we need to understand how objects work as well as how you can create your own objects and use them effectively and efficiently.
Creating Objects
In JavaScript, we can create an object with the help of curly brackets { } and add an optional list of properties. Object properties are a “key: value” pair, where the key (or property name) is always a string and (property value) can be any data type, e.g. numbers, complex data type like arrays, functions, and other objects. A typical JavaScript object looks like as shown in the example:
var person = {
name: "Peter",
age: 28,
gender: "Male",
displayName: function() {
alert(this.name);
}
};
Accessing Object’s Properties
You can use the dot (.), or square bracket ([]) notation, to access or get a property value. As shown in the example:
var book = {
"name": "Harry Potter and the Goblet of Fire",
"author": "J. K. Rowling",
"year": 2000
};
// Dot notation
document.write(book.author); // Prints: J. K. Rowling
// Bracket notation
document.write(book["year"]); // Prints: 2000
Looping Through Object’s Properties
To get key-value pair of an object you will use a for…in loop. As shown in the example this kind of loop is used to optimize the iterating over the object’s properties
var person = {
name: "Peter",
age: 28,
gender: "Male"
};
// Iterating over object properties
for(var i in person) {
document.write(person[i] + "<br>"); // Prints: name, age and gender
}
Setting Object’s Properties
Using the dot (.) or bracket ([]) notation you can set the new properties or update the existing one. As shown in the example:
var person = {
name: "Peter",
age: 28,
gender: "Male"
};
// Setting a new property
person.country = "United States";
document.write(person.country); // Prints: United States
person["email"] = "[email protected]";
document.write(person.email); // Prints: [email protected]
// Updating existing property
person.age = 30;
document.write(person.age); // Prints: 30
person["name"] = "Peter Parker";
document.write(person.name); // Prints: Peter Parker
Deleting Object’s Properties
To completely remove the properties from an object you can use the delete operator. Setting the property only changes the value of the property it does not remove property from the object the only way to remove the property of an object is to delete them.
var person = {
name: "Peter",
age: 28,
gender: "Male",
displayName: function() {
alert(this.name);
}
};
// Deleting property
delete person.age;
alert(person.age); // Outputs: undefined
Calling Object’s Methods
Using the dot notation or using square bracket notation you can access an object property as shown in the example:
var person = {
name: "Peter",
age: 28,
gender: "Male",
displayName: function() {
alert(this.name);
}
};
person.displayName(); // Outputs: Peter
person["displayName"](); // Outputs: Peter
Manipulating by Value vs. Reference
When you make copies of the JavaScript object you actually just copying the references to that object in JavaScript objects. To understand this easily you can see below mention an example:
var message = "Hello World!";
var greet = message; // Assign message variable to a new variable
greet = "Hi, there!";
document.write(message); // Prints: Hello World!
document.write(greet); // Prints: Hi, there!
- 4 years ago
- Zaid Bin Khalid
- 2549 Views
-
4