4.6 Structural Types Part 1¶

New Object¶

Task 1: What is the data type of phone value?

var phone = {
  os: "Andriod",
  ram: "8GB",
  storage: "512GB"
};

console.log(`The type is: ${typeof phone}`);

The result is: The type is: object

Task 2: Refer to task 1; What is the constructor of the phone object?

var phone = {
  os: "Andriod",
  ram: "8GB",
  storage: "512GB"
};

console.log(`The constructor is: ${phone.constructor}`);

The result is: The constructor is: function Object() { [native code] }

Task 3: Create a new empty object. Display the value and the type of this object in the console.

var myObj = {};

console.log(`The value is: ${myObj}`);
console.log(`The type is: ${typeof myObj}`);

The result is as follows:

The value is: [object Object]
The type is: object

Template Strings and Objects

Template strings do not show the object as it is. You can use JSON.stringify(object) to display the object with properties and methods.

Note: We will study about JSON later in this course.

Task 4: Create a new empty object using the Object constructor using new Object(). Display the value and the type of this object in the console. Hint: use JSON.stringify(object).

var myObj = new Object();

console.log(`The value is: ${JSON.stringify(myObj)}`);
console.log(`The type is: ${typeof myObj}`);

The result is as follows:

The value is: {}
The type is: object

Object Constructor

The Object constructor creates new objects.

To create a new object using Object() constructor, use the keyword new followed by Object().

Task 5: Create an empty object using new Object(null).

var myObj = new Object(null);

console.log(`The object is: ${JSON.stringify(myObj)}`);

The result is: The object is: {}

Task 6: Create an empty object using new Object(undefined).

var myObj = new Object(undefined);

console.log(`The object is: ${JSON.stringify(myObj)}`);

The result is: The object is: {}

Info

Each of new Object(), new Object(null) and new Object(undefined) creates a new empty object

Task 7: Re-create the phone object below using the Object constructor. Display the object in the console.

/*
var phone = {
  os: "Andriod",
  ram: "8GB",
  storage: "512GB"
};
*/

var phone = new Object();
phone.os = "Andriod";
phone.ram = "8GB";
phone.storage = "512GB";

console.log(`The object is: ${JSON.stringify(phone)}`);

The result is: The object is: {"os":"Andriod","ram":"8GB","storage":"512GB"}

Task 8: Re-create the user object below using the Object constructor. Display the object in the console.

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

var user = new Object();
user.firstName = "Ali";
user.lastName = "Zaki";
user.username = "AliZaki88";
user.email = "alizaki@mail.com";

console.log(`The object is: ${JSON.stringify(user)}`);

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

Task 9: Re-create the video object below using the Object constructor. Display the object in the console.

/*
var video = {
  length: "30min",
  host: "Nawras Ali",
};
*/

var video = new Object();
video.length = "30min";
video.host = "Nawras Ali";

console.log(`The object is: ${JSON.stringify(video)}`);

The result is: The object is: {"length":"30min","host":"Nawras Ali"}

instanceof¶

Task 10: Refer to task 7; Is phone an instance of Object constructor? Hint: use phone instanceof Object?

var phone = new Object();
phone.os = "Andriod";
phone.ram = "8GB";
phone.storage = "512GB";

console.log(`Is phone an instance of Object? ${phone instanceof Object}`);

The result is: Is phone an instance of Object? true

instanceof

instanceof checks if an object is created by a specific constructor. If yes, it returns true. Otherwise; it returns false.

For example; myObj instanceof Object: is myObj constructed by the Object constructor?

Task 11: Refer to task 8; Is user an instance of Object constructor?

var user = new Object();
user.firstName = "Ali";
user.lastName = "Zaki";
user.username = "AliZaki88";
user.email = "alizaki@mail.com";

console.log(`Is user an instance of Object? ${user instanceof Object}`);

The result is: Is user an instance of Object? true

Task 12: Refer to task 9; Is video an instance of Object constructor?

var video = new Object();
video.length = "30min";
video.host = "Nawras Ali";

console.log(`Is video an instance of Object? ${video instanceof Object}`);

The result is: Is video an instance of Object? true

Array are Objects¶

Task 13: Create a list of numbers from 10 to 13.

var numbers = [10, 11, 12, 13];

console.log(`The value is: ${numbers}`);

The result is: The value is: 10,11,12,13

Task 14: Refer to task 13; what is the type of numbers value?

var numbers = [10, 11, 12, 13];

console.log(`The type is: ${typeof numbers}`);

The result is: The type is: object

Task 15: Refer to task 13; numbers is an object, what is its constructor?

var numbers = [10, 11, 12, 13];

console.log(`The constructor is: ${numbers.constructor}`);

The result is: The constructor is: function Array() { [native code] }

Task 16: Refer to task 13; re-create numbers array using new Array(item0, item1,..., itemN).

var numbers = new Array(10, 11, 12, 13);

console.log(`The value is: ${numbers}`);

The result is: The value is: 10,11,12,13

Array Constructor

The Array constructor creates new array objects.

To create a new array object using Array() constructor, use the keyword new followed by Array(item0, item1,..., itemN).

Task 17: Re-create the following array using the Array() constructor.

/*
var colors = ["red", "black", "green", "white"];
*/

var colors = new Array("red", "black", "green", "white");

console.log(`The value is: ${colors}`);

The result is: The value is: red,black,green,white

Task 18: Re-create the following array using the Array() constructor.

/*
var users = ["user1", "user2", "user3"];
*/

var users = new Array("user1", "user2", "user3");

console.log(`The value is: ${users}`);

The result is: The value is: user1,user2,user3

Functions are Objects¶

Task 19: Create a regular function that displays "Hello" in the console.

function displayHello(){
  console.log("Hello");
}

displayHello();

The result is: Hello

Task 20: Refer to task 19; what is the type of displayHello?

function displayHello(){
  console.log("Hello");
}

console.log(`The type is: ${typeof displayHello}`);

The result is: The type is: function

Task 21: Refer to Task 19; Is function is an object instance?

function displayHello(){
  console.log("Hello");
}

console.log(`Is function instance of Object? ${displayHello instanceof Object}`);

The result is: Is function instance of Object? true

Task 22: Refer to Task 19; What is the displayHello constructor?

function displayHello(){
  console.log("Hello");
}

console.log(`The constructor is: ${displayHello.constructor}`);

The result is: The constructor is: function Function() { [native code] }

Task 23: I re-created displayHello function using the Function constructor.

var displayHello  = new Function('', 'console.log("Hello")');

displayHello();

The result is: Hello

Function Constructor

The Function constructor creates new Function objects.

To create a new Function object using the Function() constructor, use the keyword new followed by Function(arg1, arg2,...arg3, functionBody).

Task 24: Re-create the following function using the Function constructor.

/*
var mul = function(num1, num2){
  return num1 * num2;
};
*/

var mul = new Function("num1", "num2", "return num1 * num2");

console.log(mul(5, 10));

The result is: 50

Task 25: Re-create the following function using the Function constructor.

/*
var boolValue = function(val){
  return !!val;
};
*/

var boolValue = new Function("val", "return !!val");

console.log(boolValue(undefined));

The result is: false