JavaScript component to display ephemeral notifications I would like to improve my code and organization of JS files so I'm wondering if you guys could tell me what I could do better. I've included a small but typical example of how I often use components. 

With this component I'm able to show different kind of notifications to the user, which then disappear after a set amount of time. 

I use these components by adding this in the appropriate location: new notification('warning', $('.sourcecode-warning').text(), 20000);. Rip away!

function notification(notificationType, message, delay) {
var _this = this;
this.notificationType = notificationType;
this.className = 'notification';
this.message = message;
this.delay = delay || 3000;
this.removeTimeOut;
this.disappearTimeOut;

this.init = function () {
    $('body').append('&lt;div class=" ' + this.className + ' ' + _this.notificationType + '"&gt;&lt;p&gt;' + _this.message + '&lt;/p&gt;&lt;i class="fa fa-times fa-lg close-notification"&gt;&lt;/i&gt;&lt;/div&gt;');
    _this.setEvents();

    _this.removeTimeOut = setTimeout(function () {
        _this.startDisappearing();
    }, _this.delay);
};

this.setEvents = function () {
    $('.close-notification').bind('click', function () {
        _this.removeSelf();
    });
};

this.startDisappearing = function () {
    $('.' + _this.className).addClass('disappearing');

    _this.disappearTimeOut = setTimeout(function () {
        _this.removeSelf();
    }, 1200);
};

this.removeSelf = function () {
    clearTimeout(_this.removeTimeOut);
    clearTimeout(_this.disappearTimeOut);

    $('.' + _this.className).remove();
};

if ($('.' + _this.className).length === 0) _this.init();
};
I think you could improve a lot. :)

I don't think you need an init function, it just add stuff and the code is difficult
to follow and understand.

The main function is yet your initialization.

Even the other functions are a big overhead and make the code complicated.

I put inline comment to explain the code.

function notification(notificationType, message, delay) {
  // you don't need to attach things to this, just use variables.
  const classNameSelector = 'notification';
  const disappearingClass = 'disappei'
  if ($('.'+classNameSelector).length === 0)
    return; // if component is still there you want to avoid recreate it, but
            // so don't need to load all the code, just exit at the beginning.

  // what about place in a template or in a hidden div?
  const _notification = $('&lt;div class=" ' + classNameSelector + ' ' +
    notificationType + '"&gt;&lt;p&gt;' + message +
    '&lt;/p&gt;&lt;i class="fa fa-times fa-lg close-notification"&gt;&lt;/i&gt;&lt;/div&gt;');

  $(body).append(_notification);

  // here I'm a bit confuse, you have a delay, but you set an arbitrary number
  // to remove the notification box: 1200
  // So I changed it in a way that works for me:
  const startDiappearing = delay / 3
  const disappearingAll = delay - startDiappearing

  // the first timeout is startDisappearing
  let removeTimeout;
  const disappearingTimeOut = setTimeout(function() {
    _notification.addClass('disappearing');
    removeTimeout = setTimeout(function () {
        _notification.remove();
    }, disappearingAll);
  }, startDiappearing);

  // Last but not last the bind to the click event
  _notification.on('click', function() {
    clearTimeout(disappearingTimeOut);
    clearTimeout(removeTimeout);

    _notification.remove();
  });
}


I know you feel there is some duplication of remove() but is just a lib call and just one.

The purpose here is made something simple and short as effectively simple and short, avoiding overengineering some part of code.