Certain Concepts missing in JS seems OOP JS

JavaScript
1 
let obj = {
            init: function (){
                document.querySelector('#btn').addEventListener('click', this);
                document.querySelector('#btn').addEventListener('focus', this);
                document.querySelector('#btn').addEventListener('blur', this);
            },
            handleEvent: function(ev){
                switch(ev.type){
                    case 'click':
                        this.something(ev);
                        break;
                    case 'focus':
                        this.something(ev);
                        break;
                    case 'blur':
                        this.something(ev);
                        break;
                    case 'explode':
                        break;
                }
            },
            something: function (ev){
                //gets called by click event list
                console.log('btn was', ev.type, '-ed.');
            }
        }
        
        //get things started
        obj.init();

if we summarize the above code we get:

let obj = {
    init: function (){},
    handleEvent: function(ev){},
    something: function (ev){}
}
//get things started
obj.init();

For me, this is a new concept. is it OOP JS or some other precise thing in JS. If I search it by what search term can I get some material to browse, and learn the missing concepts.

I tried browsing some videos on methods and OOPs, but this was specifically nowhere mentioned.

If I compare it to PHP it looks like some construction methods in JS.

Please advise me or if you can help me with correct search term or suggested reading that I should follow to get an understanding of what is happening here.

I picked up the code from this location.

2

Yes, it’s just object oriented code. That doesn’t seem to be much of a surprise.
The real question is where to learn more about that style.

We have a good article that goes through some of the basics: JS Object Creation
And, the Object-oriented JavaScript with ES6 article takes things deeper using classes.

Just be aware that classes are not magic. They are only sugar, that dresses up other identical JS techniques.

1 Like
3

True. You summarized it precisely.

Thanks.

Ok. I think one separated thread was crated few days back for discussing the same.

4

It’s a kind of magic. :grinning: Practically, OOP is most universal software development concept. In some specific areas we can use something else (e.g. Functional Programming for mathematic), but for web nothing compares with OOP. And I see no any reason to avoid OOP in JS.

1 Like
5

Not everything that uses classes is OOP. Sometimes (like here, IMO) it’s just transaction script wrapped in a class. Here it’s probably done for the sake of preventing scope bleed, although in javascript that would be better done through an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE#:~:text=An%20IIFE%20(Immediately%20Invoked%20Function,soon%20as%20it%20is%20defined.). Like so:

(function() {
    const handleEvent = function(ev) {
        console.log('bnt was ', ev.type, '-ed.');
    }
    const button = document.querySelector('#btn');
    button.addEventListener('click', handleEvent);
    button.addEventListener('focus', handleEvent);
    button.addEventListener('blur', handleEvent);
})();

More specifically, the object you posted:

  • is not configurable at all, it just does one very specific thing - in OOP in general we have more general classes that can be composed together to perform some task - if #btn was a constructor argument for example it would become a lit but more useful as you could apply the same code in different situations, for different buttons.
  • the methods are not sharing any information of the class itself, which is another indication the class is just a “bag of functions”

So it being a class here adds absolutely nothing, functionally.

1 Like
6

Maybe stating the obvious.

It seems to me rather than being a piece of code to demonstrate a particular pattern, the key purpose of the script is to illustrate handleEvent being a default callback for eventListeners.

As a result if we have a handleEvent method on our object, we only need to provide the context ‘this’ as a second argument to the eventListener rather than a named function/method.

Essentially as others have stated it is just an object literal — a container for methods and properties.

As an illustration, without init

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
</head>
<body>
  <button id='btn'>Button</button>
  <script>
    let obj = {
      handleEvent: function(ev){
        switch(ev.type){
          case 'click':
            this.something(ev);
            break;
          case 'focus':
            this.something(ev);
            break;
          case 'blur':
            this.something(ev);
            break;
          case 'explode':
            break;
        }
      },
      something: function (ev){
        //gets called by click event list
        console.log('btn was', ev.type, '-ed.');
      }
    }

    document.querySelector('#btn').addEventListener('click', obj);
    document.querySelector('#btn').addEventListener('focus', obj);
    document.querySelector('#btn').addEventListener('blur', obj);
  </script>
</body>
</html>
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.