Math, Number, Date, Map and Set Objects

Math Objects

• The Math Object is unique in that it has no constructor.
• Just specify Math (note the capitalization; you must uppercase the M), followed by a dot and the method or property that is specific to Math Objects.
• All methods of this object are static methods.
• By specifying Math we are initializing the object, rather than constructing and instantiating it.

Math Object Properties and Methods

Random Images Example

Reload this article or edit the random images example on CodePen and reload there to see the images change. It might take a reload or two to see a different image.

See the Pen Random Images by Jason Withrow (@jwithrow) on CodePen.

Number Object Methods

Global Methods for Extracting a Number from a String

Date Objects

• Date Objects do not have a literal, so we need to use new for instantiating a Date Object.
• An example is:

  let theDateObj = new Date();
  

  or in object literal format:

  theDateObj : new Date(),
  

• Dates are calculated in milliseconds since midnight 01 January, 1970 UTC (Universal Time, which is similar to but not quite the same as GMT or Greenwich Mean Time).
  • This enables operators such as -, +, <, >, ==, ===, !=, and !== to be applied when working with Date Objects and comparing them.
  • That moment in time is referred to as the Unix Epoch.

Determining the Current Date / Time

• If no parameters are passed inside of () the object will reflect today's date and time, based on the local time of your computer. The exact formatting will vary by browser.

  let currentDate = new Date();
  alert(currentDate);
  

  The alert() outputs data such as:

  • Sat Nov 16 2024 21:24:30 GMT-0400 (Eastern Daylight Time)

Creating a Specific Date / Time

• Passing parameters establishes a specific date, again based on midnight 01 January, 1970 UTC
• If you decide to pass parameters, the required parameters are:
  • Year
  • Month
  • Day
• These are passed as integers and in the sequence shown above.
• The month ranges from 0 (January) to 11 (December).
• The following parameters are optional and can be left out (they are automatically set to 0):
  • Hours
  • Minutes
  • Seconds
  • Milliseconds

let selectedDate = new Date(2020,8,5,14,30,15);
alert(selectedDate);

The alert() outputs data such as:

• Sat Sep 05 2020 14:30:15 GMT-0400 (Eastern Daylight Time)

Date Object Methods

Calendar Example

Editing this calendar example on CodePen is recommended, as you will be better able to see the code and rendering.

See the Pen Calendar by Jason Withrow (@jwithrow) on CodePen.

Map Objects

• Map objects store key/value pairs, but they remember insertion order and accept anything as a key or a value. So you could use an Object as a key within a map, or even a function.
• These are created via the Map() constructor and the new keyword:

  const theMap = new Map();
  

• If you want to pass key/value pairs during map creation, you can pass an array of arrays to new Map(), with the nested arrays containing two values - the first is the key, the second is the value:

  [
    ['key1', 'value1'],
    ['key2', 'value2']
  ]
  

• Iteration through a map can use a for-of loop; each iteration returns an array of [key, value].
• There is also a forEach method for the map object that allows each key/value pair to be passed to a function.
• The map has a size property, reflecting the number of key/value pairs in the map, which Object objects do not have.
• Map objects have the benefit of not having all the extra prototype-related baggage that Object objects have; in other words, the only items in the Map are what you put there.
• While it is possible to set properties in a Map object using dot notation or subscript notation, those properties will not be part of the map's data structure.
• The proper approach is via the set() method:

  const theMap = new Map();
  theMap.set('someKey','someVal');
  

• To retrieve a given key's value, use the get() method:

  const theMap = new Map();
  theMap.set('someKey','someVal');
  const theVal = theMap.get('someKey');
  

• The other key management methods of a Map object are:
  • has(key) - Returns a boolean based on whether that key has a value in the map
  • delete(key) - Returns a boolean based on whether that key existed and was removed (so it returns false for non-existent keys)
  • clear() - Removes all key/value pairs
• And then there are keys(), values(), and entries() methods to use within loops:

  const theMap = new Map();
  theMap.set('someKey','someVal');
  theMap.set('someKey2','someVal2');
  theMap.set('someKey3','someVal3');
  
  for (const [key, value] of theMap) {
    console.log(key + ': ' + value);
  }
  
  // console output:
  // someKey: someVal
  // someKey2: someVal2
  // someKey3: someVal3
  
  for (const key of theMap.keys()) {
    console.log(key);
  }
  
  // console output:
  // someKey
  // someKey2
  // someKey3
  
  for (const value of theMap.values()) {
    console.log(value);
  }
  
  // console output:
  // someVal
  // someVal2
  // someVal3
  
  for (const [key, value] of theMap.entries()) {
    console.log(key + ': ' + value);
  }
  
  // console output:
  // someKey: someVal
  // someKey2: someVal2
  // someKey3: someVal3
  

• There is also a WeakMap object, which is similar in many ways to a Map object. However, there are some important differences:
  • Its keys can only be objects, so Object objects and functions are fine as keys, but primitive data types are not.
  • Its properties are not enumerable, so they will not be accessible through loops (and you cannot check its size).
  • There is no quick way to empty the WeakMap (there was a clear() method but that method is now deprecated and has essentially no support).
  • Because all the keys are objects, they can be garbage collected as soon as the reference is gone.

Set Objects

• A Set object is a collection of unique values.
• Strict equivalence (data type as well as value) is used when determining if a value is already in the set. Repeated attempts to add the same value will be ignored or discarded.
• Creating a Set object involves new Set()
• Insertion order of values is preserved.
• The methods of Set objects are very similar to Map objects:
  • add(value) - Returns the modified Set object
  • has(value) - Returns a boolean based on whether that value is in the set
  • delete(value) - Returns a boolean based on whether the value was removed
  • clear() - Removes all values from the set
• There is a size property, reflecting the number of items in the Set.
• There is a forEach() method and a for-of loop can also be used.
• There is also a WeakSet object, which has the same pros/cons as the WeakMap object.
• Typically I leverage Set objects when I need to find distinct values in a series of options, such as speaker names for a conference. After creating the Set (which omits any duplicates), I then create an empty array, loop through the Set and copy its contents to the array, and then use the sort() method of the array object to create the final, alphabetized list of unique speakers.