JavaScript Objects:-
What is an Object?
JavaScript is an object-based language and in JavaScript almost everything is an object or acts like an object. So, to work with JavaScript effectively and efficiently we need to understand how objects work as well as how to create your own objects and use them.
Creating Objects:-
An object can be created with curly brackets {} with an optional list of properties. A property is a “key: value” pair, where the key (or property name) is always a string, and value (or property value) can be any data type, like strings, numbers, Boolean’s or complex data type like arrays, functions, and other objects. Additionally, properties with functions as their values are often called methods to distinguish them from other properties. A typical JavaScript object may look like this:
Example:-
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Creating Objects in JavaScript</title>
</head>
<body>
<script>
var person = {
name: “Peter”,
age: 28,
gender: “Male”,
displayName: function() {
alert(this.name);
}
};
document.write(person.name + “<br>”); // Prints: Peter
document.write(person.age + “<br>”); // Prints: 28
document.write(person.gender); // Prints: Male
console.log(person);
</script>
<p><strong>Note:</strong> Also check out the browser console by pressing the f12 key on the keyboard.</p>
</body>
</html>
Output:-
Peter
28
Male
Note: Also check out the browser console by pressing the f12 key on the keyboard.
Accessing Object’s Properties:-
To access or get the value of a property, you can use the dot (.), or square bracket ([]) notation, as demonstrated in the following example:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>JavaScript Get Properties Values of an Object</title>
</head>
<body>
<script>
var book = {
“name”: “Harry Potter and the Goblet of Fire”,
“author”: “J. K. Rowling”,
“year”: 2000
};
// Dot notation
document.write(book.name + “<br>”); // Prints: Harry Potter and the Goblet of Fire
document.write(book.author + “<br>”); // Prints: J. K. Rowling
document.write(book.year); // Prints: 2000
document.write(“<hr>”);
// Bracket notation
document.write(book[“name”] + “<br>”); // Prints: Harry Potter and the Goblet of Fire
document.write(book[“author”] + “<br>”); // Prints: J. K. Rowling
document.write(book[“year”]); // Prints: 2000
</script>
</body>
</html>
Output:-
Harry Potter and the Goblet of Fire
J. K. Rowling
2000
Harry Potter and the Goblet of Fire
J. K. Rowling
2000
Looping Through Object’s Properties:-
You can iterate through the key-value pairs of an object using the for...in loop. This loop is specially optimized for iterating over object’s properties. Here’s an example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>JavaScript Loop Through an Object</title>
</head>
<body>
<script>
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
}
</script>
</body>
</html>
Output:-
Peter
28
Male
Setting Object’s Properties:-
Similarly, you can set the new properties or update the existing one using the dot (.) or bracket ([]) notation, as demonstrated in the following example:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>JavaScript Set the Properties of an Object</title>
</head>
<body>
<script>
var person = {
name: “Peter”,
age: 28,
gender: “Male”
};
// Setting a new property
person.country = “United States”;
document.write(person.country + “<br>”); // Prints: United States
person[“email”] = “peterparker@mail.com”;
document.write(person.email + “<br>”); // Prints: peterparker@mail.com
// Updating existing property
person.age = 30;
document.write(person.age + “<br>”); // Prints: 30
person[“name”] = “Peter Parker”;
document.write(person.name); // Prints: Peter Parker
</script>
</body>
</html>
Output:-
United States
peterparker@mail.com
30
Peter Parker
Deleting Object’s Properties:-
The delete operator can be used to completely remove properties from an object. Deleting is the only way to actually remove a property from an object. Setting the property to undefined or null only changes the value of the property. It does not remove property from the object.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>JavaScript Remove Properties from an Object</title>
</head>
<body>
<script>
var person = {
name: “Peter”,
age: 28,
gender: “Male”,
displayName: function() {
alert(this.name);
}
};
// Deleting property
delete person.age;
document.write(person.age); // Prints: undefined
</script>
</body>
</html>
Output:-
undefined
Calling Object’s Methods:-
You can access an object’s method the same way as you would access properties—using the dot notation or using the square bracket notation. Here’s an example:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>JavaScript Call the Methods of an Object</title>
</head>
<body>
<script>
var person = {
name: “Peter”,
age: 28,
gender: “Male”,
displayName: function() {
document.write(this.name);
}
};
person.displayName(); // Prints: Peter
document.write(“<br>”);
person[“displayName”](); // Prints: Peter
</script>
</body>
</html>
Output:-
Peter
Peter