Replace Switch statement with Record - Typescript

Table Of Contents
* 📢ANNOUNCEMENT
* 🚀INTRO
* ⚙IMPLEMENTATION
* 👨🏻‍💻CODESANDBOX
* 🤔CONCLUSION
* 🙏THANK YOU

📢 ANNOUNCEMENT!

Hello coding dudes and dudesses! Hope you are all well and healthy. It's been quite a difficult time around the globe. I haven't been active for some time. I want to announce that I will communicate with you (through blogs) more often and try to tackle coding, engineering and business with you. Without further ado, let's get into it!

🚀 INTRO

So, you probably came across a situation where you have something like this:



switch(someVariable: string) {
   case 'someValue': 
        ....
        break;
   case 'someOtherValue':
        ....
        break;
   case 'somethingElse':
        ....
        break;
   ...
}

You probably did, right? Well, there is nothing wrong about this, It is perfectly correct way of replacing the If statement. But we can notice that this can also get a bit hard to follow and manage. With the power of TypeScript we can actually make this even simpler.

⚙ [IMPLEMENTATION]

Let's consider that each case within the switch statement usually and in the best case has three lines of code.



case 'valueToCompareWith':       //first line
      someFunctionToExecute();  //line two
      break;                     //third line

Example
We have an assignment:

We should fetch some financial or product data using two different functions (handlers) that someone provided for us. Let's say getFinancialData() and getProductData().
For this occasion we are currently using the same indicator, let's call it dataHandlerIndicator and it will be of type 'financial' | 'product'.

Let's make a switch statement for this example



type DataType = 'financial' | 'product';
const dataHandlerFunction = (dataHandlerIndicator: DataType) => {
   switch(dataHandlerIndicator) {
      case 'financial':
         getFinancialData();
         break;
      case 'product':
         getProductData();
         break;
   }
}

So, for these two different DataType types we have 6 lines of code handling it and making it fairly easy to read. If we had 3 types we would have 9 lines of code, and for 10 different data types, well we all understand maths, we will have ~ 30 lines of code, maybe even more if we add some additional logic to the case statement.

Let's simplify this by using Record!



// functions to be called
const getFinancialData = () => {
    console.log('Fetch financial data...');
}

const getProductData = () => {
    console.log('Fetch product data...');
}
// end functions to be called ...

type DataType = 'financial' | 'product';

const getDataSelector: Record<DataType, () => void> = {
   'financial': getFinancialData,
   'product': getProductData
}

const dataHandlerFunction = (dataHandlerIndicator: DataType) => {
   getDataSelector[dataHandlerIndicator]()
}

dataHandlerFunction('product'); // 'Fetch product data...'
dataHandlerFunction('financial'); // 'Fetch financial data...'

TRY OUT THE CODESANDBOX EXAMPLE

🤔 CONCLUSION

Now, we can see that with the Record we have two lines of code describing the functions that will be called based on the DataType key value, and we have one line getDataSelector[dataHandlerIndicator]() that will call corresponding function based on the dataHandlerIndicator we pass to the function. Pretty neat, right!?

We reduced number of lines
Our code is much more readable
In order to add additional functionality, just update the Record with the new (key, value) pair, and that's it, you have a new selector for fetching new data based on the data type selector.