일반적으로 조건 분기나 루프가 많을수록 그 함수의 버그의 혼입 확률이 올라간다고 합니다. 함수의 복잡도를 측정하기 위해 순환적 복잡도(cyclomatic-complexity)를 이용하여 복잡도를 수치로 계측하고 임계값을 초과하지 않았는지 lint로 검증하는 방법을 소개합니다.

(2019/01/17 추가)
전반부는 거의 같은 내용이지만 다른 기사에서 TSLint를 사용한 방법을 다른 기사에 썼습니다.
TSLint에서 TypeScript의 순환 복잡성 (cyclomatic-complexity) 검증 - Qiita

순환 복잡성(cyclomatic-complexity)이란

순환 복잡성 - Wikipedia

한마디로 프로그램의 복잡성입니다. 분기 수가 많으면 프로그램 실행 경로가 많아지고 복잡도가 높아집니다. 반대로 적으면 내려갑니다. if 또는 for와 같은 분기가 없는 프로그램의 순환 복잡도는 1입니다.

망설이지만 다음과 같은 함수가 있다고 가정합니다.

function check(a, b) {
  if (a >= 0) {
    console.log("aは正の数です。")
  } else {
    console.log("aは負の数です。")
  }
  if (b >= 0) {
    console.log("bは正の数です。")
  } else {
    console.log("bは負の数です。")
  }
}

check(1, -1) // aは正の数です。bは負の数です。
check(-1, 1) // aは負の数です。bは正の数です。

에서 조건을 다룰 수 있습니다.
순환적 복잡도의 수는 대략적으로 말하면 「if등의 조건 분기나 for등의 루프등 제어 구문의 수」+1한 수입니다.else는 포함되지 않습니다.
참고: Project Metrics Help - Complexity metrics

따라서 위의 check 함수의 순환 복잡도는 3입니다.

순환 복잡도 임계값

매우 오래된 통계 데이터이지만, 순환 복잡도가 높으면 버그가 발생하기 쉽다는 것은 아래의 그래프를 보면 알 수 있습니다.




순환 복잡도
버그 오염 확률


11
25%

38
50%

74
98%


참고: Cyclomatic Complexity Revisited

순환적 복잡도가 10을 넘으면 버그 혼입 확률이 완만하게 상승하고 있기 때문에, 1개의 함수의 순환적 복잡도는 10 이내로 억제하도록 코드를 쓰도록 하면 좋을 것입니다.

ESLint에서 검증

ESLint는 JavaScript의 정적 분석 도구입니다.
참고: ESLint 첫걸음 - Qiita

ESLint에는 다양한 규칙이 있지만 순환 복잡도를 확인하는 규칙도 있습니다.

그것이 complexity입니다.

규칙 설정은 간단하고 순환 복잡도가 10을 초과하는 경우 오류로 설정하려면 다음과 같이 설정을 작성합니다.

{
  "complexity": ["error", 10]
}

.eslintrc를 yaml로 작성하는 경우

complexity:
  -  error
  -  10

라고 쓰면 순환 복잡도 설정이 완료됩니다.
설정할 값은 오류 레벨과 임계값입니다.

에러 레벨은 이하의 3 종류로부터 설정할 수 있습니다.

off : 순환 복잡도를 확인하지 않음

warn : 순환 복잡도 임계 값을 초과하면 경고

error : 순환 복잡도 임계 값을 초과하면 오류

ESLint의 complexity 임계값을 10으로 설정하면 순환 복잡도가 11인 함수가 있으면 다음과 같은 오류 메시지를 출력합니다.

> eslint index.js


/path/to/sample-code.js
  1:1  error  Function 'test' has a complexity of 11  complexity

✖ 1 problem (1 error, 0 warnings)

후기

프로그램의 복잡성을 기계적으로 검증해, 회피하는 것으로 버그의 혼입 확률뿐만 아니라 가독성도 올라간다고 생각합니다. 꼭 소개합시다.
이번에는 JavaScript와 ESLint에서의 검증 방법을 소개했지만, 다른 프로그래밍 언어에서도 순환적 복잡도를 검증할 수 있는 정적 해석 툴은 몇 가지 있다고 생각하므로 찾아 보세요.
TypeScript와 tslint를 사용한 검증 방법에 대해서도 다른 기사에서 소개하고 싶습니다.
(2019/01/17 추기) 서두에서도 소개한 대로 썼습니다.
TSLint에서 TypeScript의 순환 복잡성 (cyclomatic-complexity) 검증 - Qiita

끝까지 읽어 주셔서 감사합니다. 질문이나 미비 등이 있으면 코멘트란 또는 트위터 (@shisama_)까지 부탁드립니다.