Run results for: Enum to color mapping: if/else vs object lookup vs switch vs Map (20 values)

Test name	Executions per second
✓ if / else if	19,425 Ops/sec
switch	19,282 Ops/sec
Map.get	15,030 Ops/sec
object lookup (null prototype)	12,083 Ops/sec
object lookup (literal)	10,626 Ops/sec

Script Preparation code:

var N = 10000;

var STATUSES = [
  'draft', 'pending', 'queued', 'scheduled', 'running',
  'paused', 'resumed', 'retrying', 'succeeded', 'failed',
  'cancelled', 'expired', 'archived', 'deleted', 'blocked',
  'approved', 'rejected', 'review', 'published', 'unknown'
];

var DEFAULT_COLOR = 'grey';

// Deterministický PRNG, ať mají všechny prohlížeče v žebříčku stejná data.
function mulberry32(seed) {
  return function () {
    seed |= 0;
    seed = (seed + 0x6d2b79f5) | 0;
    var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

var random = mulberry32(0xc0ffee);
var DATA = new Array(N);
for (var i = 0; i < N; i++) {
  DATA[i] = { id: i + 1, status: STATUSES[Math.floor(random() * STATUSES.length)] };
}

function colorByIfElse(status) {
  if (status === 'draft') return 'grey-lighten-1';
  else if (status === 'pending') return 'amber';
  else if (status === 'queued') return 'blue-grey';
  else if (status === 'scheduled') return 'indigo';
  else if (status === 'running') return 'blue';
  else if (status === 'paused') return 'orange';
  else if (status === 'resumed') return 'light-blue';
  else if (status === 'retrying') return 'deep-orange';
  else if (status === 'succeeded') return 'green';
  else if (status === 'failed') return 'red';
  else if (status === 'cancelled') return 'brown';
  else if (status === 'expired') return 'grey-darken-2';
  else if (status === 'archived') return 'blue-grey-darken-1';
  else if (status === 'deleted') return 'red-darken-4';
  else if (status === 'blocked') return 'purple';
  else if (status === 'approved') return 'teal';
  else if (status === 'rejected') return 'pink';
  else if (status === 'review') return 'cyan';
  else if (status === 'published') return 'light-green';
  else if (status === 'unknown') return 'grey';
  else return DEFAULT_COLOR;
}

function colorBySwitch(status) {
  switch (status) {
    case 'draft': return 'grey-lighten-1';
    case 'pending': return 'amber';
    case 'queued': return 'blue-grey';
    case 'scheduled': return 'indigo';
    case 'running': return 'blue';
    case 'paused': return 'orange';
    case 'resumed': return 'light-blue';
    case 'retrying': return 'deep-orange';
    case 'succeeded': return 'green';
    case 'failed': return 'red';
    case 'cancelled': return 'brown';
    case 'expired': return 'grey-darken-2';
    case 'archived': return 'blue-grey-darken-1';
    case 'deleted': return 'red-darken-4';
    case 'blocked': return 'purple';
    case 'approved': return 'teal';
    case 'rejected': return 'pink';
    case 'review': return 'cyan';
    case 'published': return 'light-green';
    case 'unknown': return 'grey';
    default: return DEFAULT_COLOR;
  }
}

var COLORS_LITERAL = {
  approved: 'teal',
  archived: 'blue-grey-darken-1',
  blocked: 'purple',
  cancelled: 'brown',
  deleted: 'red-darken-4',
  draft: 'grey-lighten-1',
  expired: 'grey-darken-2',
  failed: 'red',
  paused: 'orange',
  pending: 'amber',
  published: 'light-green',
  queued: 'blue-grey',
  rejected: 'pink',
  resumed: 'light-blue',
  retrying: 'deep-orange',
  review: 'cyan',
  running: 'blue',
  scheduled: 'indigo',
  succeeded: 'green',
  unknown: 'grey'
};

// Bez prototypu: hodnota '__proto__' nebo 'toString' nevrátí nesmysl.
var COLORS_NULL_PROTO = Object.assign(Object.create(null), COLORS_LITERAL);

var COLOR_MAP = new Map(Object.entries(COLORS_LITERAL));

function colorByObjectLiteral(status) {
  return COLORS_LITERAL[status] || DEFAULT_COLOR;
}

function colorByObjectNullProto(status) {
  return COLORS_NULL_PROTO[status] || DEFAULT_COLOR;
}

function colorByMap(status) {
  return COLOR_MAP.get(status) || DEFAULT_COLOR;
}

// Sink brání enginu vyhodnotit výsledek jako mrtvý kód.
var sink = 0;

Tests:

if / else if
var out = new Array(DATA.length); for (var i = 0; i < DATA.length; i++) { var item = DATA[i]; out[i] = { id: item.id, color: colorByIfElse(item.status) }; } sink += out[out.length - 1].color.length;
switch
var out = new Array(DATA.length); for (var i = 0; i < DATA.length; i++) { var item = DATA[i]; out[i] = { id: item.id, color: colorBySwitch(item.status) }; } sink += out[out.length - 1].color.length;
object lookup (literal)
var out = new Array(DATA.length); for (var i = 0; i < DATA.length; i++) { var item = DATA[i]; out[i] = { id: item.id, color: colorByObjectLiteral(item.status) }; } sink += out[out.length - 1].color.length;
object lookup (null prototype)
var out = new Array(DATA.length); for (var i = 0; i < DATA.length; i++) { var item = DATA[i]; out[i] = { id: item.id, color: colorByObjectNullProto(item.status) }; } sink += out[out.length - 1].color.length;
Map.get
var out = new Array(DATA.length); for (var i = 0; i < DATA.length; i++) { var item = DATA[i]; out[i] = { id: item.id, color: colorByMap(item.status) }; } sink += out[out.length - 1].color.length;

Run results for: Enum to color mapping: if/else vs object lookup vs switch vs Map (20 values)

Mapování 20 stringových enum hodnot na barvu při stavbě pole objektů { id, color } z 10k položek. Porovnává řetěz if/else, switch, object lookup (s prototypem i bez) a Map.get. Data mají rovnoměrné rozložení hodnot enumu.

if / else if

switch

object lookup (literal)

object lookup (null prototype)

Map.get