Convert an ES5 IIFE in ES6, OOP Javascript programming

Question

I Need to refactor an IIFE in ES6. In ES6 let and const have a block scope, so I really need an IIFE in ES6? This is the ES5 version of the code:

var oojs = (function(oojs) {
  var createToolbarItems = function(itemElements) {
    var items = [];
    [].forEach.call(itemElements,
      function(el, index, array) {

        var item = {
          toggleActiveState: function() {
            this.activated = !this.activated;
          }
        };

        Object.defineProperties(item, {
          el: {
            value: el
          },
          enabled: {
            get: function() {
              return !this.el.classList.contains('disabled');
            },
            set: function(value) {
              if (value) {
                this.el.classList.remove('disabled');
              } else {
                this.el.classList.add('disabled');
              }
            }
          },
          activated: {
            get: function() {
              return this.el.classList.contains('active');
            },
            set: function(value) {
              if (value) {
                this.el.classList.add('active');
              } else {
                this.el.classList.remove('active');
              }
            }
          }
        });

        items.push(item);
      });
    return items;
  };

  oojs.createToolbar = function(elementId) {
    var element = document.getElementById(elementId);
    var items = element.querySelectorAll('.toolbar-item');

    return {
      items: createToolbarItems(items)
    }
  };

  return oojs;
}(oojs || {}));

What is the best way to translate this code in ES6? I tried many solution but I miss something, and I get an error: oojs is not defined.

Maybe I can use a Class instead? As you can see from the code I'm writing a Toolbar API in a OOP way (I think...)

Thanks for any help

EDIT: Thanks to georg, I try to refactor my code using classes. This is the new ES6 version:

class Toolbar {
  constructor(elementId) {
    this.elementId = elementId;
  }
  get items() {
    const element = document.getElementById(this.elementId);
    return element.querySelectorAll(".toolbar-item");
  }
  createToolbarItems() {
    return [...this.items].map(el => new ToolbarItem(el));
  }
}

class ToolbarItem {
  constructor(el) {
    this.el = el;
  }
  get enabled() {
    return !this.el.classList.contains('disabled');
  }
  set enabled(value) {
    if (value) {
      this.el.classList.remove('disabled');
    } else {
      this.el.classList.add('disabled');
    }
  }
  get activated() {
    return this.el.classList.contains('active');
  }
  set activated(value) {
    if (value) {
      this.el.classList.add('active');
    } else {
      this.el.classList.remove('active');
    }
  }
  toggleActiveState() {
    this.activated = !this.activated;
  }
}

// const toolbar = new Toolbar('myToolbar');
// const toolbarItems = toolbar.createToolbarItems();

EDIT: please check if is the right way to write this code, I'm pretty new to ES6

Thanks again

"I can use a Class instead" - sure, Toolbar and ToolbarItem are close candidates. — georg
– georg, Commented Feb 27, 2018 at 14:27
"I get an error: oojs is not defined": When I run your snippet, there is no such error. — trincot
– trincot, Commented Feb 27, 2018 at 14:29
@mplungjan “How can I turn this ES5 code into its ES6 equivalent?” is a specific question about a programing problem (SO realm). Definitely off-topic for code review as the code is not implemented as expected. — 301_Moved_Permanently
– 301_Moved_Permanently, Commented Feb 27, 2018 at 14:31

georg · Accepted Answer · 2018-02-27 14:37:47Z

3

You can start by factoring out the toolbar item code (var item and below):

class ToolbarItem 
{
    constructor(element) {
      ....
    }
}

Now, decide if you want to keep enabled and activated as properties or refactor them to explicit methods like isEnabled and setEnabled. In the former case it would be,

class ToolbarItem {
   get enabled() {
      ...
   }
   set enabled(value) {
      ...
   }
}

while ordinary methods can be defined like this:

class ToolbarItem {
   isEnabled() {
      ...
   }
   setEnabled(value) {
      ...
   }
}

Once you get this sorted out, replace your item initialization code with items.push(new ToolbarItem(el)) and test.

Hope this helps you getting started, good luck!

answered Feb 27, 2018 at 14:37

georg

216k57 gold badges324 silver badges401 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ufollettu Over a year ago

Thanks, I'll post a refactoring in first answer EDIT.

georg Over a year ago

@ufollettu: in your code createToolbarItems could be simply [... itemElements].map(el => new ToolbarItem(el)). Get used to arrow functions, they're amazing!

Collectives™ on Stack Overflow

Convert an ES5 IIFE in ES6, OOP Javascript programming

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related