title: JavaScript: Array.push() vs. Literal (Bracket) Notation
body: <p>I'm referring to <a href="https://stackoverflow.com/a/60627083/1454083">this answer</a>.</p>
  
  <p>Why does <strong>Code Snippet 2</strong> not return the same as <strong>Code Snippet 1</strong>?</p>
  
  <p><strong>Code Snippet 1:</strong></p>
  
  <pre><code>var firstEvents = events.reduce(function(ar, e) {
    var id = e.getId();
    if (e.isRecurringEvent() &amp;&amp; e.isAllDayEvent() &amp;&amp; !ar.some(function(f) {return f.eventId == id})) {
      ar.push({eventTitle: e.getTitle(), eventId: id, startDate: e.getAllDayStartDate(), endDate: e.getAllDayEndDate()});
    }
    return ar;
  }, []);
  </code></pre>
  
  <p><strong>Code Snippet 2:</strong></p>
  
  <pre><code>var firstEvents = events.reduce(function(ar, e) {
    var id = e.getId();
    if (e.isRecurringEvent() &amp;&amp; e.isAllDayEvent() &amp;&amp; !ar.some(function(f) {return f.eventId == id})) {
      ar['eventTitle'] = e.getTitle();
      ar['eventId'] = id;
      ar['startDate'] = e.getAllDayStartDate();
      ar['endDate'] = e.getAllDayEndDate();
    }
    return ar;
  }, []);
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Why does <strong>Code Snippet 3</strong> behave like expected (adding one object per event series) while <strong>Code Snippet 4</strong> doesn't?</p>
  
  <p><strong>Code Snippet 3:</strong></p>
  
  <pre><code>var firstEvents = events.reduce(function(ar, e) {
    var id = e.getId();
    if (e.isRecurringEvent() &amp;&amp; e.isAllDayEvent() &amp;&amp; !ar.some(function(f) {return f.eventId == id})) {
      ar.push({eventTitle: e.getTitle(), eventId: id});
    }
    return ar;
  }, []);
  </code></pre>
  
  <p><strong>Code Snippet 4:</strong></p>
  
  <pre><code>var firstEvents = events.reduce(function(ar, e) {
    var id = e.getId();
    if (e.isRecurringEvent() &amp;&amp; e.isAllDayEvent() &amp;&amp; !ar.some(function(f) {return f.eventId == id})) {
      ar.push({eventTitle: e.getTitle()});
    }
    return ar;
  }, []);
  </code></pre>