6.2 Getters & Methods¶
Getters¶
Task 1: Check the following code.
class User{
/* Constructor */
constructor(fn, ln, e, un){
this.firstName = fn;
this.lastName = ln;
this.email = e;
this.username = un;
}
/*Methods*/
fullName(){
return this.firstName + " " + this.lastName;
}
/*Getters*/
get displayFullName(){
return this.fullName();
}
}
let user1 = new User("Nawras", "Ali", "nawras@mail.com", "nawras77");
let user2 = new User("Jad", "Fakhri", "jad@mail.com", "fakhri5");
console.log(user1.displayFullName);
console.log(user2.displayFullName);
The result is as follows:
Nawras Ali
Jad Fakhri
Task 2: Create a getter for the totalRam method in the following class.
class Laptop{
/* Constructor */
constructor(proc, ram, ar, stg){
this.processor = proc;
this.ram = ram;
this.additionalRam = ar;
this.storage = stg;
}
/*Methods*/
totalRam(){
return this.ram + this.additionalRam;
}
/*Getters*/
get displayTotalRam(){
return this.totalRam();
}
}
let laptop1 = new Laptop("i5", 2, 4, "0.5TB");
let laptop2 = new Laptop("i3", 2, 8, "1TB");
console.log(laptop1.displayTotalRam);
console.log(laptop2.displayTotalRam);
The result is as follows:
6
10
Task 3: Create a getter for info method in the following class.
class Epic{
/*Constructor*/
constructor(name, author, lang){
this.name = name;
this.author = author;
this.language = lang;
}
/*Methods*/
info(){
return `${this.name} was written by ${this.author} in the ${this.language} language`;
}
/**Getters**/
get displayInfo(){
return this.info();
}
}
let epic1 = new Epic("Mahabharata", "Vyasa", "Sanskrit");
let epic2 = new Epic("Ramayana", "Valmiki", "Sanskrit");
console.log(epic1.displayInfo);
console.log(epic2.displayInfo);
The result is as follows:
Mahabharata was written by Vyasa in the Sanskrit language
Ramayana was written by Valmiki in the Sanskrit language
Task 4: Create a getter for the lengthInMinutes method in the following class.
class Video{
/*Constructor*/
constructor(title, len, h, lang, cat){
this.title = title;
this.length = len;
}
/* Methods */
lengthInMinutes(){
return this.length / 60;
}
/*Getters*/
get showLengthInMinutes(){
return this.lengthInMinutes();
}
}
let video1 = new Video("Create a WordPress Theme", "3000");
console.log(video1.showLengthInMinutes);
The result is: 50
Task 5: Create a getter for the lengthInHours method in the following class.
class Video{
/*Constructor*/
constructor(title, len, h, lang, cat){
this.title = title;
this.length = len;
}
/* Methods */
lengthInMinutes(){
return this.length / 60;
}
lengthInHours(){
return this.length / 60 / 60;
}
/*Getters*/
get showLengthInMinutes(){
return this.lengthInMinutes();
}
get showLengthInHours(){
return this.lengthInHours();
}
}
let video1 = new Video("Create a WordPress Theme", "3000");
console.log(video1.showLengthInHours);
The result is: 0.83
Task 6: Create a getter for the tenItemsPrice method in the following class.
class MarkerPen{
/* Constructor */
constructor(color, price){
this.color = color;
this.price = price;
}
/*Methods*/
tenItemsPrice(){
return this.price * 10 - this.price;
}
/*Getters*/
get priceOf10(){
return this.tenItemsPrice();
}
}
let markerPen1 = new MarkerPen("red", 2);
let markerPen2 = new MarkerPen("Blue", 2.2);
console.log(markerPen1.priceOf10);
console.log(markerPen2.priceOf10);
The result is as follows:
18
19.8
Task 7: Create a getter for the twentyItemsPrice method in the following class.
class MarkerPen{
/* Constructor */
constructor(color, price){
this.color = color;
this.price = price;
}
/*Methods*/
tenItemsPrice(){
return this.price * 10 - this.price;
}
twentyItemsPrice(){
return (this.price * 20) - (this.price * 2);
}
/*Getters*/
get priceOfT10(){
return this.tenItemsPrice();
}
get priceOf20(){
return this.twentyItemsPrice();
}
}
let markerPen1 = new MarkerPen("red", 2);
let markerPen2 = new MarkerPen("Blue", 2.2);
console.log(markerPen1.priceOf20);
console.log(markerPen2.priceOf20);
The result is as follows:
36
39.6
Task 8: Create a getter for the fiftyItemsPrice method in the following class.
class MarkerPen{
/* Constructor */
constructor(color, price){
this.color = color;
this.price = price;
}
/*Methods*/
tenItemsPrice(){
return this.price * 10 - this.price;
}
twentyItemsPrice(){
return (this.price * 20) - (this.price * 2);
}
fiftyItemsPrice(){
return (this.price * 50) - 15;
}
/*Getters*/
get priceOfT10(){
return this.tenItemsPrice();
}
get priceOf20(){
return this.twentyItemsPrice();
}
get priceOf50(){
return this.fiftyItemsPrice();
}
}
let markerPen1 = new MarkerPen("red", 2);
let markerPen2 = new MarkerPen("Blue", 2.2);
console.log(markerPen1.priceOf50);
console.log(markerPen2.priceOf50);
The result is as follows:
85
95
!info "Getters"
A getter makes it easy to access the class methods as they were a property of the object.
Extra Practice¶
Task 9: Create a class that creates circle objects.
/*
let circle = {
name: null,
radius: null
}
*/
class Circle{
constructor(n, r){
this.name = n;
this.radius = r;
}
}
let circle1 = new Circle("My beautiful circle", 5);
console.log(circle1);
The result is: Circle {name: "My beautiful circle", radius: 5}
Task 10: Refer to task 9; add areaCalc method to the class. Hint: The area of a circle is PI * radius ** 2.
class Circle{
constructor(n, r){
this.name = n;
this.radius = r;
}
areaCalc(){
const PI = 3.14;
return PI * this.radius ** 2;
}
}
let circle1 = new Circle("My beautiful circle", 5);
console.log(circle1.areaCalc());
The result is: 78.5
Task 11: Refer to task 10; add a getter for the areaCalc method.
class Circle{
constructor(n, r){
this.name = n;
this.radius = r;
}
areaCalc(){
const PI = 3.14;
return PI * this.radius ** 2;
}
get area(){
return this.areaCalc();
}
}
let circle1 = new Circle("My beautiful circle", 5);
console.log(circle1.area);
The result is: 78.5
Task 12: Refer to task 11; add circumferenceCalc method to the class. Hint: The area of a circle is 2 * PI * radius.
class Circle{
constructor(n, r){
this.name = n;
this.radius = r;
}
areaCalc(){
const PI = 3.14;
return PI * this.radius ** 2;
}
circumferenceCalc(){
const PI = 3.14;
return 2 * PI * this.radius;
}
get area(){
return this.areaCalc();
}
}
let circle1 = new Circle("My beautiful circle", 5);
console.log(circle1.circumferenceCalc());
The result is: 31.4
Task 13: Refer to task 12; add a getter for the circumferenceCalc method.
class Circle{
constructor(n, r){
this.name = n;
this.radius = r;
}
areaCalc(){
const PI = 3.14;
return PI * this.radius ** 2;
}
circumferenceCalc(){
const PI = 3.14;
return 2 * PI * this.radius;
}
get area(){
return this.areaCalc();
}
get circumference(){
return this.circumferenceCalc();
}
}
let circle1 = new Circle("My beautiful circle", 5);
console.log(circle1.circumference);
The result is: 31.4
Task 14: Create a class that generates website objects.
/*
let website = {
name: null,
noOfPages: null,
averagePageSize: null,
noOfMonthlyVisits: null
}
*/
class Website{
constructor(n, p, s, v){
this.name = n;
this.noOfPages = p;
this.averagePageSize = s;
this.noOfMonthlyVisits = v;
}
}
let website1 = new Website("Learn With Naw", 5, 2, 1000);
console.log(website1);
The result is: Website {name: "Learn With Naw", noOfPages: 5, averagePageSize: 2, noOfMonthlyVisits: 1000}
Task 15: Refer to task 14; add monthlyBandwidthCalc method to the class. Hint: The monthly bandwidth is equal to website average size * number of pages * number of monthly visits.
class Website{
constructor(n, p, s, v){
this.name = n;
this.noOfPages = p;
this.averagePageSize = s;
this.noOfMonthlyVisits = v;
}
monthlyBandwidthCalc(){
return this.averagePageSize * this.noOfMonthlyVisits * this.noOfPages;
}
}
let website1 = new Website("Learn With Naw", 5, 2, 1000);
console.log(website1.monthlyBandwidthCalc());
The result is: 10000
Task 16: Refer to task 15; add a getter for the monthlyBandwidthCalc method.
class Website{
constructor(n, p, s, v){
this.name = n;
this.noOfPages = p;
this.averagePageSize = s;
this.noOfMonthlyVisits = v;
}
monthlyBandwidthCalc(){
return this.averagePageSize * this.noOfMonthlyVisits * this.noOfPages;
}
get monthlyBandwidth(){
return this.monthlyBandwidthCalc();
}
}
let website1 = new Website("Learn With Naw", 5, 2, 1000);
console.log(website1.monthlyBandwidth);
The result is: 10000