6.4 Static methods and properties¶
Static Properties¶
Task 1: Study the following example.
class User{
/* Static Properties & Methods */
static info = "This is the user class";
/*constructor*/
constructor(name, password){
this._name = name;
this._password = password;
}
}
console.log(User.info);
The result is: This is the user class
Task 2: Study the following example.
class User{
/* Static Properties & Methods */
static info = "This is the user class";
/*constructor*/
constructor(name, password){
this._name = name;
this._password = password;
}
}
let user1 = new User("Nawras", "235");
console.log(user1.info);
The result is: undefined
Task 3: Study the following example.
class Student{
/* Static Properties & Methods */
static studentAverageDoc = "The student average is the sum of the marks over 4";
static passMark = 60;
/* Constructor */
constructor(id, name, mark1, mark2, mark3, mark4){
this.id = id;
this.name = name;
this.mark1 = mark1;
this.mark2 = mark2;
this.mark3 = mark3;
this.mark4 = mark4;
}
/* Methods */
studentAverage(){
return (this.mark1 + this.mark2 + this.mark3 + this.mark4) / 4;
}
passed(){
return this.studentAverage() >= 60 ? "has passed" : "has failed";
}
}
console.log(Student.studentAverageDoc);
console.log(Student.passMark);
The result is as follows:
The student average is the sum of the marks over 4
60
Task 4: Study the following example.
class Student{
/* Static Properties & Methods */
static studentAverageDoc = "The student average is the sum of the marks over 4";
static passMark = 60;
/* Constructor */
constructor(id, name, mark1, mark2, mark3, mark4){
this.id = id;
this.name = name;
this.mark1 = mark1;
this.mark2 = mark2;
this.mark3 = mark3;
this.mark4 = mark4;
}
/* Methods */
studentAverage(){
return (this.mark1 + this.mark2 + this.mark3 + this.mark4) / 4;
}
passed(){
return this.studentAverage() >= 60 ? "has passed" : "has failed";
}
}
let student1 = new Student(56, "Ali Ali", 60, 50, 70, 90);
console.log(student1.studentAverageDoc);
console.log(student1.passMark);
The result is as follows:
undefined
undefined
Static Properties
Static properties are just like any object property, however, they are called through the class name.
Warning
Static properties cannot be called through the class objects.
Task 5: Create a static property for the following class. The property is called docs, and the property value is This is a laptop class to generate laptop objects.
class Laptop{
/* Static Properties*/
static docs = "This is a laptop class to generate laptop objects";
/* Constructor */
constructor(proc, ram, ar, stg){
this.processor = proc;
this.ram = ram;
this.additionalRam = ar;
this.storage = stg;
}
}
console.log(Laptop.docs);
The result is: This is a laptop class to generate laptop objects
Task 6: Create a static property for the following class. The property is called whatis, and the property value is An epic is a long poem, typically one derived from ancient oral tradition, narrating the deeds and adventures of heroic or legendary figures or the past history of a nation.
class Epic{
/* Static Properties*/
static whatIs = "An epic is a long poem, typically one derived from ancient oral tradition, narrating the deeds and adventures of heroic or legendary figures or the past history of a nation.";
/*Constructor*/
constructor(name, author, lang){
this.name = name;
this.author = author;
this.language = lang;
}
}
console.log(Epic.whatIs);
The result is: An epic is a long poem, typically one derived from ancient oral tradition, narrating the deeds and adventures of heroic or legendary figures or the past history of a nation.
Task 7: Create a static property for the following class. The property is called averageLength, and the property value is 10min.
class Video{
/*Static Properties*/
static averageLength = "10min";
/*Constructor*/
constructor(title, len){
this.title = title;
this.length = len;
}
}
console.log(Video.averageLength);
The result is: 10min
Task 8: Create a static property for the following class. The property is called tax, and the property value is 16%.
class Item{
/*Static Properties*/
static tax = "16%";
/*Constructor*/
constructor(name, price){
this.name = name;
this.price = price;
}
}
console.log(Item.tax);
The result is: 16%
Why use static properties?
Use static properties to store class documentation and class-related fixed values or configuration.
Static Methods¶
Task 9: Study the following example.
class User{
/* Static Properties & Methods */
static info = "This is the user class";
static hasMorePoints(user1, user2){
return user1.points > user2.points;
}
/*constructor*/
constructor(name, points){
this.name = name;
this.points = points;
}
}
let u1 = new User("Ali", 566);
let u2 = new User("Sami", 546)
console.log(User.hasMorePoints(u1, u2));
The result is: true
Task 10: Study the following example.
class User{
/* Static Properties & Methods */
static info = "This is the user class";
static hasMorePoints(user1, user2){
return user1.points > user2.points;
}
/*constructor*/
constructor(name, points){
this.name = name;
this.points = points;
}
}
let u1 = new User("Ali", 566);
let u2 = new User("Sami", 546)
console.log(u1.hasMorePoints());
The result is: Uncaught TypeError: u1.hasMorePoints is not a function
Task 11: Study the following example.
class Student{
/* Static Properties & Methods */
static studentAverageDoc = "The student average is the sum of the marks over 4";
static passMark = 60;
static allStudentsAverage(...values){
let sumOfStudentsAverage = 0;
for(let value of values){
sumOfStudentsAverage += value;
}
return sumOfStudentsAverage / values.length;
}
/* Constructor */
constructor(id, mark1, mark2, mark3, mark4){
this.id = id;
this.mark1 = mark1;
this.mark2 = mark2;
this.mark3 = mark3;
this.mark4 = mark4;
}
/* Methods */
studentAverage(){
return (this.mark1 + this.mark2 + this.mark3 + this.mark4) / 4;
}
/*Getters*/
get avg(){
return this.studentAverage();
}
}
let s1 = new Student(5, 70, 80, 90, 43);
let s2 = new Student(71, 55, 30, 20, 75);
let s3 = new Student(94, 12, 5, 20, 70);
console.log(Student.allStudentsAverage(s1.avg, s2.avg, s3.avg));
The result is: 47.5
Task 12: Study the following example.
class Student{
/* Static Properties & Methods */
static studentAverageDoc = "The student average is the sum of the marks over 4";
static passMark = 60;
static allStudentsAverage(...values){
let sumOfStudentsAverage = 0;
for(let value of values){
sumOfStudentsAverage += value;
}
return sumOfStudentsAverage / values.length;
}
/* Constructor */
constructor(id, mark1, mark2, mark3, mark4){
this.id = id;
this.mark1 = mark1;
this.mark2 = mark2;
this.mark3 = mark3;
this.mark4 = mark4;
}
/* Methods */
studentAverage(){
return (this.mark1 + this.mark2 + this.mark3 + this.mark4) / 4;
}
/*Getters*/
get avg(){
return this.studentAverage();
}
}
let s1 = new Student(5, 70, 80, 90, 43);
console.log(s1.allStudentsAverage(50, 30));
The result is: Uncaught TypeError: s1.allStudentsAverage is not a function
Static Methods
Static methods are just like any object method, however, they are called through the class name.
Warning
Static methods cannot be called through the class objects.
Task 13: Create the priceDifference static method for the following class.
/*
function priceDifference(price1, price2){
return Math.abs(price1 - price2);
}
*/
class Laptop{
/* Static Properties & Methods */
static docs = "This is a laptop class to generate laptop objects";
static priceDifference(price1, price2){
return Math.abs(price1 - price2);
}
/* Constructor */
constructor(name, price){
this.name = name;
this.price = price;
}
}
let l1 = new Laptop("Dell i5 core", 500);
let l2 = new Laptop("Dell i7 core", 750);
console.log(Laptop.priceDifference(l1.price, l2.price));
The result is: 250
Task 14: Create the compare static method for the following class.
/*
function compare(epic1, epic2, prop){
return `
The result of the comparison between epic1 and epic2 in terms of ${prop} is as follows:
###
The ${prop} of epic 1 is: ${epic1[prop]}.
..........................
The ${prop} of epic 2 is: ${epic2[prop]}.
###
The comparison is completed successfully.`
}
*/
class Epic{
/* Static Methods*/
static compare(epic1, epic2, prop){
return `
The result of the comparison between epic1 and epic2 in terms of ${prop} is as follows:
###
The ${prop} of epic 1 is: ${epic1[prop]}.
..........................
The ${prop} of epic 2 is: ${epic2[prop]}.
###
The comparison is completed successfully.`
}
/*Constructor*/
constructor(name, author, lang){
this.name = name;
this.author = author;
this.language = lang;
}
}
let epic1 = new Epic("Mahabharata", "Vyasa", "Sanskrit");
let epic2 = new Epic("Ramayana", "Valmiki", "Sanskrit");
console.log(Epic.compare(epic1, epic2, "author"));
The result is as follows:
The result of the comparison between epic1 and epic2 in terms of the author is as follows:
###
The author of epic 1 is: Vyasa.
..........................
The author of epic 2 is: Valmiki.
###
The comparison is completed successfully.
Task 15: Create the appliedTax static method for the following class.
/*
function appliedTax(price){
return price >= 800 ? "16%" : "8%";
}
*/
class Item{
/*Static Methods*/
static appliedTax(price){
return price >= 800 ? "16%" : "8%";
}
/*Constructor*/
constructor(name, price){
this.name = name;
this.price = price;
}
}
let item1 = new Item("iPhone", 1000);
let item2 = new Item("green hat", 23);
console.log(Item.appliedTax(item1.price));
console.log(Item.appliedTax(item2.price));
The result is as follows:
16%
8%
Why use static methods?
Use static properties to create utility functions for your program.