Simple refactor of value changes typescript

Question

Hello all I am using some typescript reactive forms, like this

this.formControls.propertyType.valueChanges.subscribe((value: string) => {
  if (!this.currentSelectedType) {
    this.currentSelectedType = value;
  } else {
    if (this.currentSelectedType === CbcPropertyType.Other) {
      this.openModal();
      this.currentSelectedType = value;
    } else {
      this.currentSelectedType = value;
    }
  }
});

Is there some better solution for this part of the code, thanks

Answer 1

Jeff Atwood calls this structure Arrow Code and describes it in his blog post "flattening arrow code".

The nested structure can be avoided by adding retrun statements, like:

this.formControls.propertyType.valueChanges.subscribe((value: string) => {
  if (!this.currentSelectedType) {
    this.currentSelectedType = value;
    return;
  } 

  if (this.currentSelectedType === CbcPropertyType.Other) {
    this.openModal();
    this.currentSelectedType = value;
    return;
  }

  this.currentSelectedType = value;
});

When we look closely we can see, that all three branches do nearly the same. Only if the currentSelectedType equals CbcPropertyType.Other a modal should open.

We can reduce the code to:

this.formControls.propertyType.valueChanges.subscribe((value: string) => {
  if (this.currentSelectedType === CbcPropertyType.Other) {
    this.openModal();
  }

  this.currentSelectedType = value;
});
```