Use of Maps for enumerating names of elements and their physical properties

[dave-english]

For my Sim, I'm creating an element selector box, drawing some inspiration from the element selector box code in the States of Matter Sim. However, I've noticed several peculiar warnings in that Sim which make me wonder if there might be a more modern example to work from. (I'm also relatively new to the use of javascript Maps).

1. PhaseChangesModel.js warns

// constant table of the sigma values used in the LJ potential calculations for the various substances used in the sim
// Note: Can't used Map constructor due to lack of support in IE

Is this really still true?

2. SubstanceType.js uses the "EnumerationDeprecated" class.

import EnumerationDeprecated from '../../../phet-core/js/EnumerationDeprecated.js';
import statesOfMatter from '../statesOfMatter.js';

const SubstanceType = EnumerationDeprecated.byKeys( [ 'NEON', 'ARGON', 'DIATOMIC_OXYGEN', 'WATER', 'ADJUSTABLE_ATOM' ] );

Is it necessary to include a deprecated class in my own code? According to WS3Schools, maps are keyed by objects rather than strings, so the function of this very short file (SubtanceType.js) doesn't even quite make sense to me.

What is the modern approach to setting up a MAP containing names of (chemical)elements and associated physical constants for each?

[samreid]

According to https://caniuse.com/mdn-javascript_builtins_map_map_iterable_allowed, IE11 still does not support the new Map(iterable) constructor, which takes a parameter on construction, like so:

var myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);

According to https://phet.colorado.edu/en/help-center/running-sims, PhET itself no longer supports IE11, but other teams may have other requirements.

Here are a few ways to associate names and physical constants:

// Simple map with key/value pairs
const elements1 = {
  Hydrogen: 'H',
  Helium: 'He',
  Lithium: 'Li'
};

// Richer value type
const elements2 = {
  Hydrogen: {
    symbol: 'H',
    atomicNumber: 1
  },
  Helium: {
    symbol: 'He',
    atomicNumber: 2
  }
};

// class declaration
class MyElement {
  constructor(
    public readonly symbol: string,
    public readonly atomicNumber: number
  ) {}
}

// Populate in Map constructor (do not do this on IE11)
const elements3 = new Map( [
  [ 'Hydrogen', new MyElement( 'H', 1 ) ],
  [ 'Helium', new MyElement( 'He', 2 ) ],
  [ 'Lithium', new MyElement( 'Li', 3 ) ]
] );

We also have a less deprecated enumeration pattern described here: https://github.com/phetsims/phet-core/blob/c18c4fda3268822ad0b8e768c402528093408d83/js/EnumerationValue.ts