JSFiddle - React, Tailwind, and code Playground

by Justin

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="container">

  <div class="left extend">
    <h3>Using jQuery's Extend</h3>
    <div class="representation">
      <h4>this.comments</h4>
      <div class="comments-obj"></div>
      <h4>this._comments</h4>
      <div class="_comments-obj"></div>
    </div>
    <div class="comments"></div>
  </div>
  <div class="right equal">
    <h3>Using = Operator</h3>
    <div class="representation">
      <h4>this.comments</h4>
      <div class="comments-obj"></div>
      <h4>this._comments</h4>
      <div class="_comments-obj"></div>
    </div>
    <div class="comments"></div>
  </div>


</div>

CSS

.container > div {
  display: inline-block;
  width: 40%;
  vertical-align: top;
  padding: 25px;
}

JavaScript

function ExtendOrEqual(type) {
  this.type = type;
  this.comments = {
    4: 'First Comment',
    6: 'Second Comment',
    8: 'Third Comment',
    10: 'Fourth Comment'
  };
  this.counter = 0;
  this._comments = {};
};

ExtendOrEqual.prototype = {
  // Since this is the most important part, it's the first function :) 
  resetComments: function() {
    // Extend is what jQuery calls it, so I was trying to follow some convention here.
    if (this.type == '.extend') {
      // Copying means instantiating a new object that contains all of the properties of the template object. This way the original and my duplicate are not pointing to each other (actually pointing to an object pointer)
      this._comments = this.copy(this.comments);

    } else {
      // This is the source of headaches. In JavaScript, it's the same as saying "Hey, I want to call you a different name but you're still you", that is assignment by reference. They refer to the same object. 
      this._comments = this.comments;
    }

    this.counter = 0;
  },
  init: function() {
    var self = this;
    this.resetComments();
    setInterval(function() {
      self._checkComment(self.counter);
      if (Object.keys(self._comments).length === 0 && self._comments.constructor === Object) {
        self.resetComments();
      } else {
        self.counter = self.counter + 2;
      }
      $(self.type + ' .representation ._comments-obj').text(JSON.stringify(self._comments, null, 4));
      $(self.type + ' .representation .comments-obj').text(JSON.stringify(self.comments, null, 4));
    }, 2000)
  },
  // Our copy function takes an initial object (b) as a template, on which it iterates on properties from which it assigns to our copy (a).
  copy: function(b) {
    var a = {};
    for (var key in b)
      if (b.hasOwnProperty(key))
        a[key] = b[key];
    return a;
  },
  _checkComment: function(time) {
    for (var key in this._comments) {
      if (key <= time) {
        $(this.type + '...