Vue JS - Making my conditions in a function more efficient

Question

I get the feeling that this function can be shortened, but I'm not sure what would be the best way to do it. I would like to make the following function more efficient. Your help will be greatly appreciated.

My Function

onStudentActionSelect: function () {
      if (this.selectedRows.length === 1) {
        this.$store.commit(SET_MODAL_OPTIONS, {
          modalContent: MODAL_CONTENT.DELETE_STUDENT(this.selectedRows[0].name),
          modalSettings: MODAL_SETTINGS.CANCEL_DELETE,
          modalCallback: this.deleteStudent
        })
      } else if (this.selectedRows.length > 1) {
        this.$store.commit(SET_MODAL_OPTIONS, {
          modalContent: MODAL_CONTENT.DELETE_STUDENTS(this.selectedRows.length),
          modalSettings: MODAL_SETTINGS.CANCEL_DELETE,
          modalCallback: this.deleteStudents
        })
      }
    }

You could use ternary expressions to turn this into a single commit call, but readability will suffer. Imo, leave it as it is. — user5734311
– user5734311, Commented Jan 15, 2021 at 9:14

Sumurai8 · Accepted Answer · 2021-01-15 09:27:51Z

3

The only thing that changes is the content of your modal, so you can determine that before doing a commit to the store. Simplifying code like this usually involves determining the parts that stay the same, and preparing the rest in variables/parameters.

onStudentActionSelect: function () {
  // Do nothing if we have nothing selected
  if (!this.selectedRows.length) {
    return;
  }

  const modalContent = this.selectedRows.length === 1 ? MODAL_CONTENT.DELETE_STUDENT(this.selectedRows[0].name) : MODAL_CONTENT.DELETE_STUDENTS(this.selectedRows.length);

  this.$store.commit(SET_MODAL_OPTIONS, {
    modalContent,
    modalSettings: MODAL_SETTINGS.CANCEL_DELETE,
    modalCallback: this.deleteStudent
  })
}

edited Jan 15, 2021 at 9:27

answered Jan 15, 2021 at 9:15

Sumurai8

20.8k11 gold badges70 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boussadjra Brahim · Accepted Answer · 2021-01-15 09:15:36Z

2

Move the condition to the place where there's a difference between the two condition blocks :

onStudentActionSelect: function () {
   let value;
   if (this.selectedRows.length === 1) {
         value=this.selectedRows[0].name
       }else if(this.selectedRows.length > 1){
          value=this.selectedRows.length
      }
        this.$store.commit(SET_MODAL_OPTIONS, {
          modalContent: MODAL_CONTENT.DELETE_STUDENT(value),
          modalSettings: MODAL_SETTINGS.CANCEL_DELETE,
          modalCallback: this.deleteStudent
        })
      
    }

using the ternary operator doesn't exclude the case when the length===0

answered Jan 15, 2021 at 9:15

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Comments

Kevin Zhang · Accepted Answer · 2021-01-15 09:15:54Z

1

Deal with the if/else with ? operator for shortened purpose, here is the code:

onStudentActionSelect: function () {
      this.$store.commit(SET_MODAL_OPTIONS, {
          modalContent: MODAL_CONTENT.DELETE_STUDENT(this.selectedRows.length === 1 ? this.selectedRows[0].name : this.selectedRows.length),
          modalSettings: MODAL_SETTINGS.CANCEL_DELETE,
          modalCallback: this.deleteStudent
        })
    }

answered Jan 15, 2021 at 9:15

Kevin Zhang

1,1041 gold badge6 silver badges16 bronze badges

1 Comment

Adam Orłowski Over a year ago

You condition will set this.selectedRows.length even when Array.length is 0. But original conditions does not. So it is bad solution.

Collectives™ on Stack Overflow

Vue JS - Making my conditions in a function more efficient

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related