Forem: Shin

How do you write codes for conditional statement?

Shin — Tue, 28 Jun 2022 02:34:36 +0000

About this post

When we use if statement in the conditional logic, the indentation will be deep, which makes difficult to read the code.
In this post, the other types of implementation for the conditional logic will be introduced.
I would like every developer to get other ideas apart from if statement for the condition and to write the code which is easy to maintain.

Target readers

the beginners who just started the development
the ones who want to know how to handle complicated conditional statement
the ones who reviews codes in the development team

conditional statements

In this post, the four types of implementation for the conditional statement are introduced.

if / if-else
switch case
dictionary
strategy pattern

If you know other ways of implementation apart from the ways introduced in this post, I will be happy that you will share by comment.

if / if-else

if/if-else will be preferable if the condition includes some expressions like <=, >= or ! and the logic inside the if statement is not so big.

const examinationScore = doExamination();
if (examinationScore >= 80) {
  // not so big logic
  console.log('good job :)');
} else if (examinationScore >= 60) {
  // not so big logic
  console.log('so so :()');
} else {
  // not so big logic
  console.log('do more hardwork ;(');
}

Note that you can use strategy pattern which is mentioned later if the logic inside the if statement is big, because...

hard to memorize what is the condition of the logic inside the if statement (hard to read the codes)
hard to maintain the codes

switch case

You can choose switch case statement if the number of conditions is increased.

const gpaScore = getGPA();
switch (gpaScore) {
  case 2:
    // do some small logic
    break;
  case 3:
    // do some small logic
    break;
  case 4:
    // do some small logic
    break;
  case 5:
    // do some small logic
    break;
  default:
    // do some small logic
    break;
}

Note that you can use dictionary which is mentioned below when some value is returned under the specific condition.

dictionary

If you wanna write switch case like the below, you can consider to use dictionary instead.
It is suitable to use dictionary when some value is returned under the specific condition.

(switch)

const weekdayName = getWeekday();
switch (weekdayName) {
  case 'monday':
    console.log('Let\'s start a new week!');
    break;
  case 'tuesday':
    console.log('This is second day of this week. Do your best!');
    break;
  case 'wednesday':
    console.log('If you need, let\'s take break');
    break;
  case 'thursday':
    console.log('The half of the week done!');
    break;
  case 'friday':
    console.log('If you do your best today, tomorrow is holiday!');
    break;
}

It is possible to forget break when you add new condition, and the logic tends to be big if you use switch case.

const weekdayName = getWeekday();
switch (weekdayName) {
  case 'sunday':
    console.log('Hoo! Today is holiday!'); // oops! if you forget "break", it makes some bugs!
  case 'monday':
    console.log('Let\'s start a new week!');
    break;
  case 'tuesday':
    console.log('This is second day of this week. Do your best!');
    break;
  case 'wednesday':
    console.log('If you need, let\'s take break');
    break;
  case 'thursday':
    console.log('The half of the week done!');
    break;
  case 'friday':
    console.log('If you do your best today, tomorrow is holiday!');
    break;
}

(dictionary)

const weekdayMessages = {
  monday: 'Let\'s start a new week!',
  tuesday: 'This is second day of this week. Do your best!',
  wednesday: 'If you need, let\'s take break',
  thursday: 'The half of the week done!',
  friday: 'If you do your best today, tomorrow is holiday!'
};
const weekdayName = getWeekday();
const message = weekdayMessages[weekdayName];
console.log(message);

If new weekday should be added, it is easy to add it and to keep the maintainability.

const weekdayMessages = {
  // just add elements if you wanna add new weekday
  sunday: 'Hoo! Today is holiday!',
  monday: 'Let\'s start a new week!',
  tuesday: 'This is second day of this week. Do your best!',
  wednesday: 'If you need, let\'s take break',
  thursday: 'The half of the week done!',
  friday: 'If you do your best today, tomorrow is holiday!'
};
const weekdayName = getWeekday();
const message = weekdayMessages[weekdayName];
console.log(message);

strategy pattern

If you use object oriented language (like Java, C# or Ruby), you can choose strategy pattern instead of if / if-else statement.

If you use if / if-else statement, the logic will be below
This is not easy to read and maintain the codes.

public class FooHandler {
    public void doSomeLogic() {
      if (/*condition A*/) {
        // logic A (big logic)
      } else if (/*condition B*/) {
        // logic B (big logic)
      } else if (/*condition C*/) {
        // logic C (big logic)
      }
    }
}

If you wanna add logic D newly or change logic B, you need to change the logic of FooHandler.
As a result, you need to test the whole class of FooHandler again and again.

public class FooHandler {
    public void doSomeLogic() {
      if (/*condition A*/) {
        // logic A (big logic)
      } else if (/*condition B*/) {
        // you need to edit FooHandler if you wanna modify logic B
        // logic B (big logic)
      } else if (/*condition C*/) {
        // logic C (big logic)
      } else if (/*condition D*/) {
        // you need to edit FooHandler if you wanna add logic D
        // logic D (big logic)
      }
    }
}

However, strategy pattern enables to write the readable and maintainable codes.
In strategy pattern, interface is used.

public class Program {
    public static void main () {
        FooHandler handler = new FooHandler();
        // choose the class which you wanna execute
        handler.doSomeLogic('Bbb');
    }
}

public class FooHandler {
    public void doSomeLogic(String className) {
        // if statement is not need here
        IFoo hogeInstance = (IFoo) Class.forName(className).newInstance();
        String result = hogeInstance.execute();
    }
}

public interface IFoo {
    execute();
}

// if you wanna add / change / delete the logic, you just edit the individual class Aaa, Bbb or Ccc
public class Aaa implements IFoo {
    public void execute() {
        // logic A
    }
}

public class Bbb implements IFoo {
    public void execute() {
        // logic B
    }
}

public class Ccc implements IFoo {
    public void execute() {
        // logic C
    }
}

The class diagram

The good point of strategy pattern is...

easy to add or change the logic (easy to add or change the logic of individual class Aaa, Bbb, Ccc, Ddd).
no need to write if / if-else, so the logic will not be complicated.

public class Program {
    FooHandler handler = new FooHandler();
    // choose the class which you wanna execute
    handler.doSomeLogic('Bbb');
}

public class FooHandler {
    public void doSomeLogic(String className) {
      // if statement is not need here
      IFoo hogeInstance = (IFoo) Class.forName(className).newInstance();
      String result = hogeInstance.execute();
    }
}

public interface IFoo {
    execute();
}

// if you wanna add / change / delete the logic, you just edit the individual class Aaa, Bbb or Ccc
public class Aaa implements IFoo {
    public void execute() {
        // logic A
    }
}

// if you wanna modify logic B, you just edit class BBb (no need to test again for other classes)
public class Bbb implements IFoo {
    public void execute() {
        // logic B
    }
}

public class Ccc implements IFoo {
    public void execute() {
        // logic C
    }
}

// if you wanna add new logic, you just add new class (no need to test again for other classes)
public class Ddd implements IFoo {
    public void execute() {
        // logic D
    }
}

Hope you enjoy a good life with conditional statements!

References

Strategy pattern - Wikipedia

Vue.js, Nuxt.js, Vuetify - open progressbar from TypeScript by using store while the process

Shin — Mon, 13 Jun 2022 06:27:48 +0000

About this post

on the web page, the progress bar tends to be global component.
And, it is preferred to be opened from TypeScript (not from Vue template using v-if ) because the bar should be opened only while the process.
In this post, the way of implementation about progress bar opened from TypeScript is introduced.

Target readers

the developers who want to implement progressbar by Vue.js or Nuxt.js
the developers who have basics about store and Vuetify.js (some basic parts of store and Vuetify will be omitted.)

Versions

content	version
nuxt	2.15.8
nuxt-typed-vuex	0.3.0
vue	2.6.14
vuetify	2.6.1

the directory structure

sampleProject
├componens
| └progressbar.vue
├pages
| └index.vue
├store
| ├index.ts
| └progressbar.ts
└types
  └index.d.ts

Steps to open the progress bar from TypeScript

the heavy process is executed.
the store of progressbar is called.
while the heavy process is executed, progress bar component is shown thanks to the store of of progressbar.
after the heavy process is done, progress bar component is not shown anymore.

Create a store to control progress bar

Create store/progressbar.ts.

import { mutationTree, actionTree } from 'typed-vuex';

// isShown is to control whether progress bar is shown or not
export const state = () => ({
  isShown: false as boolean,
});
export type RootState = ReturnType<typeof state>;

export const mutations = mutationTree(state, {
  change(state, isShown: boolean) {
    state.isShown = isShown;
  },
});

export const actions = actionTree(
  { state, mutations },
  {
    async open({ commit }, action: Function) {
      // only while action is executed, the progress bar is opened
      commit('change', true);
      try {
        await action();
      } finally {
        // even if the argument action throws an error, the progress bar should be closed
        commit('change', false);
      }
    },
  },
);

import {
  getAccessorType,
  getterTree,
  mutationTree,
  actionTree,
} from 'typed-vuex';
// if there is other stores, import here
import * as progressbar from './progressbar';

export const state = () => ({});
export const getters = getterTree(state, {});
export const mutations = mutationTree(state, {});
export const actions = actionTree({ state, getters, mutations }, {});
export const accessorType = getAccessorType({
  state,
  getters,
  mutations,
  actions,
  modules: {
    // if there is other stores, add here
    progressbar,
  },
});

Extend the types for vue so that the store can be accessed from the file of vue extension.
create types/index.d.ts

import { accessorType } from '~~/store';

declare module 'vue/types/vue' {
  interface Vue {
    $accessor: typeof accessorType;
  }
}

Create a progress bar component

By the implementation of this.$store.subscribe, catch the change notification of store progressbar and change the visibility according to isShown store value.

<template>
  <!-- set z-index so that this progress bar can be shown above the modal dialog -->
  <v-overlay z-index="100" :value="isShown">
    <v-progress-circular indeterminate color="primary"></v-progress-circular>
  </v-overlay>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'AppProgressbar',
  data() {
    return {
      isShown: false,
    };
  },
  created() {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'progressbar/change') {
        this.isShown = state.progressbar.isShown;
      }
    });
  },
});
</script>

Open progress bar from TypeScript

Create pages/index.vue .
Only in the scope of await this.$accessor.progressbar.open(async () => {}); , the progress bar is shown.

<template>
  <button @click="doHeavyProcess">Execute</button>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  methods: {
    async doHeavyProcess() {
      await this.$accessor.progressbar.open(async () => {
        // in this scope, the progress bar is shown
        await this.$axios.get('https://example.com');
      });
      // out of the scope of progress bar, the progress bar is not shown
    },
  },
});
</script>

References

How to create a global snackbar using Nuxt, Vuetify and Vuex.