Skip to content

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