ESLint 규칙: no-unneeded-ternary

2024-04-02

ESLint 규칙: no-unneeded-ternary

no-unneeded-ternary 규칙은 불필요한 삼항 연산자 사용을 방지합니다. 삼항 연산자는 간결하게 코드를 작성할 수 있지만, 불필요하게 사용하면 코드를 읽기 어렵게 만들 수 있습니다.

예시:

다음 코드는 불필요한 삼항 연산자를 사용합니다.

const isLoggedIn = true;
const message = isLoggedIn ? "환영합니다!" : "로그인하십시오";

위 코드는 다음과 같이 간단하게 작성할 수 있습니다.

const isLoggedIn = true;
const message = isLoggedIn ? "환영합니다!" : "";

옵션:

no-unneeded-ternary 규칙에는 다음과 같은 옵션이 있습니다.

  • defaultAssignment: 기본값 할당을 허용할지 여부를 설정합니다. (기본값: false)

사용법:

no-unneeded-ternary 규칙을 사용하려면 ESLint 설정 파일에 다음 규칙을 추가해야 합니다.

{
  "rules": {
    "no-unneeded-ternary": "error"
  }
}

장점:

  • 코드를 더 읽기 쉽게 만듭니다.
  • 코드 유지 관리를 개선합니다.

단점:

  • 코드를 조금 더 길게 만들 수 있습니다.

추가 정보:

  • no-unneeded-ternary 규칙은 no-ternary 규칙과 함께 사용할 수 있습니다. no-ternary 규칙은 모든 삼항 연산자 사용을 금지합니다.
  • no-nested-ternary 규칙은 중첩된 삼항 연산자 사용을 금지합니다.

번역:

이 답변은 Bard: [유효하지 않은 URL 삭제됨] 사용하여 번역되었습니다.



예제 코드

// 불필요한 삼항 연산자 사용
const isLoggedIn = true;
const message = isLoggedIn ? "환영합니다!" : "로그인하십시오";

// 불필요한 삼항 연산자 사용
const age = 18;
const canVote = age >= 18 ? true : false;

// 불필요한 삼항 연산자 사용
const number = 10;
const even = number % 2 === 0 ? "짝수" : "홀수";

필요한 삼항 연산자:

// 필요한 삼항 연산자 사용
const role = user.role;
const permission = role === "admin" ? "full" : "read-only";

// 필요한 삼항 연산자 사용
const data = fetchData();
const result = data.success ? data.result : "데이터를 불러오지 못했습니다.";

// 필요한 삼항 연산자 사용
const element = document.getElementById("my-element");
const text = element ? element.textContent : "";

옵션 사용:

// 기본값 할당 허용
{
  "rules": {
    "no-unneeded-ternary": ["error", { "defaultAssignment": true }]
  }
}

// 예시
const isLoggedIn = true;
const message = isLoggedIn ? "환영합니다!" : ""; // 허용됨

참고:

  • 위 코드는 예시이며, 상황에 따라 다르게 작성될 수 있습니다.
  • ESLint 규칙 문서를 참고하여 옵션을 설정하십시오.


삼항 연산자 대체 방법

다음은 삼항 연산자를 대체하는 방법입니다.

if 문 사용:

const isLoggedIn = true;

let message;

if (isLoggedIn) {
  message = "환영합니다!";
} else {
  message = "로그인하십시오";
}

변수 선언 및 할당:

const isLoggedIn = true;

const message = isLoggedIn ? "환영합니다!" : "";

if (isLoggedIn) {
  const welcomeMessage = "환영합니다!";
  message = welcomeMessage;
} else {
  message = "";
}

논리 연산자 사용:

const isLoggedIn = true;

const message = isLoggedIn && "환영합니다!";

if (isLoggedIn) {
  message = "환영합니다!";
} else {
  message = "";
}

Optional Chaining 사용:

const user = {
  name: "John Doe",
  isLoggedIn: true,
};

const message = user?.isLoggedIn && "환영합니다!";

if (user && user.isLoggedIn) {
  message = "환영합니다!";
} else {
  message = "";
}

Nullish Coalescing Operator 사용:

const user = {
  name: "John Doe",
  isLoggedIn: null,
};

const message = user?.isLoggedIn ?? "로그인하십시오";

if (user && user.isLoggedIn !== null) {
  message = "환영합니다!";
} else {
  message = "로그인하십시오";
}

주의 사항:

  • 삼항 연산자를 대체하는 방법은 상황에 따라 다릅니다.
  • 코드의 가독성을 고려하여 적절한 방법을 선택해야 합니다.



ESLint의 no-useless-return 규칙

no-useless-return 규칙은 함수의 마지막 문장을 분석하여 다음과 같은 경우 오류를 발생시킵니다.return 문이 아무것도 반환하지 않는 경우 (예: return;)return 문이 undefined를 반환하는 경우




ESLint의 "Rules"와 관련된 "arrow-spacing" 규칙 설명

always: 화살표 연산자 양쪽에 항상 공백을 추가합니다.never: 화살표 연산자 양쪽에 공백을 추가하지 않습니다.옵션 선택어떤 옵션을 선택할지는 코드 스타일 가이드라인에 따라 다릅니다. 일반적으로 다음과 같은 경우 always 옵션을 사용하는 것이 좋습니다


ESLint의 no-useless-return 규칙

no-useless-return 규칙은 함수의 마지막 문장을 분석하여 다음과 같은 경우 오류를 발생시킵니다.return 문이 아무것도 반환하지 않는 경우 (예: return;)return 문이 undefined를 반환하는 경우


ESLint의 no-debugger 규칙

사용 이유:디버거 문은 코드를 더 느리게 만들고 성능 저하를 초래합니다.디버거 문은 코드를 더 복잡하게 만들고 이해하기 어렵게 만들 수 있습니다.디버거 문은 프로덕션 환경에서 의도치 않게 실행될 수 있습니다.대안:콘솔 로그를 사용하여 코드 값을 출력합니다


ESLint의 no-restricted-exports 규칙: 코드의 명확성을 유지하는 강력한 도구

ESLint의 no-restricted-exports 규칙은 특정 이름의 변수, 함수, 클래스 등을 모듈에서 내보내는 것을 제한합니다. 이는 코드의 명확성과 일관성을 유지하고, 의도하지 않은 이름 충돌을 방지하는 데 도움이 됩니다