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;
}, []);

score 2 · Accepted Answer · answered Mar 18 '20 at 18:03

2

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.

answered Mar 18 '20 at 18:03

T.J. Crowder

1,031,962
187
1,923
1,875

Thank you! I need to use variable values (e.g. `e.getTitle().substr(0, e.getTitle().indexOf('something'))`) as keys. How to achieve that? – Ben Mar 18 '20 at 18:12
1

@Ben - [Like this](https://stackoverflow.com/questions/28238858/how-do-i-use-a-variable-for-a-property-name-in-an-object-initializer-literal/28238905#28238905). :-) – T.J. Crowder Mar 18 '20 at 19:26

score 1 · Answer 2 · edited Mar 18 '20 at 21:36

1

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

edited Mar 18 '20 at 21:36

Ben

1,550
1
16
24

answered Mar 18 '20 at 18:06

spirift

2,994
1
13
18

score 1 · Answer 3 · answered Mar 18 '20 at 18:06

1

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.

answered Mar 18 '20 at 18:06

Suresh

31
1

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

3 Answers3