깔끔한 JS 코드를 작성하는 방법은 무엇입니까? 공유할 수 있는 5가지 글쓰기 팁

독서 부담을 줄이고 창의적 사고를 고취하며 JavaScript 기술을 쉽게 익힐 수 있습니다.

1. 숫자를 상수로 정의합니다.

우리는 다음과 같은 코드를 자주 사용합니다.

const isOldEnough = (person) => {
  person.getAge() >= 100을 반환합니다.
}

이 100이 구체적으로 무엇을 가리키는지 누가 알겠습니까? 우리는 일반적으로 이 100이 구체적으로 어떤 값을 나타낼 수 있는지 추측하고 판단하기 위해 함수 컨텍스트를 결합해야 합니다.

그러한 숫자가 여러 개 있으면 더 큰 혼란을 야기하기 쉽습니다.

깔끔한 JavaScript 작성: 숫자를 상수로 정의하면

이 문제가 명확하게 해결됩니다.

const AGE_REQUIREMENT = 100;
const isOldEnough = (사람) => {
  return person.getAge() >= AGE_REQUIREMENT;
}

이제 상수 이름을 선언하면 100이 "연령 요구 사항"을 의미한다는 것을 즉시 이해할 수 있습니다. 수정 시 빠르게 찾아서 한 곳에서 수정하고 여러 곳에 적용할 수 있습니다.

2. Boolean 값을 함수 매개변수로 사용하지 마세요.

Boolean 값을 함수에 매개변수로 전달하는 것은 코드 혼동을 쉽게 일으키는 일반적인 작성 방법입니다.

const verifyCreature = (생물, isHuman) => {
  if (isHuman) {
    // ...
  } 또 다른 {
    // ...
  }
}

함수에 매개변수로 전달된 부울 값은 명확한 의미를 표현할 수 없으며, 이 함수가 판단을 내리고 두 가지 이상의 상황을 생성한다는 점만 독자에게 알릴 수 있습니다.

그러나 우리는 함수에 대한 단일 책임 원칙을 옹호합니다.

깨끗한 JavaScript 작성: 부울 값을 함수 매개변수로 사용하지 마십시오.

const verifyPerson = (person) => {
  // ...
}
const verifyCreature = (생물) => {
  // ...
}

3. 여러 조건을 캡슐화하여

다음과 같은 코드를 작성하는 경우가 많습니다

.
  person.getAge() > 30 &&
  person.getName() === "사이먼" &&
  person.getOrigin() === "스웨덴"
) {
  // ...
}

불가능하지는 않지만 시간이 오래 지나면 갑자기 이러한 판단이 무엇을 위한 것인지 이해하지 못할 것이므로 이러한 조건을 변수나 함수로 캡슐화하는 것이 좋습니다.

깔끔한 JavaScript 작성: 여러 조건 캡슐화

const isSimon =
  person.getAge() > 30 &&
  person.getName() === "사이먼" &&
  person.getOrigin() === "스웨덴";
if (isSimon) {
  // ...
}

또는

const isSimon = (사람) => {
  반품 (
    person.getAge() > 30 &&
    person.getName() === "사이먼" &&
    person.getOrigin() === "스웨덴"
  );
};
if (isSimon(사람)) {
  // ...
}

아, 알고보니 이 사람이 사이먼인지 아닌지를 판단하는 조건이군요~

이런 종류의 코드는 선언적 스타일 코드로 가독성이 더 좋습니다.

4. 부정적인 판단을 피하세요.

조건부 판단에서 부정적인 판단을 사용하면 생각의 부담이 더 커집니다.

예를 들어, 아래 코드에서 !isCreatureNotHuman(creature) 조건은 이중 부정이므로 읽기가 약간 어렵습니다.

const isCreatureNotHuman = (생물) => {
  // ...
}

if (!isCreatureNotHuman(생물)) {
  // ...
}

읽기 쉽도록 다음 작성 규칙으로 다시 작성하여

부정적인 판단 조건을 피하십시오

유용합니다.

여러번 코드를 읽다 보면 그냥 계속 읽게 되는데, '잘못된' 작성 방법을 보면 더 이상 참을 수 없게 되고, 천 마일의 제방이 개미 둥지에 무너지게 됩니다.

const isCreatureHuman = (생물) => {
  // ...
}
if (isCreatureHuman(생물)) {
  // ...
}

5. if...else를 많이 피하십시오...

Bengua는 이 점을 항상 강조했습니다.

예를 들어 다음 코드는 다음과 같습니다.

if(x===a){
   해상도=A
}그렇지 않은 경우(x===b){
   해상도=B
}그렇지 않은 경우(x===c){
   해상도=C
}그렇지 않은 경우(x===d){
    //...
}

맵으로 다시 작성됨:

let mapRes={
    가:아,
    비:비,
    ㄷ:C,
    //...
}
res=mapRes[x]

또 다른 예는 다음 코드입니다:

const isMammal = (creature) => {
  if (생물 === "인간") {
    사실을 반환;
  } else if (생물 === "개") {
    사실을 반환;
  } else if (생물 === "고양이") {
    사실을 반환;
  }
  // ...
거짓을 반환;
}

배열로 다시 작성됨:

const isMammal = (생물) => {
  const 포유류 = ["인간", "개", "고양이", /* ... */];
  포유류.includes(생물)을 반환합니다.
}

깔끔한 JavaScript 작성: if...else...를 많이 사용하지 마세요.

따라서 코드에 if...else...가 많이 있으면 한 단계 더 생각하고 약간의 수정이 가능한지 확인하세요. 코드를 좀 더 "깨끗하게" 보이도록 합니다.

요약: 위의 기술들은 예제에서는 언급할 가치가 없어 보일 수 있지만 실제 프로젝트에서 비즈니스 로직이 복잡해지고 코드의 양이 많아지면 이러한 팁은 확실히 상상 이상으로 긍정적인 효과와 도움을 줄 것입니다.

위 내용은 깨끗한 JS 코드를 작성하는 방법입니다. 5가지 글쓰기 팁을 자세히 공유하고 있으니, 더 자세한 내용은 PHP 중국어 홈페이지의 다른 관련 글도 참고해주세요!