기능의 인지 복잡성을 줄이는 방법은 무엇입니까?

다음과 같은 경우 기능의 인지적 복잡성이 증가합니다.

중첩 구조가 여러 개 있습니다(예: "if else"조건)

.

흐름을 끊는 코드(예: "for"루프)가 있는 경우

JavaScript/TypeScript의 인지적 복잡성은 Visual Studio Code의 SonarLint 확장을 사용하여 평가할 수 있습니다.

함수의 인지적 복잡성을 줄이기 위해 개발자는 여러 문을 하나로 축소하는 약어를 사용하여 코드를 단순화해야 합니다.

인지 복잡성을 줄이는 방법

1. 반복되는 Code/nested if else를 별도의 기능으로 이동
Nest if else 조건을 단순화하기 위해 반복되는 코드를 별도의 함수로 옮길 수 있습니다. 중첩 조건을 별도의 함수로 옮길 수도 있습니다.

complexFunction(){
if(condition1){
     if(condition2){
     }
     else{
     }
  }
else{

    }
}

//We can move the nest if to a separate function
complexFunction(){
if(condition1){
    this.anotherFunction()
  }
else{

    }
}

anotherFunction(){
 if(condition2){
     }
     else{
     }
}

2. 삼항 연산자 사용
조건이 2개인 경우 if-else 루프 대신 삼항 연산자를 사용하십시오.

checkCondition(){
if(condition){
      return true 
    }
else{
      return false
    }
}

//Ternary operator for the above if else condition

checkCondition(){
      return condition? true: false
}

3. 항상 참 또는 거짓 조건에 대한 if-else 루프를 피하십시오.
이것은 많은 초보 개발자들이 저지르는 실수 중 하나입니다. if else 루프는 항상 상수 부울 값(true 또는 false)을 반환하는 문에 대해 사용하지 마십시오.

4. if else 루프에서 여러 'or' 조건 대신 Array.includes() 사용
모든 조건을 배열로 변환한 다음 .includes() 를 사용합니다.

//condition with multiple 'or' conditions
if(fruit === 'apple' || fruit === 'mango'){}

//convert to array to use includes
const fruitList = ['apple', 'mango']
if(fruitList.includes(fruit)){}

5. 선택적 연결
우리는 ?.를 사용하여 if 검사 대신 개체 체인 깊숙이 위치한 속성의 오류를 방지합니다.

const car= {
  manufacturer: 'Ford',
  model: {
    year: 2012,
    color: 'Red'
  }
};

const carName = car.specs.warranty; 
// this will break the code as specs is undefined

const carName = car.specs?.warranty; 
// this will output undefined

6. 선택자 연산자를 사용하여 기본값 설정
변수의 기본값을 설정하기 위해 선택기 연산자||를 사용할 수 있습니다.

 variable = variable || 'default value'
 // this will return default value if variable is false 
   (null or undefined).