Map.get(key) vs. object[key]

Benchmark created on October 30, 2023

Setup

const responsiveKeys = [
  // border
  'border',
  'borderWidth',
  'borderColor',
  'borderStyle',
  'borderRadius',
  'borderHorizontal',
  'borderVertical',
  'borderTop',
  'borderTopWidth',
  'borderTopColor',
  'borderTopStyle',
  'borderTopRightRadius',
  'borderTopLeftRadius',
  'borderRight',
  'borderRightWidth',
  'borderRightColor',
  'borderRightStyle',
  'borderBottom',
  'borderBottomWidth',
  'borderBottomColor',
  'borderBottomStyle',
  'borderBottomRightRadius',
  'borderBottomLeftRadius',
  'borderLeft',
  'borderLeftWidth',
  'borderLeftColor',
  'borderLeftStyle',

  // color
  'color',
  'backgroundColor',

  // grid
  'columnGap',
  'templateColumns',
  'autoColumns',
  'rowGap',
  'templateRows',
  'autoRows',
  'autoFlow',
  'templateAreas',
  'justifyItems',
  'alignItems',
  'justifyContent',
  'alignContent',

  // grid item
  'column',
  'columnStart',
  'columnEnd',
  'row',
  'rowStart',
  'rowEnd',
  'justifySelf',
  'alignSelf',

  // flex
  'flexDirection',
  'flexWrap',

  // flex item
  'flexGrow',
  'flexShrink',
  'flexBasis',
  'order',

  // layout
  'display',
  'width',
  'minWidth',
  'maxWidth',
  'height',
  'minHeight',
  'maxHeight',
  'verticalAlign',
  'overflow',

  // spacing
  'margin',
  'marginHorizontal',
  'marginVertical',
  'marginTop',
  'marginRight',
  'marginBottom',
  'marginLeft',
  'padding',
  'paddingHorizontal',
  'paddingVertical',
  'paddingTop',
  'paddingRight',
  'paddingBottom',
  'paddingLeft',

  // typography
  'textAlign',
]

function transform(value) {
	return value
}

const objectLookup = responsiveKeys.reduce((acc, key) => {
  acc[key] = transform
  return acc
})

const mapLookup = new Map()
responsiveKeys.forEach((acc, key) => {
  mapLookup.set(key, transform)
})

Test runner

['display', 'unknown', 'marginHorizontal'].forEach(key => mapLookup.get(key))

['display', 'unknown', 'marginHorizontal'].forEach(key => objectLookup[key])

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on October 30, 2023