Map & Set

controllers.application.js

import Ember from 'ember';

const { computed } = Ember;

function _copyMap(originalMap) {
  const newMap = new Map();

  originalMap.forEach((value, key) => {
    newMap.set(key, value);
  });

  return newMap;
}

export default Ember.Controller.extend({
  myMap: null,
  mySet: null,
  
  newMapKey: null,
  newMapValue: null,
  newSetValue: null,
  
	// Map computed properties
  mapSize: computed.reads('myMap.size'),
  brokenMapValueForKeyFoo: computed.reads('myMap.foo'),
  fixedMapValueForKeyFoo: computed('myMap', function() {
    return this.get('myMap').get('foo');
  }),
  
  // Set computed properties
  setSize: computed.reads('mySet.size'),
  brokenSetLastObject: computed.reads('mySet.lastObject'),
  fixedSetLastObject: computed('mySet', function() {
    return Array.from(this.get('mySet')).pop();
  }),
  
  init() {
    this._super(...arguments);
    this.setProperties({
      myMap: new Map([['foo', 'bar']]),
      mySet: new Set(['alpha', 'beta'])
    });
  },
  
  actions: {
    addNewMapEntry() {
      // BAD: Updating `myMap` this way will not trigger an update to `mapSize`.
      this.get('myMap').set(this.get('newMapKey'), this.get('newMapValue'));

      // GOOD: Create an entirely new Map and `set` it as `myMap`.
      // const newMap = new Map(this.get('myMap'));
      // newMap.set(this.get('newMapKey'), this.get('newMapValue'));
      // this.set('myMap', newMap);
      
      this.setProperties({ newMapKey: null, newMapValue: null });
    },
    
    addNewSetEntry() {
      // BAD: Updating `mySet` this way will not trigger an update to `setSize`.      
      this.get('mySet').add(this.get('newSetValue'));
      
      // GOOD: Create an entirely new Set and `set` it as `mySet`.
      // const newSet = new Set(this.get('mySet'));
      // newSet.add(this.get('newSetValue'));
      // this.set('mySet', newSet);
      
      this.setProperties({ newSetValue: null });
    },
    
    alertMapSize() {
      window.alert(`Map Size: ${this.get('myMap').size}`);
    },
    
    alertSetSize() {
      window.alert(`Set Size: ${this.get('mySet').size}`);
    }
   
  }
});

templates.application.hbs

<div>
	{{input type=text autocomplete="off" placeholder="Key" value=newMapKey}}
	{{input type=text autocomplete="off" placeholder="Value" value=newMapValue}}
	<button {{action "addNewMapEntry"}}>Add to Map</button>
	<button {{action "alertMapSize"}}>Show Map Size</button>
</div>
<br>
<div>
  {{input type=text autocomplete="off" placeholder="Value" value=newSetValue}}
  <button {{action "addNewSetEntry"}}>Add to Set</button>
	<button {{action "alertSetSize"}}>Show Set Size</button>
</div>

<p>
	<div>Map Size: {{mapSize}}</div>
  <div>Map Foo Value (broken): {{brokenMapValueForKeyFoo}}</div>
  <div>Map Foo Value (working): {{fixedMapValueForKeyFoo}}</div>
</p>

<p>
	<div>Set Size: {{setSize}}</div>
  <div>Set Last Object (broken): {{brokenSetLastObject}}</div>
  <div>Set Last Object (working): {{fixedSetLastObject}}</div>
</p>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}