Determine the appropriate value either through key retrieval or conditional statements

Question

Determine the appropriate value either through key retrieval or conditional statements

My goal is to enhance the efficiency of a slider that contains numerous conditional statements triggered during sliding/swiping actions.

Which approach yields better performance?

1- Utilizing a predefined object with key conditions

const controller = (config) => {
    top: {
      positionVertical: false,
      orderAfter: false,
      width: '100%',
      height: config.height + 'px',
    },
    bottom: {
      positionVertical: false,
      orderAfter: true,
      width: '100%',
      height: config.height + 'px',
    },
    left: {
      positionVertical: true,
      orderAfter: false,
      width: config.width + 'px',
      height: '100%'
    },
    right: {
      positionVertical: true,
      orderAfter: true,
      width: config.width + 'px',
      height: '100%'
    }
};

this.gallery.sub$.pipe(
  map(({state, config}) => this.controller(config)[config.position])
);

2- Implementing standard if-else or switch case statements

this.gallery.sub$.pipe(
  map(({state, config}) => {
    switch(config.position) {
       case 'top': return {
         positionVertical: false,
         orderAfter: false,
         width: '100%',
         height: config.height + 'px',
       }
       case 'left': return {
         positionVertical: true,
         orderAfter: false,
         width: config.width + 'px',
         height: '100%'
       }
       case 'right': return {
         positionVertical: true,
         orderAfter: true,
         width: config.width + 'px',
         height: '100%'
       }
       default: return {
         positionVertical: false,
         orderAfter: true,
         width: '100%',
         height: config.height + 'px',
      }
    }
  })
);

Your insights and additional explanations are encouraged.

javascript performance typescript ecmascript-6 conditional-statements

Answer 1

Answer №1

When comparing the two versions of the code, it's highly unlikely that you will notice any performance variance. According to the test results conducted by Yuan, even with 10,000 entries in your slider, there should not be any significant difference. Although these tests were probably done on a desktop CPU, it is safe to assume that the impact on a mobile CPU would also be minimal.

However, based on fundamental principles, it is easy to infer which version is faster - the second one, simply because it undertakes less work. Yuan's tests confirm this conclusion, particularly evident in extreme scenarios like 10,000,000 entries (although the specifics of the test setup are not provided).

Let's delve deeper into why the second version is the more efficient option. If we examine the first version, it follows a multi-step process for each entry:

It calculates values for all four cases and generates an object for each case.
It constructs a new master object containing all four of these inner objects.
It selects one of the inner objects based on the config.position and disregards the rest.

In contrast, the second version simplifies this process:

It uses config.position to determine which type of object to create out of the four possibilities.
It constructs only the selected object and ignores the other three types.
There is no third step required.

It is logical to presume that the task of calculating and constructing four distinct objects, along with a container object to encapsulate them, will take longer than the operations involved in calculating and constructing just one of those objects.

From a stylistic perspective, a minor adjustment could be made to enhance the second version. The default: case could be modified to case 'bottom': to align with the other cases and improve clarity of intention.

Answer 2