3 alternatives to if & else to improve code reading in javascript

Photo by Isabella and Louisa Fischer on Unsplash

Writing conditions to test expressions and variables is part of the basic logic.

In javascript the if, else if, else condition is widely used but can in some cases become difficult to write or read, or can be simplified and offer better readability of the code.

The switch will allow us to test a variable and to review the different cases.

I find this method useful when there are a lot of cases to test and/or when you can’t define the number of tests to perform when you code the function.

Usually, this method is used in Redux reducers files.

Example :

If we consider a condition to test the variable “test” to check if it contains the values “toto”, “tata”, “test” or other.

With if, else if, and else we have :

const test = “test”;if (test === "toto") {
console.log("toto");
} else if (test === "tata") {
console.log("tata");
} else if (test === "test") {
console.log("That's it !");
} else {
console.log("no success !");
};

// returns "That's it !"

With switch :

const test = "test";

switch(test) {
case "toto":
console.log("toto");
break;

case "tata":
console.log("tata");
break;

case "test":
console.log("C'est bien ça !!");
break;

default:
console.log("aucune des valeurs testée n'est vraie");
break;
};

// renvoie "C'est bien ça !!"

Note that for each test a break or a return is needed to stop the switch, otherwise it will continue the execution until the end and systematically return the default value.

Even if the switch will eventually contain more lines than the version with if, else if, and else, I find the reading easier, and thus the comprehension and maintenance.

The && operator will allow us to test if a condition is true.

I use this operator a lot to contextualize React components.

If the condition before the operator is true, the following commands will be executed, otherwise the block will be ignored.

Syntax :

condition && if true

Exemple :

const test = true;

if (test === true) {
console.log("It works");
};

// returns "It works"

Or we can write:

const test = true;

if (test) console.log("It works");

// returns "It works"

With && operator:

const test = true;

test && console.log("It works");

// returns "It works"

In a React component:

const test = true;

test &&
<div>
<ChildComponent />
</div>;

The ternary operator allows us to test a variable and to return a result if the condition is true, and another result if the condition is false.

The syntax is quite simple and intuitive: one writes the condition followed by a “?” Then the results in case of success and failure separated by a “:”

condition ? if true : if false

With if :

const test = true;

if (test === true) {
console.log("It works");
} else {
console.log("It doesn't work");
};

// returns "It works"

With ternary operator:

const test = true;

test ? console.log("It works") : console.log("It doesn't work");

// returns "It works"

There are many ways to evaluate variables and function returns in javascript, and for my part, I use a lot the && operator in React components and the ternary operator. I find that the readability of the code is improved and that it makes the code reviews easier.

Cet article est disponible en français

Product guy who likes technology, Apple, apps, gadgets and cats