When writing a React project, I found that I used too many if else, so WHEN refactoring the code, I tried to delete a large number of if else, and found that the code became simpler and more readable. So if you also have a lot of if else in your code, you’re probably doing something wrong.

In code Reviews, I will focus on the following questions:

  • A function does several things. Do you want to separate it so that a function only does one thing?
  • Check the functionif elseAnd see if I can replace it.
  • How to improve readability? For example, replace it with design patternsif elseObject mapping is my favorite.
  • If you have to useif else, then deleteelseTo retainifAnd returns the default value.

I’m going to show you a couple of examples of how to replace if else.

deleteelse

Refactoring:

if (red) {
  return false;
} else if (blue) {
  return false;
} else {
  return true;
} 
Copy the code

After the refactoring:

if (red || blue) {
    return false;
}
return true;
Copy the code

The refactored code can see the default return value visually, making it more concise and readable.

Combination function

When you find a function that does a lot of things, combinatorial functions are a good way to deal with it. Separate functions into multiple functions and combine them.

For example, let’s create a function that generates a female animal with fur and claws

import { flow } from 'lodash';

const femaleAnimalsWithFurAndClaws = flow(
  getFemales,
  getAnimalsWithFur,
  getAnimalsWithClaws,
)(animals);
Copy the code

The code is handled in such a way that functions such as getFemales can easily be reused.

Object mapping pattern

This is one of my favorite design patterns and can be used in many scenarios, both front-end and back-end coding. The benefit of this is that it makes the code simple and easy to read. Every time I use this design pattern, I feel that my code is not code, but instructions (^_^).

Here’s a simple example:

const colors = {
  red: false.blue: false.'default': true};const colorMapper = color= > colors[color] || colors['default'];

const color = colorMapper(item.color);
Copy the code

It consists of two parts, an object to store the returned results and a mapping function.

We set the default value so that no error is reported when colorMapper is called, even if no argument is passed, or if an error argument is passed, and the default value is returned. Later maintenance, we can easily add other colors.

Of course we can also use switch to achieve the same effect, personally I don’t like this syntax, but object mapping is more elegant (^_^).

Object mapping mode + React

Writing projects with React is where object mapping comes into its own. When we render many different components, we need to write a lot of conditional judgments in our code. If you use the object mapping pattern, the problem becomes simpler. Look at the following example:

First, the data looks like this: each object has a Type and content key.

const items = [{
 type: ‘hero’,
 content: : {... }, {},type: 'text'.content: : {... }, {},type: 'image_and_text'.content: : {... }, {},type: 'text'.content: : {... }, {},type: 'call_to_action'.content: : {... }}];Copy the code

Then write a mapping function, where each key represents a React component, and each component has a prop, which is the content in the data above.

const components = {
 hero: HeroComponent,
 text: TextComponent,
 image_and_text: ImageAndTextComponent,
 call_to_action: CallToActionComponent,
 'default': null};const componentMapper = type= > 
components[type] || components['default'];
Copy the code

Then you can use it in your project:

import react from'the react;const RenderItems = props= > {
 
 const componentList = props.items((item, index) = > {
   const Component = componentMapper(item.type);
   return <Component content={item.content} />
 };

 return (
  <div>
   {componentList}
  </div>)};Copy the code

Thanks for reading!

This article is translated from Fredrik Jensen’s If… Else, or not!