ESLint 규칙 중 no-confusing-arrow 란?

프로그래밍을 하다 보면 우리는 명확하고 가독성 있는 코드를 작성하려고 노력합니다. 하지만 간혹, 코드가 복잡하거나 혼란스럽게 되어 의도한 바를 파악하기 어려운 경우가 생깁니다. 특히, 화살표 함수와 삼항 연산자를 사용한 표현식에서 이러한 문제가 발생할 수 있습니다. ESLint의 no-confusing-arrow 규칙은 이러한 문제를 해결하는 데 도움을 주는 중요한 도구입니다.

no-confusing-arrow 규칙이란?

no-confusing-arrow 규칙은 JavaScript에서 혼란스러운 화살표 함수 사용을 방지하기 위한 ESLint 규칙입니다. 이 규칙은 특히 화살표 함수와 삼항 연산자가 함께 사용될 때 가독성을 해칠 수 있는 구문을 탐지하고, 이를 명확하게 고칠 수 있도록 유도합니다.

화살표 함수와 삼항 연산자는 모두 => 기호를 사용합니다. 이러한 이유로 둘을 혼동하여 잘못된 코드를 작성하기 쉽습니다. no-confusing-arrow 규칙은 코드의 의도를 명확하게 명시함으로써 이러한 혼란을 예방합니다.

예제 코드

아래에 혼란스러운 예제와 올바른 수정 예시를 살펴보겠습니다.

혼란스러운 화살표 함수 사용 예시

// 혼란을 줄 수 있는 코드
const example = x => x > 0 ? x : -x;

위 코드에서는 =>와 ?가 함께 사용되면서 의도를 명확히 파악하기 어려울 수 있습니다. 이 경우, 괄호를 추가하여 의도를 명확하게 할 수 있습니다.

올바른 코드 예시

// 명확하게 수정된 코드
const example = x => (x > 0 ? x : -x);

위와 같이 괄호를 추가하면 코드의 의도가 명확해지고, ESLint는 더 이상 이 구문에 대해 혼란스럽다고 경고하지 않습니다.

no-confusing-arrow 규칙의 동작 방식

이 규칙은 화살표 함수 내에서 삼항 연산자를 명확히 구분하지 않으면 경고를 발생시킵니다. 따라서, 개발자는 의도를 확실히 전달하기 위해 항상 괄호 등을 사용하여 코드를 명확하게 작성하도록 유도됩니다.

ESLint에서 no-confusing-arrow 규칙 설정

이 규칙은 ESLint 설정 파일인 .eslintrc에서 활성화할 수 있습니다. 기본적인 설정은 다음과 같습니다.

{
  "rules": {
    "no-confusing-arrow": "error"
  }
}

설정을 통해 혼란스러운 코드를 방지하고, 코드를 더 명확하게 작성할 수 있습니다.

결론

no-confusing-arrow 규칙은 JavaScript 코드에서 화살표 함수와 삼항 연산자의 혼란스러운 사용을 미리 방지할 수 있는 유용한 ESLint 규칙입니다. 명확하고 읽기 쉬운 코드를 작성함으로써 코드의 품질을 높이고, 유지보수를 용이하게 할 수 있습니다. 이제 코드를 작성할 때 항상 괄호를 적절히 사용하여 의도를 명확히 하고, ESLint의 no-confusing-arrow 규칙을 통해 오류를 사전에 방지해 보세요!