Skip to content

Commit 46a74fa

Browse files
LinusBwanaLinusBwana
committed
created a JavaScript object with nested properties and methods; added a new property dynamically and accessed both top-level and nested data
1 parent eda8f99 commit 46a74fa

4 files changed

Lines changed: 137 additions & 0 deletions

File tree

‎objects/README.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# objects
2+
an object is a collection of related properties and/or methods.
3+
4+
## Basic Syntax
5+
```javascript
6+
const objectName = {
7+
key1: value1,
8+
key2: value2,
9+
key3: value3,
10+
...
11+
};
12+
```
13+
14+
## I practiced objects using the example below:
15+
### Example:
16+
```javascript
17+
const person = {
18+
firstName: "Linus",
19+
lastName: "Bwana",
20+
age: 20,
21+
isEmployed: true,
22+
carDetails: {
23+
colour: "black",
24+
model: "Audi",
25+
driver: () => {console.log("My driver is Caleb")},
26+
},
27+
sayHello: () => console.log(`I am Linus`),
28+
eat: () => console.log(`I am eating pizza`),
29+
};
30+
person.middleName = "Ogero"
31+
console.log(person.age);
32+
console.log(person.isEmployed);
33+
person.sayHello();
34+
person.eat();
35+
console.log(person);
36+
console.log(person["lastName"]);
37+
console.log(person.carDetails.model);
38+
person.carDetails.driver();
39+
```
40+
41+
### Explanation of the Code:
42+
```javascript
43+
const person = {
44+
firstName: "Linus",
45+
lastname: "Bwana",
46+
age: 20,
47+
isEmployed: true,
48+
}
49+
```
50+
I defined an *object* named *person*.
51+
It has basic properties: *firstName, lastname, age, isEmployed.*
52+
53+
#### Nested Object: carDetails
54+
```javascript
55+
carDetails: {
56+
colour: "black",
57+
model: "Audi",
58+
driver: () => {console.log("My driver is Caleb")},
59+
},
60+
```
61+
*carDetails* is a nested object within person.
62+
It has its own properties: *colour, model, and a method* called driver which is an arrow function that logs a message.
63+
64+
#### Methods on the Object
65+
```javascript
66+
sayHello: () => console.log(`I am Linus`),
67+
eat: () => console.log(`I am eating pizza`),
68+
```
69+
70+
#### Adding a New Property
71+
```javascript
72+
person.middleName = "Ogero";
73+
```
74+
Dynamically adds a new key-value pair to the *person* object: *middleName: "Ogero"*.
75+
76+
### Console Output
77+
```javascript
78+
console.log(person.age); // Output: 20
79+
console.log(person.isEmployed); // Output: true
80+
person.sayHello(); // Output: I am Linus
81+
person.eat(); // Output: I am eating pizza
82+
console.log(person); // Displays the full object
83+
console.log(person["lastName"]) // Output: Bwana
84+
console.log(person.carDetails.model);// Output: Audi
85+
person.carDetails.driver(); // Output: My driver is Caleb
86+
```
87+
88+
## What I Demonstrated in the example above
89+
- I created a JavaScript *object* with multiple properties
90+
- Included a nested object *(carDetails)* inside the main object
91+
- Used *arrow functions* as *methods* (sayHello, eat, driver)
92+
- Dynamically added a new property (middleName) after object creation
93+
- Accessed values using *dot notation*
94+
- Accessed the values using the *bracket notation*.
95+
- Invoked methods to print custom messages
96+
- Printed the entire object and specific nested values

‎objects/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>objects</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<script src="index.js"></script>
11+
</body>
12+
</html>

‎objects/index.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// an objecyt is a collection of related properties and/or methods.
2+
// object = {key: value, function()}
3+
4+
// example
5+
const person = {
6+
firstName: "Linus",
7+
lastName: "Bwana",
8+
age: 20,
9+
isEmployed: true,
10+
carDetails: {
11+
colour: "black",
12+
model: "Audi",
13+
driver: () => {console.log("My driver is Caleb")},
14+
},
15+
sayHello: () => console.log(`I am Linus`),
16+
eat: () => console.log(`I am eating pizza`),
17+
};
18+
person.middleName = "Ogero"
19+
console.log(person.age);
20+
console.log(person.isEmployed);
21+
person.sayHello();
22+
person.eat();
23+
console.log(person);
24+
console.log(person["lastName"])
25+
console.log(person.carDetails.model);
26+
person.carDetails.driver();

‎objects/style.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body{
2+
font-family: Georgia, 'Times New Roman', Times, serif;
3+
}

0 commit comments

Comments
 (0)