Replaces switch statements by objects (Literal Object look-up)

In JavaScript we spend half our lives working with objects, creating them, manipulating them, because (in case you don't know it yet)....

What is a switch statement?

A switch statement takes an input, evaluates it against a series of cases and provides an output.

A very basic example:

If we want to do something more useful we can implement this in a function:

If you notice, it is similar to the if and else statements, but it should evaluate a single value, however inside the switch we use a case to evaluate against each of the values.

When you start to see a lot of else if statements, the code starts to cry out for a switch

This implementation is error-prone, with a verbose and ugly syntax, very ugly. For the moment, the switch option is still better, but...

Problems with switch statement

1. Procedural and imperative control flow.
2. Its non-standard format for handling code blocks: the rest of JavaScript uses curly braces; switch does not.
3. Syntactically, it is not one of the best JavaScript statements.
4. We are forced to manually add break statements inside each case, which can lead to difficult debugging and nested errors if we forget to put it in.

Literal Object look-up

Let's start by creating a simple object that returns a String:

We have saved a few lines and, in my opinion, the data has a much cleaner presentation and, more importantly, it looks more like the syntax we are used to working with JavaScript. We can even simplify it further, without a default case:

Vale, muy bien, ¿y si lo que necesito es algo más complejo que evaluar un String? Bueno, pues como en JavaScript...

even the functions themselves, we can also do something like this:

I find it easier to read and maintain. Notice how by doing it this way we don't have to worry about break sentences.

Usually, we would put a switch inside a function and get a return value, so let's do the same here:

Okay, fine, but a "default" case is not being contemplated here. Okay, let's believe it:

We can simplify if and else by using the or || operator within an expression:

We don't always have to return inside the function either, we can change the references to any variable and then return it:

These are very basic solutions, and Object literals contain a function that returns a String, in case you only need a String, you could use a String as the key value - sometimes functions will contain logic, which will be returned by the function. If you are mixing functions with strings, it may be easier to use a function at all times to save you looking up the type and invoking if it is a function.

Object Literal “fall through”

We can also emulate the "fall through", typical of switch statements (which means that more than one case can apply to a specific piece of code):

We let basic and free "fall through" by not adding a break, which makes the code look simpler, more declarative and less error-prone:

Notice that we are not handling the 'default' case here, but I'm meeting to go to the movies and I'm already late, do you feel like implementing it yourself 😉.

jUpi🧑🏽💻