JavaScript objects are complex data types that allow you to store and manipulate collections of data and functionalities. An object is defined by a set of key-value pairs, where each key is a unique identifier (property) and each value can be any data type, including other objects. Here's an example of an object representing a person:
name: "John Doe",
age: 30,
email: "johndoe@example.com",
address: {
street: "123 Main St",
city: "Anytown",
country: "USA"
},
hobbies: ["Reading", "Gardening", "Cooking"]
};
In this example, person is an object with properties like name, age, email, address, and hobbies. The address property is itself an object containing street, city, and country properties. The hobbies property is an array containing multiple values.
You can access object properties using dot notation (objectName.propertyName) or bracket notation (objectName['propertyName']). For example:
console.log(person.name); // Outputs: "John Doe"
console.log(person.address.city); // Outputs: "Anytown"
console.log(person['hobbies'][0]); // Outputs: "Reading"
Arrays in JavaScript
Arrays are another complex data type in JavaScript used to store collections of values, which can be of any data type. Arrays are ordered, meaning the elements are indexed starting from 0. Here's an example of an array:
You can access array elements using their index. For example:
console.log(fruits.length); // Outputs: 4 (length of the array)
fruits.push("Grapes"); // Adds "Grapes" to the end of the array
console.log(fruits); // Outputs: ["Apple", "Banana", "Orange", "Mango", "Grapes"]
Functions in JavaScript
Functions are blocks of reusable code that perform a specific task when called. They can accept parameters (inputs) and return values (outputs). Functions can be defined using function declarations or function expressions. Here's an example of a function declaration:
return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Outputs: "Hello, Alice!"
You can also define functions using function expressions:
return a * b;
};
console.log(multiply(5, 3)); // Outputs: 15
Using Complex Data Types in HTML
You can incorporate complex data types like objects, arrays, and functions into HTML documents using JavaScript. Here's an example of how you might do that:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Data Types in HTML</title>
</head>
<body>
<div id="output"></div>
<script>
// Define an object representing a person
let person = {
name: "John Doe",
age: 30,
email: "johndoe@example.com",
hobbies: ["Reading", "Gardening", "Cooking"],
greet: function() {
return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
}
};
// Access and display object properties in HTML
document.getElementById("output").innerHTML = `
<h1>${person.name}</h1>
<p>Email: ${person.email}</p>
<p>Hobbies: ${person.hobbies.join(", ")}</p>
<p>${person.greet()}</p>
`;
</script>
</body>
</html>
Practice Excercise Practice now