4.2 Extra Practice¶

Accessing Properties¶

Task 1: Represent a book entity in JavaScript. The book weighs about 0.5 kg, and it is 500-page long.

var book = {
  weight: 0.5,
  pages: 500
};

Task 2: Refer to task 1; what is the weight of the book?

var book = {
  weight: 0.5,
  pages: 500
};

console.log(book["weight"]);

The result is: 0.5

Task 3: Refer to task 1; how many pages are in the book?

var book = {
  weight: 0.5,
  pages: 500
};

console.log(book["pages"]);

The result is: 500

Task 4: Check the result of the code below.

var book = {
  weight: 0.5,
  pages: 500
};

console.log(book.weight);
console.log(book.pages);

The result is as follows:

0.5
500

Task 5: Represent a YouTube Video entity in JavaScript. This entity has the following key-value pairs:

1. Length: 30min
2. Host: Nawras Ali
3. Category: Education
4. Title: Create a WordPress Theme
5. Language: Arabic

var ytVideo = {
  length: "30min",
  host: "Nawras Ali",
  category: "Education",
  title: "Create a WordPress Theme",
  language: "Arabic"
};

console.log(ytVideo);

The result is: {length: "30min", host: "Nawras Ali", category: "Education", title: "Create a WordPress Theme", language: "Arabic"}

Task 6: Refer to task 5; Display all the properties values of the YouTube Video entity using square brackets.

var ytVideo = {
  length: "30min",
  host: "Nawras Ali",
  category: "Education",
  title: "Create a WordPress Theme",
  language: "Arabic"
};

console.log(ytVideo["length"]);
console.log(ytVideo["host"]);
console.log(ytVideo["category"]);
console.log(ytVideo["title"]);
console.log(ytVideo["language"]);

The result is as follows:

30min
Nawras Ali
Education
Create a WordPress Theme
Arabic

Task 7: Refer to task 5; Display all the properties values of the YouTube Video entity using the dot notation.

var ytVideo = {
  length: "30min",
  host: "Nawras Ali",
  category: "Education",
  title: "Create a WordPress Theme",
  language: "Arabic"
};

console.log(ytVideo.length);
console.log(ytVideo.host);
console.log(ytVideo.category);
console.log(ytVideo.title);
console.log(ytVideo.language);

The result is as follows:

30min
Nawras Ali
Education
Create a WordPress Theme
Arabic

Task 8: Represent the user entity in JavaScript. This entity has the following key-value pairs:

1. First Name: Ali
2. Last Name: Zaki
3. Username: AliZaki88
4. Email: alizaki@mail.com

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}

console.log(user);

The result is: {firstName: "Ali", lastName: "Zaki", username: "AliZaki88", email: "alizaki@mail.com"}

Task 9: Refer to task 8; Display all the properties values of the user entity using the square brackets.

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}

console.log(user["firstName"]);
console.log(user["lastName"]);
console.log(user["username"]);
console.log(user["email"]);

The result is as follows:

Ali
Zaki
AliZaki88
alizaki@mail.com

Task 10: Refer to task 8; Display all the properties values of the user entity using the dot notation.

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}

console.log(user.firstName);
console.log(user.lastName);
console.log(user.username);
console.log(user.email);

The result is as follows:

Ali
Zaki
AliZaki88
alizaki@mail.com

Adding New Properties¶

Task 11: Add a new property to the book object below. The new property is called "dimensions", and its value is "16.256 x 3.785 x 24.181 cm". Hint: Use book["newProperty"] = value. Display the book object in the console.

var book = {
  weight: 0.5,
  pages: 500
};

book["dimensions"] = "16.256 x 3.785 x 24.181 cm";

console.log(book);

The result is: {weight: 0.5, pages: 500, dimensions: "16.256 x 3.785 x 24.181 cm"}

Task 12: Refer to task 11; add a new property to the book. The new property is called "publisher", and its value is "LWN for publishing". Use book.newProperty = value. Display the book object in the console.

var book = {
  weight: 0.5,
  pages: 500
};

book["dimensions"] = "16.256 x 3.785 x 24.181 cm";
book.publisher = "LWN for publishing";

console.log(book);

The result is: {weight: 0.5, pages: 500, dimensions: "16.256 x 3.785 x 24.181 cm", publisher: "LWN for publishing"}

Task 13: Add a new property to the video object below. The new property is called "playlist", and its value is "WordPress Playlist".

var ytVideo = {
  length: "30min",
  host: "Nawras Ali",
  category: "Education",
  title: "Create a WordPress Theme",
  language: "Arabic"
};

ytVideo["playlist"] = "WordPress Playlist";
//you can also write:
//ytVideo.playlist = "WordPress Playlist";

console.log(ytVideo);

The result is: {length: "30min", host: "Nawras Ali", category: "Education", title: "Create a WordPress Theme", language: "Arabic", playlist: "WordPress Playlist"}

Task 14: Add a new property to the user object below. The new property is called "isLoggedIn", and its value is true.

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}

user.isLoggedIn = true;
//you can also write:
//user["isLoggedIn"] = true;

console.log(user);

The result is: {firstName: "Ali", lastName: "Zaki", username: "AliZaki88", email: "alizaki@mail.com", isLoggedIn: true}

Deleting Properties¶

Task 15: Delete the property pages from the book object below. Hint: Use delete book["pages"]

var book = {
  weight: 0.5,
  pages: 500
};

delete book["pages"]

console.log(book);

The result is: {weight: 0.5}

Task 16: Delete the property title from the YouTube Video object below. Hint: Use delete ytVideo.title

var ytVideo = {
  length: "30min",
  host: "Nawras Ali",
  category: "Education",
  title: "Create a WordPress Theme",
  language: "Arabic"
};

delete ytVideo.title;

console.log(ytVideo);

The result is: {length: "30min", host: "Nawras Ali", category: "Education", language: "Arabic"}

Task 17: Delete firstName and lastName from the use object below.

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}

delete user["firstName"];
delete user.lastName;

console.log(user);

The result is: {username: "AliZaki88", email: "alizaki@mail.com"}

Factory Function¶

Task 18: Create a factory function that generates book objects on the fly. Use the book object below.

/*
var book = {
  weight: null,
  pages: null,
  dimensions: null,
  publisher: null
}
*/

function genBook(weight, pages, dimensions, publisher){

  var book = {
    weight: weight,
    pages: pages,
    dimensions: dimensions,
    publisher: publisher
  };
  return book;
}

var book1 = genBook("0.2kg", "200", "8 x 3 x 30 cm", "LWN for publishing");
var book2 = genBook("0.5kg", "600", "9 x 7 x 35 cm", "Knowledge Light");
var book3 = genBook("0.3kg", "150", "8 x 3 x 30 cm", "RamaKrishna for publishing");

console.log(book1);
console.log(book2);
console.log(book3);

The result is as follows:

{weight: "0.2kg", pages: "200", dimensions: "8 x 3 x 30 cm", publisher: "LWN for publishing"}
{weight: "0.5kg", pages: "600", dimensions: "9 x 7 x 35 cm", publisher: "Knowledge Light"}
{weight: "0.3kg", pages: "150", dimensions: "8 x 3 x 30 cm", publisher: "RamaKrishna for publishing"}

Task 19: Create a factory function that generates user objects on the fly. Use the user object below.

/*
var user = {
  username: "AliZaki88",
  email: "alizaki@mail.com"
}
*/

function genUser(username, email){

  var user = {
    username: username,
    email: email
  };
  return user;
}

var user1 = genUser("trueWarrior99", "user1@mail.com");
var user2 = genUser("redFlower4", "user2@mail.com");

console.log(user1);
console.log(user2);

The result is as follows:

{username: "trueWarrior99", email: "user1@mail.com"}
script.js:21 {username: "redFlower4", email: "user2@mail.com"}

Task 20: Create a factory function that generates video objects on the fly. Use the video object below.

/*
var video = {
  length: null,
  host:  null,
  language: null"
};
*/

function genVideo(length, host, language){

  var video = {
    length: length,
    host:  host,
    language: language
  };

  return video;
}

var video1 = genVideo("20min", "LWN", "Arabic");
var video2 = genVideo("2h", "S.V. Channel", "Sanskrit");
var video3 = genVideo("10min", "Ted", "English");
var video4 = genVideo("30sec", "Unknown", "German");

console.log(video1);
console.log(video2);
console.log(video3);
console.log(video4);

The result is as follows:

{length: "20min", host: "LWN", language: "Arabic"}
{length: "2h", host: "S.V. Channel", language: "Sanskrit"}
{length: "10min", host: "Ted", language: "English"}
{length: "30sec", host: "Unknown", language: "German"}