Table-Driven Method: How Tchaca Stopped Suffering from if and switch in React

#javascript #beginners #webdev #programming

Once upon a time, there was a developer named Tchaca. He was a chill guy, wrote mostly clean code, and had a soft spot for strong coffee and React components. But there was one thing that haunted our hero: endless conditionals.

Picture a component that renders different types of cards depending on the user type. Tchaca used to write something like this:

if (user.type === 'admin') {
  return <AdminCard />;
} else if (user.type === 'guest') {
  return <GuestCard />;
} else if (user.type === 'subscriber') {
  return <SubscriberCard />;
} else {
  return <DefaultCard />;
}

It looked innocent enough. But over time, the component turned into a monster of if-else, switch-case, and developer tears. Until one stormy night filled with tense deploys, Tchaca discovered the Table-Driven Method.

🤔 What Is the Table-Driven Method?

It’s a technique where you replace conditional logic with a data structure - usually an object or array - that maps inputs to actions or components.

Instead of writing a bunch of ifs, you create a "table" that says: “If the type is X, use Y.”

🪄 The Magic in React

Tchaca rewrote his component like this:

const cardMap = {
  admin: AdminCard,
  guest: GuestCard,
  subscriber: SubscriberCard,
  default: DefaultCard,
};

const UserCard = ({ user }) => {
  const CardComponent = cardMap[user.type] || cardMap.default;
  return <CardComponent />;
};

✨ Boom! No if, no switch, just clean and readable code.

🧩 Another Example: Dynamic Forms

Tchaca also struggled with forms that changed depending on the field type. Before, he wrote:

if (field.type === 'text') {
  return <TextInput />;
} else if (field.type === 'select') {
  return <SelectInput />;
} else if (field.type === 'checkbox') {
  return <CheckboxInput />;
}

After embracing the Table-Driven Method:

const inputMap = {
  text: TextInput,
  select: SelectInput,
  checkbox: CheckboxInput,
};

const DynamicField = ({ field }) => {
  const InputComponent = inputMap[field.type] || DefaultInput;
  return <InputComponent {...field.props} />;
};

🧠 Why Use Table-Driven?

More readable: You can glance at the map and instantly understand what’s going on.
Easier to maintain: Adding a new type? Just add a new entry to the object.
Fewer bugs: Less logic means fewer chances to mess things up.

⚠️ When NOT to Use It

Not every problem needs a table. If the logic is super complex or depends on multiple variables, Table-Driven might not be the best fit. But for simple mappings, it’s gold.

🔍 What About the Object Lookup Pattern?

Great question. The Object Lookup Pattern is actually a specific way to implement the Table-Driven Method - using JavaScript objects as direct maps.

Here’s a quick comparison:

Concept	Table-Driven Method	Object Lookup Pattern
Definition	Replaces conditional logic with a data structure	Uses JS objects as maps for values/functions/components
Common Format	Arrays, objects, external JSON	Literal objects (`{ key: value }`)
Typical Use	Decision flows, rendering, testing	Direct mapping of values or components
React Example	Component rendering based on user type	Component lookup via object key
Focus	Organizing logic into data	Efficient key-based access

🧪 Example: Action Buttons

Using Table-Driven Method (Array):

const actionTable = [
  { type: 'save', label: 'Save', onClick: () => saveData() },
  { type: 'delete', label: 'Delete', onClick: () => deleteData() },
  { type: 'cancel', label: 'Cancel', onClick: () => cancelAction() },
];

const ActionButton = ({ actionType }) => {
  const action = actionTable.find(a => a.type === actionType) || {};
  return <button onClick={action.onClick}>{action.label || 'Action'}</button>;
};

Using Object Lookup Pattern:

const actionMap = {
  save: { label: 'Save', onClick: () => saveData() },
  delete: { label: 'Delete', onClick: () => deleteData() },
  cancel: { label: 'Cancel', onClick: () => cancelAction() },
};

const ActionButton = ({ actionType }) => {
  const { label, onClick } = actionMap[actionType] || { label: 'Action', onClick: () => {} };
  return <button onClick={onClick}>{label}</button>;
};

🏁 Conclusion

Tchaca now lives in peace. His components are lean, his deploys are smooth, and he even started using Table-Driven Method in tests and validations.

If you're tired of endless if-else blocks, maybe it's time to follow in Tchaca’s footsteps. Build your table, map your actions, and let your code breathe.

Have you used the Table-Driven Method or Object Lookup Pattern in your projects? Drop a comment - or send Tchaca a virtual coffee ☕.