Replace your switch statement and multiple "if and else", using Object Literals - [en-US].

Tauan Camargo - Nov 27 '19 - - Dev Community

Alt Text

So First, What is Switch Statement?

A switch is a function that receives data, and that data will be analyzed, if this data is equal to one of our cases, it makes the instructions in that case and returns a value.

function UserPolicy(type) {
  switch(type) {
    case 'admin':
      return 'This User is Admin!'
      break
    case 'client':
      return 'This User is Client!'
      break
    case 'salesman':
      return 'This User is Salesman!'
      break
    default:
      return 'Ops, this guy doesn\'t have user profile'
  }
}

UserPolicy() // 'Ops, this guy doesn't have user profile'
UserPolicy('admin') // "This User is Admin!"
Enter fullscreen mode Exit fullscreen mode

It’s similar to if and else statements, but it should evaluate a single value – inside the switch we use a case to evaluate against each value.

When you are using lots of else if statements, something very wrong and generally you should use something like a switch as it’s more suited for the purpose and intention. Here’s some else if abuse:

function UserPolicy(type) {
  let userType
  if (type === 'admin') {
    userType = 'This User is Admin!'
  } else if (type === 'client') {
    userType = 'This User is Client!'
  } else if (type === 'salesman') {
    userType = 'This User is Salesman!'
  } else {
    userType = 'Ops, this guy doesn\'t have user profile'
  }

  return `User is type: ${userType}`
}
Enter fullscreen mode Exit fullscreen mode

Problems with switch

There are multiple issues with switch, from its procedural control flow to the non-standard-looking way it handles code blocks, the rest of JavaScript uses curly braces yet switch does not. Syntactically, it's not one of JavaScript's best, nor is its design. We're forced to manually add break; statements within each case, which can lead to difficult debugging and nested errors further down the case should we forget! We have to treat this with caution.

We often use Object lookups for things in JavaScript, often for things, we would never contemplate using switch for - so why not use an Object literal to replace the switch? Objects are much more flexible, have better readability and maintainability and we don't need to manually break; each case. They´re a lot friendlier on new JavaScript developers as well, as they´re standard Objects.

Reasons not to use switch

  • As the number of “cases” increases, the performance of the object (hash table) gets better than the average cost of the switch (the order of the matter of the case). The object approach is a hash table lookup, and the switch has to evaluate each case until it hits a match and a break.

  • More maintainable and readable. We also don’t have to worry about break; statements and cases falling through – it’s just a plain Object.

Normally, we would put a switch inside a function and get a return value. Let's do the same here and make the switch case a usable function with a return of an Object Literal:

function UserPolicy(type) {
  // We create a const that receives an object and each of its properties.
  // will be the values corresponding to our types
  const Users = {
    admin: 'This User is Admin!',
    client: 'This User is Client!',
    salesman: 'This User is Salesman!',
    default: 'Ops, this guy doesn\'t have user profile'
  }

  return Users[type] || Users.default
}

UserPolicy() // 'Ops, this guy doesn't have user profile'
UserPolicy('admin') // "This User is Admin!"
Enter fullscreen mode Exit fullscreen mode

Overview

Object literals are a more natural control of flow in JavaScript, the switch is a bit old and clunky and prone to difficult debugging errors. Objects are more extensible, maintainable, and we can test them a lot better. They’re also part of a design pattern and very commonly used day to day in other programming tasks. Object literals can contain functions as well as any other Object type, which makes them really flexible! Each function in the literal has function scope too, so we can return the closure from the parent function.

//I'm not dictating the rule - it's just another way of solving our everyday problems

. . . . . . . . . . .
Terabox Video Player