Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is a composite data type i.e. object in JavaScript?
A data type is known as a composite data type when it represents a number of similar or different data under a single declaration of variable i.e., a data type that has multiple values grouped together. There are mainly three types of composite data types named as below ?
Object
Array
Function
In this article, we will discuss the first type of composite data type i.e. object.
What is an Object?
An object is a collection of properties i.e, an object can store the properties of anything in the key-value pairs. An object in JavaScript has keys and each key has its own value as shown in the example:
let person = {
firstname: "Prince",
lastname: "Varshney",
age: 23,
haircolour: "Black"
};
An object is used whenever we want to store more than one value for a single variable like in the above example we have stored the firstname, lastname, age, and haircolour of a person in a single variable named 'person'. The property of an object can be of any data type i.e., it can be string, number, Boolean or it can be an array as well. Due to the specialty of having data of any data type the objects are very useful in processing large amounts of data.
Creating Objects - Literal Notation
The most common way to create an object is using object literal notation with curly braces {}:
<html>
<head>
<title>Javascript objects</title>
</head>
<body>
<script>
let person = {firstname: "Shivi", lastname: "Singh", age: 23, haircolour: "Black"};
for (i in person) {
document.write(i + ": " + person[i] + "<br />");
}
</script>
</body>
</html>
firstname: Shivi lastname: Singh age: 23 haircolour: Black
Creating Objects Using 'new' Keyword
We can also create an empty JavaScript object and add properties to the object later. To create an empty object, we use the "new" keyword like shown below:
<html>
<head>
<title>Javascript objects</title>
</head>
<body>
<script>
let person = new Object();
person.firstname = "Shivi";
person.lastname = "Singh";
person.age = 23;
person.haircolour = "Black";
for (i in person) {
document.write(i + ": " + person[i] + "<br />");
}
</script>
</body>
</html>
firstname: Shivi lastname: Singh age: 23 haircolour: Black
Accessing Object Properties
Each and every value of an object can be fetched so that we can use them further whenever we need them in our code. The object values can be accessed by 2 methods:
Using Dot (.) Notation
We can access the object value using a dot(.) operator as shown in the below example:
<html>
<head>
<title>Javascript objects</title>
</head>
<body>
<script>
let person = {firstname: "Prince", lastname: "Varshney", age: 23, haircolour: "Black"};
document.write(person.firstname);
document.write("<br>");
document.write(person.age);
</script>
</body>
</html>
Prince 23
Using Square Bracket Notation
We can also access the object value using square brackets [] as shown in the below example:
<html>
<head>
<title>Javascript objects</title>
</head>
<body>
<script>
let person = {firstname: "Prince", lastname: "Varshney", age: 23, haircolour: "Black"};
document.write(person["firstname"]);
document.write("<br>");
document.write(person["age"]);
</script>
</body>
</html>
Prince 23
Comparison of Access Methods
| Method | Syntax | Use Case |
|---|---|---|
| Dot Notation | object.property |
Known property names, cleaner syntax |
| Bracket Notation | object["property"] |
Dynamic property names, names with spaces |
Conclusion
Objects are fundamental composite data types in JavaScript that store data as key-value pairs. Use dot notation for simple property access and bracket notation when property names are dynamic or contain special characters.
3K+ Views
