Upgrade from using a switch statement to a more robust pattern in JavaScript

Question

Upgrade from using a switch statement to a more robust pattern in JavaScript

I am looking to enhance my app by dynamically displaying pages based on a user's type and role properties. Currently, I am using a simple switch statement that determines the view based on the user's type, like this:

switch(type) {
  case 'a':
    return CONSTANT.ONE;

  case 'b':
    return CONSTANT.TWO;

  default:
    return null;
}

While this switch statement works for now, it is not ideal for scalability as the number of types and roles increases. Can anyone recommend a more effective pattern to handle this scenario? I considered using a state pattern, but I am unsure if that is too complex for simply returning a string. Any suggestions would be greatly appreciated.

Thank you.

javascript design-patterns

Answer 1

Answer №1

In a scenario similar to @MarkusJarderot's approach, I have a slightly different method with key distinctions in functionality:

const keyMap = {
    'x': VALUE.ONE,
    'y': VALUE.TWO,
    'default': null
};

return keyMap.hasOwnProperty(option) ? keyMap[option] : keyMap["default"];

Even when the value of keyMap[option] evaluates to falsy, this method will still return it instead of defaulting to null. This feature proves beneficial especially when handling values like 0 or an empty string.

Answer 2

In a scenario similar to @MarkusJarderot's approach, I have a slightly different method with key distinctions in functionality:

const keyMap = {
    'x': VALUE.ONE,
    'y': VALUE.TWO,
    'default': null
};

return keyMap.hasOwnProperty(option) ? keyMap[option] : keyMap["default"];

Even when the value of keyMap[option] evaluates to falsy, this method will still return it instead of defaulting to null. This feature proves beneficial especially when handling values like 0 or an empty string.

Answer 3

Answer №2

Utilize an object for quick referencing:

let categories = {};

You can then include categories like so:

categories['x']=CONSTANT.ONE;

and access them like this:

let yyy = categories['x'];

By using this method, you can easily manage categories in various parts of your code

Answer 4

Utilize an object for quick referencing:

let categories = {};

You can then include categories like so:

categories['x']=CONSTANT.ONE;

and access them like this:

let yyy = categories['x'];

By using this method, you can easily manage categories in various parts of your code

Answer 5

Answer №3

If you're looking for a versatile solution, consider implementing the Strategy Pattern:

//In the absence of the strategy pattern
gameDifficulty(difficulty) {
  switch(difficulty){
    case 'easy':
      easyGameMode();
      break;
    case 'difficult'
      difficultMode();
      break;
  }
}

// Implementing Strategy
const strategies = {
  easy: easyGameMode(),
  difficult: difficultGameMode(),
  //Additional strategies can be added here
  __default__: normalGameMode()
}

const easyGameMode = (game) => {
  game.difficulty(1);
  //Implement actions specific to easy game mode here
  return game;
}

const normalGameMode= (game) => {
  game.difficulty(2);
  //Implement actions for normal game mode here
  return game;
}

const difficultGameMode = (game) => {
  game.difficulty(3);
  //Implement actions for difficult game mode here
  return game;
}

const startGame = (game, difficulty) => {
  const gameModifier = strategies[difficulty] ?? strategies.__default__;
  return gameModifier(game, difficulty);
}

For further details on this concept, check out this informative article.

Answer 6

If you're looking for a versatile solution, consider implementing the Strategy Pattern:

//In the absence of the strategy pattern
gameDifficulty(difficulty) {
  switch(difficulty){
    case 'easy':
      easyGameMode();
      break;
    case 'difficult'
      difficultMode();
      break;
  }
}

// Implementing Strategy
const strategies = {
  easy: easyGameMode(),
  difficult: difficultGameMode(),
  //Additional strategies can be added here
  __default__: normalGameMode()
}

const easyGameMode = (game) => {
  game.difficulty(1);
  //Implement actions specific to easy game mode here
  return game;
}

const normalGameMode= (game) => {
  game.difficulty(2);
  //Implement actions for normal game mode here
  return game;
}

const difficultGameMode = (game) => {
  game.difficulty(3);
  //Implement actions for difficult game mode here
  return game;
}

const startGame = (game, difficulty) => {
  const gameModifier = strategies[difficulty] ?? strategies.__default__;
  return gameModifier(game, difficulty);
}

For further details on this concept, check out this informative article.

Upgrade from using a switch statement to a more robust pattern in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Update the style of the legend from bars to a line chart in chart.js version 2.4.0

Ways to extract specific HTML from a jQuery element

What could be causing the JSON.parse() function to fail in my program?

Updating the value of an Angular select on change is not being reflected

Setting the height of columns in a Bootstrap panel to 100%

Exploring the World with GPS Technology and Coding

The integration of VueJS with the Canva Button JS API amplifies the

The npm command encountered a permission issue when trying to install node-sass

How can I create a customized scrollbar for a div element in an Angular 2.0 CLI project?

Embed Socket.IO into the head tag of the HTML document

What is the recommended data type to assign to the `CardElement` when using the `@stripe/react-stripe-js` package in TypeScript?

Is the default behavior of Ctrl + C affected by catching SIGINT in NodeJS?

Resizing columns in HTML table remains effective even after the page is refreshed

When a button is clicked, load two separate pages into two distinct divs at the same time

javascript display an alert when the page is loaded

Learn how to establish a state using an array and effectively utilize the setState() method in React

Unexpected disappearance of form control in reactive form when using a filter pipe

Establishing a recurring interval when the component mounts for a specified period of time

Discover how to retrieve full response data by entering text into a text field using Reactjs

I am struggling with grasping the concept of the event system