Unpacking JavaScript 02: Object Oriented JS(OOJS) part 2 - Classes

Sk - Jun 26 '22 - - Dev Community

Classes are “special functions” underneath, everything we have talked about in terms of prototypical objects and inheritance applies in classes, only the expression is different, for example inheritance is achieved with the extends keyword. Unlike function declarations, classes do not get hoisted, you must declare a class before use. You can both declare and express a class

Class declaration




class twoDArray{
    // varibales 
    length = 0

    // called on initialization
     constructor(arr){
        this.Array2d = arr 

     } 


    getValue(x, y){
      // method 

    }

    setValue(x, y){
       //method
    }

}


twoDArray.prototype.ln = function(){
   return this.length

}


Enter fullscreen mode Exit fullscreen mode

Class expression

class expressions can omit the name/identifier

Named expression




let myClass = class twoDArray{



}



Enter fullscreen mode Exit fullscreen mode

Unnamed expression




let myClass = class {



}



Enter fullscreen mode Exit fullscreen mode

Static Methods and properties

These are methods and properties that can be accessed without instantiating a class, the more you use classes the more useful they become. A perfect example is the JS Math class, another the Reflect object which we will explore in the metaprogramming section, you never initialize it but can access methods and properties (which basically the meaning of static)




Math.PI // static variable



Math.random() // static method



// this is an example not the actual Math class code



class Math {



    static PI = pi value,



    static random(){



     // computes and returns a random number



    }



}



Enter fullscreen mode Exit fullscreen mode

To round static methods let’s create a simple trig class with static methods and properties, how about converting degrees to radians, that could be useful.




 class Trig {



 static radians(degrees){



 return 2 * Math.PI * (degrees/360)



 }



}



console.log(Trig.radians(180)) // should log 180 in radians



Enter fullscreen mode Exit fullscreen mode

Static methods can be very useful when you want to hide the implementation of a class, one example is the singleton pattern where a single instance of a particular object is created, state managers are a good example of this, state is managed by a single object and accessible anywhere in the application, it’s a global object.

So far, we have not done any focused project, I think this a good point just to bring everything together, we will build a 2d array module, and as a bonus we will implement the observer pattern, design patterns are a crucial part OOP.

conclusion

If you want a programming buddyI will be happy to connect on twitter , or you or you know someone who is hiring for a front-end(react or ionic) developer or just a JS developer(modules, scripting etc) I am looking for a job or gig please contact me: mhlungusk@gmail.com, twitter is also fine

Thank you for your time, enjoy your day or night. until next time

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .