4.16 Extra Practice¶
Warm-up¶
Task 1: Create a new object with the following key-value pairs.
/*
num1: 1
num2: 2
num3: 3
rest: (num1+num2)/num3
*/
var obj = {
num1: 1,
num2: 2,
num3: 3,
rest: function(){
return (this.num1 + this.num2) / this.num3;
}
};
console.log(obj);
The result is: {num1: 1, num2: 2, num3: 3, rest: ƒ}
Task 2: Refer to task 1; What is the value of num2
property?
var obj = {
num1: 1,
num2: 2,
num3: 3,
rest: function(){
return (this.num1 + this.num2) / this.num3;
}
};
console.log(obj.num2);
The result is: 2
Task 3: Refer to task 1; What is the constructor of obj
?
var obj = {
num1: 1,
num2: 2,
num3: 3,
rest: function(){
return (this.num1 + this.num2) / this.num3;
}
};
console.log(obj.constructor);
The result is: ƒ Object() { [native code] }
Task 4: Refer to task 1; is obj
an instance of Array
constructor?
var obj = {
num1: 1,
num2: 2,
num3: 3,
rest: function(){
return (this.num1 + this.num2) / this.num3;
}
};
console.log(obj instanceof Array);
The result is: false
Task 5: Refer to task 1; what is the prototype of obj
?
var obj = {
num1: 1,
num2: 2,
num3: 3,
rest: function(){
return (this.num1 + this.num2) / this.num3;
}
};
console.log(Object.getPrototypeOf(obj));
//or
//console.log(obj.__proto__);
The result is: {constructor: ƒ, defineGetter: ƒ, defineSetter: ƒ, hasOwnProperty: ƒ, lookupGetter: ƒ, …}
Task 6: Refer to task 1; create a constructor that creates obj-like objects.
function Obj(n1, n2, n3){
this.num1 = n1;
this.num2 = n2;
this.num3 = n3;
this.rest = function(){
return (this.num1 + this.num2) / this.num3;
};
}
var obj1 = new Obj(1, 2, 3);
console.log(obj1);
The result is: Obj {num1: 1, num2: 2, num3: 3, rest: ƒ}
Task 7: Refer to task 6; what is the prototype of Obj
constructor?
function Obj(n1, n2, n3){
this.num1 = n1;
this.num2 = n2;
this.num3 = n3;
this.rest = function(){
return (this.num1 + this.num2) / this.num3;
};
}
console.log(Obj.prototype);
The result is: {constructor: ƒ}
Task 8: Refer to task 6; re-create Obj
constructor, and delete rest
method, and add this method to Obj.prototype
.
function Obj(n1, n2, n3){
this.num1 = n1;
this.num2 = n2;
this.num3 = n3;
}
Obj.prototype.rest = function(){
return (this.num1 + this.num2) / this.num3;
};
var obj1 = new Obj(1, 2, 3);
console.log(obj1.rest());
The result is: 1
Task 9: Create a lessonPrototype
object with the following key-value pairs.
/*
Object properties
title: null
section: null
course: null
difficultyLevel: null
*/
var lessonPrototype = {
title: null,
section: null,
course: null,
difficultyLevel: null
};
Task 10: Refer to task 9; create a new lesson object from lessonPrototype
. Add the following values to the object properties.
/*
Object properties
title: "Prototypes"
section: "Section 4"
course: "JavaScript Course"
difficultyLevel: "Normal"
*/
var lessonPrototype = {
title: null,
section: null,
course: null,
difficultyLevel: null
};
var lesson1 = Object.create(lessonPrototype,{
title: {
value: "Prototypes"
},
section: {
value: "Section 4"
},
course: {
value: "JavaScript Course"
},
difficultyLevel: {
value: "Normal"
}
});
console.log(lesson1);
The result is: {title: "Prototypes", section: "Section 4", course: "JavaScript Course", difficultyLevel: "Normal"}
Task 11: Display key-value pairs of the object below.
var obj = {
title: "Data Types",
section: "Section 4",
course: "JavaScript Course",
difficultyLevel: "Normal"
};
for(prop in obj){
console.log(`${prop}:${obj[prop]}`);
}
The result is as follows:
title:Data Types
section:Section 4
course:JavaScript Course
difficultyLevel:Normal
Object.entries()¶
Task 12: Refer to task 11; what is the result of Object.entries(obj)
?
var obj = {
title: "Data Types",
section: "Section 4",
course: "JavaScript Course",
difficultyLevel: "Normal"
};
console.log(Object.entries(obj));
The result is as follows:
(4) [Array(2), Array(2), Array(2), Array(2)]
0: (2) ["title", "Data Types"]
1: (2) ["section", "Section 4"]
2: (2) ["course", "JavaScript Course"]
3: (2) ["difficultyLevel", "Normal"]
length: 4
__proto__: Array(0)
Task 13: Refer to task 12; display the elements of Object.entries()
?
var obj = {
title: "Data Types",
section: "Section 4",
course: "JavaScript Course",
difficultyLevel: "Normal"
};
for(var el of Object.entries(obj)){
console.log(el);
}
The result is as follows:
(2) ["title", "Data Types"]
(2) ["section", "Section 4"]
(2) ["course", "JavaScript Course"]
(2) ["difficultyLevel", "Normal"]
Object.entries()
Object.entries()
returns an array of key-value pairs of an object. Each key-value pair is also an array.
Since Object.entries()
returns an array, you can list the elements of this array using for...of
loop.
Object.keys()¶
Task 14: Display the keys of the object below.
var obj = {
title: "Data Types",
section: "Section 4",
course: "JavaScript Course",
difficultyLevel: "Normal"
};
for(var prop in obj){
console.log(prop);
}
The result is as follows:
title
section
course
difficultyLevel
Task 15: Refer to task 14; what is the result of Object.keys(obj)
?
var obj = {
title: "Data Types",
section: "Section 4",
course: "JavaScript Course",
difficultyLevel: "Normal"
};
console.log(Object.keys(obj));
The result is: (4) ["title", "section", "course", "difficultyLevel"]
Task 16: Refer to task 15; display the elements of Object.keys()
?
var obj = {
title: "Data Types",
section: "Section 4",
course: "JavaScript Course",
difficultyLevel: "Normal"
};
for(var key of Object.keys(obj)){
console.log(key);
}
The result is as follows:
title
section
course
difficultyLevel
Object.keys()
Object.keys()
returns an array of a given object's keys.
Since Object.keys()
returns an array, you can list the elements of this array using for...of
loop.
Object.values()¶
Task 17: Display the values of the object below.
var obj = {
title: "Data Types",
section: "Section 4",
course: "JavaScript Course",
difficultyLevel: "Normal"
};
for(var prop in obj){
console.log(obj[prop]);
}
The result is as follows:
Data Types
Section 4
JavaScript Course
Normal
Task 18: Refer to task 17; what is the result of Object.values(obj)
?
var obj = {
title: "Data Types",
section: "Section 4",
course: "JavaScript Course",
difficultyLevel: "Normal"
};
console.log(Object.values(obj));
The result is: (4) ["Data Types", "Section 4", "JavaScript Course", "Normal"]
Task 19: Refer to task 18; display the elements of Object.values()
?
var obj = {
title: "Data Types",
section: "Section 4",
course: "JavaScript Course",
difficultyLevel: "Normal"
};
for(var value of Object.values(obj)){
console.log(value);
}
The result is as follows:
Data Types
Section 4
JavaScript Course
Normal
Object.values()
Object.values()
returns an array of a given object values.
Since Object.values()
returns an array, you can list the elements of this array using for...of
loop.