깨끗한 코드(If's 단순화)

.ltag__user__id__386677 .follow-action-button {
배경색: #343c35 !중요;
색상: #f5f5f5 !중요;
border-color: #343c35 !중요;
}

클린 코드 스튜디오 팔로우

Clean Code Clean Life ~ Simplify

let person = { 
   phone: { 
      exists: false, 
      number: '+1 (555) 555-5555' 
   }
}

의문:

We have a 9 line function that goes three indentations deep.

We can simplify this function. The question is, how much more readable are we able to make this function?

Through six simple iterations of refactoring this function we are going to simplify this hasUSNumber function into a single line with zero indents.

1: 전통적인 if-else 문(중첩된 if 포함)

let hasUSNumber = dude => {
   if (dude.phone.exists === true) {
      if (dude.phone.number.startsWith('+1')) {
        return true
      }
   } else {
        return false
   }    
}

2: 중첩된 if를 제거하기 위한 역 if-else 조건

hasUSNumber = dude => {
   if (dude.phone.exists === false) {
      return false
   }
   else if (dude.phone.number.startsWith('+1')) {
      return true
  }
}

3: 원래 if 및 중첩된 if 문을 결합하고 조기에 반환하여 else-if 문을 모두 함께 제거합니다.

hasUSNumber = dude => {
   if (dude.phone.exists && dude.phone.number.startsWith('+1')) {
      return true 
   }

   return false
}

4: 조건 자체를 직접 반환하고 if 문과 반환 문 중 하나를 제거합니다.

hasUSNumber = dude => {
   return dude.phone.exists && dude.phone.number.startsWith('+1')
}

5: 암시적(화살표) js 함수 사용, "return"키워드 및 함수 중괄호 제거

hasUSNumber = dude => dude.phone.exists && dude.phone.number.startsWith('+1')

6: "dude"를 제거하여 라인을 줄여야 할 필요성을 제거할 수 있도록 전화 속성을 잡기 위해 함수 매개변수를 구조화합니다. 성명서 내 두 번"

hasUSNumber = ({ phone }) => phone.exists && phone.number.startsWith('+1')

Batta bing bodda 붐, 우리가 머리와 응용 프로그램에 더 많은 공간을 만든 것과 같습니다.

시작 기능

hasUSNumber = dude => {
   if (dude.phone.exists === true) {
      if (dude.phone.number.startsWith('+1')) {
        return true
      }
   } else {
        return false
   }    
}

엔딩 기능

hasUSNumber = ({phone}) => phone.exists && phone.number.startsWith('+1')

9줄을 1줄로, 3개 들여쓰기를 0개로, 181자를 74자로 단순화했습니다.


미친 부분은 reactjs, vuejs, angular 및 거의 모든 프런트 엔드 프로젝트에서 이와 같은 if 문이 항상 발생하는 경우 단순화할 수 있는 리팩토링 기회입니다!

눈을 떼지 마십시오. 프로젝트, 팀, 수천 줄의 코드를 저장하게 될 것입니다!

우리가 사용한 리팩토링 트릭 개요

역조건부 검사
리팩토링
if ($x === true)에게
if ($x === false)

&& 연산자를 사용하여 중첩된 if를 하나의 명령문으로 결합
리팩토링
if ($x === true) if ($y === true)에게if ($x === false && $y === false)

해당 조건이 true인 경우 true 대신 직접 조건 자체를 반환합니다

.


리팩토링

```js
  if ($x === true) {
    return true
  } else {
    return false
  }
```

에게
return $x
프로젝트 전체에서 이러한 종류의 리팩토링을 50번 수행한다고 상상해 보십시오. 당신은 엄청난 영향을 미칠 것입니다!



Clean Code Studio
클린코드 클린라이프 ~ 심플하게!

Refactoring - if else code smells