4.3 Display Objects¶
Undefined Properties¶
Task 1: What is the username value in the object below?
var user = {
firstName: "Ali",
lastName: "Zaki",
username: "AliZaki88",
email: "alizaki@mail.com"
}
console.log(user.username);
The result is: AliZaki88
Task 2: What is the address value in the object below?
var user = {
firstName: "Ali",
lastName: "Zaki",
username: "AliZaki88",
email: "alizaki@mail.com"
}
console.log(user.address);
The result is: undefined
Note
The value of a non-existent property of an object is undefined
Task 3: What is the color value in the object below?
var markerPen = {
color: "red"
};
console.log(markerPen.color);
The result is: red
Task 4: What is the brand value in the object below?
var markerPen = {
color: "red"
};
console.log(markerPen.brand);
The result is: undefined
Task 5: What is the display value in the object below?
var phone = {
os: "Andriod",
ram: "8GB",
storage: "512GB"
};
console.log(phone.display);
The result is: undefined
Task 6: Check if the object below has the username property.
var user = {
firstName: "Ali",
lastName: "Zaki",
username: "AliZaki88",
email: "alizaki@mail.com"
}
var hasUsernameProperty = user.username !==
undefined;
console.log(hasUsernameProperty);
The result is: true
Task 7: Check if the object below has the address property.
var user = {
firstName: "Ali",
lastName: "Zaki",
username: "AliZaki88",
email: "alizaki@mail.com"
}
var hasAddressProperty = user.address !==
undefined;
console.log(hasAddressProperty);
The result is: false
Task 8: Check if the object below has the color property.
var markerPen = {
color: "red"
};
var hasColorProperty = markerPen.color !==
undefined;
console.log(hasColorProperty);
The result is: true
Task 9: Check if the object below has the brand property.
var markerPen = {
color: "red"
};
var hasBrandProperty = markerPen.brand !==
undefined;
console.log(hasBrandProperty);
The result is: false
Task 10: Check if the object below has the display property.
var phone = {
os: "Andriod",
ram: "8GB",
storage: "512GB"
};
var hasDisplayProperty = phone.display !==
undefined;
console.log(hasDisplayProperty);
The result is: false
hasOwnProperty()¶
Task 11: Check if the object below has the username property. Hint: use user.hasOwnProperty("username")
var user = {
firstName: "Ali",
lastName: "Zaki",
username: "AliZaki88",
email: "alizaki@mail.com"
}
var hasUsernameProperty = user.hasOwnProperty("username");
console.log(hasUsernameProperty);
The result is: true
Task 12: Check if the object below has the address property. Hint: use user.hasOwnProperty("address")
var user = {
firstName: "Ali",
lastName: "Zaki",
username: "AliZaki88",
email: "alizaki@mail.com"
}
var hasAddressProperty = user.hasOwnProperty("address");
console.log(hasAddressProperty);
The result is: false
Object.hasOwnProperty(property)
Object.hasOwnProperty(property)
returns true if the object has the specified property; otherwise, it returns false.
Task 13: Check if the object below has the color property. Hint: use hasOwnProperty()
var markerPen = {
color: "red"
};
var hasColorProperty = markerPen.hasOwnProperty("color");
console.log(hasColorProperty);
The result is: true
Task 14: Check if the object below has the brand property. Hint: use hasOwnProperty()
var markerPen = {
color: "red"
};
var hasBrandProperty = markerPen.hasOwnProperty("brand");
console.log(hasBrandProperty);
The result is: false
Task 15: Check if the object below has the display property. Hint: use hasOwnProperty()
var phone = {
os: "Andriod",
ram: "8GB",
storage: "512GB"
};
var hasDisplayProperty = phone.hasOwnProperty("display");
console.log(hasDisplayProperty);
The result is: false
for...in¶
Task 16: Check the result of the code below.
var video = {
length: "30min",
host: "Nawras Ali",
category: "Education",
title: "Create a WordPress Theme",
language: "Arabic"
};
for(var property in video){
console.log(property)
}
The result is as follows:
length
host
category
title
language
Task 17: Check the result of the code below.
var book = {
weight: 0.5,
pages: 500
};
for(var prop in book){
console.log(prop);
}
The result is as follows:
weight
pages
Task 18: Check the result of the code below.
var user = {
firstName: "Ali",
lastName: "Zaki",
username: "AliZaki88",
email: "alizaki@mail.com"
}
for(var characteristic in user){
console.log(characteristic);
}
The result is as follows:
firstName
lastName
username
email
for...in
for...in
loop iterates over the object properties.
The syntax of for...in
is: for (var prop of object){ // statements }
Task 19: Display each property value of the object below on a separate line.
var user = {
firstName: "Ali",
lastName: "Zaki",
username: "AliZaki88",
email: "alizaki@mail.com"
}
for(var prop in user){
console.log(user[prop]);
}
The result is as follows:
Ali
Zaki
AliZaki88
alizaki@mail.com
Task 20: Display each property value of the object below on a separate line.
var phone = {
os: "Andriod",
ram: "8GB",
storage: "512GB"
};
for(var prop in phone){
console.log(phone[prop]);
}
The result is as follows:
Andriod
8GB
512GB
Task 21: Display each property key and value of the object below on a separate line.
var markerPen = {
color: "red",
brand: "Claro"
};
for(var property in markerPen){
console.log(property + " : " + markerPen[property]);
}
The result is as follows:
color : red
brand : Claro