JavaScript: Array.push() vs. Literal (Bracket) Notation

Question

I'm referring to this answer.

Why does Code Snippet 2 not return the same as Code Snippet 1?

Code Snippet 1:

var firstEvents = events.reduce(function(ar, e) {
 var id = e.getId();
 if (e.isRecurringEvent() && e.isAllDayEvent() && !ar.some(function(f) {return f.eventId == id})) {
 ar.push({eventTitle: e.getTitle(), eventId: id, startDate: e.getAllDayStartDate(), endDate: e.getAllDayEndDate()});
 }
 return ar;
}, []);

Code Snippet 2:

var firstEvents = events.reduce(function(ar, e) {
 var id = e.getId();
 if (e.isRecurringEvent() && e.isAllDayEvent() && !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;
}, []);

EDIT:

Why does Code Snippet 3 behave like expected (adding one object per event series) while Code Snippet 4 doesn't?

Code Snippet 3:

var firstEvents = events.reduce(function(ar, e) {
 var id = e.getId();
 if (e.isRecurringEvent() && e.isAllDayEvent() && !ar.some(function(f) {return f.eventId == id})) {
 ar.push({eventTitle: e.getTitle(), eventId: id});
 }
 return ar;
}, []);

Code Snippet 4:

var firstEvents = events.reduce(function(ar, e) {
 var id = e.getId();
 if (e.isRecurringEvent() && e.isAllDayEvent() && !ar.some(function(f) {return f.eventId == id})) {
 ar.push({eventTitle: e.getTitle()});
 }
 return ar;
}, []);

Answer 1

ar.push({/*...*/}) creates an object and pushes that object into the array.

ar['eventTitle'] = e.getTitle(); and such create properties on the array with those names (overwriting the previous values each time). They don't put entries in arrays.

The version with push is correct if your goal is to put objects in the array.

It may seem odd to have arbitrary properties on arrays, but standard arrays are objects, so you can add properties to them.

If you wanted to add to the array with assignment, you'd do it like this:

ar[ar.length] = {eventTitle: e.getTitle(), eventId: id, startDate: e.getAllDayStartDate(), endDate: e.getAllDayEndDate()};

That's effectively what push does.

• Ben: Thank you! I need to use variable values (e.g. e.getTitle().substr(0, e.getTitle().indexOf('something'))) as keys. How to achieve that?
• T.J. Crowder: @Ben - Like this. :-)

Answer 2

First sample code uses push, which is doing adding one more object to array ar.

Second sampel code using bracket notation, which is changing the values in the object ar.

Answer 3

In the first example the reduce function is pushing data into the aggregated array.

ar.push({...})

In the second example the aggregation sets values on the array as keys, arrays === objects in JS.

ar['key-name'] = whatever