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

깨끗한 JS 코드를 작성하는 방법은 무엇입니까? 이 기사에서는 깔끔한 JavaScript 작성을 위한 5가지 팁을 공유하겠습니다. 이것이 여러분에게 도움이 되기를 바랍니다.

독서 부담을 줄이고, 창의적인 사고를 불러일으키고, JavaScript 기술을 쉽게 배울 수 있습니다. 해가 뜨고, jym, 서두르세요~

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

우리는 숫자를 자주 사용합니다. 다음 코드와 같습니다.

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

이 100이 구체적으로 무엇을 의미하는지 아는 사람이 있나요? 우리는 일반적으로 이 100이 구체적으로 어떤 값을 나타낼 수 있는지 추측하고 판단하기 위해 함수 컨텍스트를 결합해야 합니다.

이러한 숫자가 여러 개인 경우 더 큰 혼란을 야기하기 쉽습니다.

깨끗한 JavaScript 작성: 숫자를 상수로 정의하세요

이 문제를 명확하게 해결하려면:

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

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

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

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

const validateCreature = (creature, isHuman) => {
  if (isHuman) {
    // ...
  } else {
    // ...
  }
}

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

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

깨끗한 JavaScript 작성: 부울 값을 함수 매개변수로 사용하지 마세요

const validatePerson = (person) => {
  // ...
}
const validateCreature = (creature) => {
  // ...
}

3. 여러 조건을 캡슐화합니다.

우리는 종종 다음과 같이 코드를 작성합니다.

if (
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden"
) {
  // ...
}

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

깨끗한 JavaScript 작성: 여러 조건 캡슐화

const isSimon =
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden";
if (isSimon) {
  // ...
}

또는

const isSimon = (person) => {
  return (
    person.getAge() > 30 &&
    person.getName() === "simon" &&
    person.getOrigin() === "sweden"
  );
};
if (isSimon(person)) {
  // ...
}

아, 알고 보니 이 조건은 이 사람이 Simon인지 여부를 결정하는 것입니다~

이런 종류의 코드는 선언적 스타일 코드이므로 더 읽기 쉽습니다.

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

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

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

const isCreatureNotHuman = (creature) => {
  // ...
}

if (!isCreatureNotHuman(creature)) {
  // ...
}

깨끗한 JavaScript 작성: 부정적 판단 조건 피하기

이것은 읽기 쉽도록 다음 작성 규칙으로 다시 작성합니다. 이는 작은 트릭일 뿐이지만 많은 양의 코드 로직에서는 여러 곳에서 이를 따릅니다. 원칙은 분명히 도움이 될 것입니다.

코드를 읽을 때 그냥 읽고 또 읽어도 '끔찍한' 글을 보면 더 이상 참을 수 없게 되고, 천 마일의 제방이 개미 둥지에 무너지곤 합니다.

const isCreatureHuman = (creature) => {
  // ...
}
if (isCreatureHuman(creature)) {
  // ...
}

5. if...else를 많이 피하세요...

이 점은 제가 항상 강조해 왔습니다:

예를 들어 다음 코드는:

if(x===a){
   res=A
}else if(x===b){
   res=B
}else if(x===c){
   res=C
}else if(x===d){
    //...
}

맵 작성으로 다시 작성:

let mapRes={
    a:A,
    b:B,
    c:C,
    //...
}
res=mapRes[x]

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

const isMammal = (creature) => {
  if (creature === "human") {
    return true;
  } else if (creature === "dog") {
    return true;
  } else if (creature === "cat") {
    return true;
  }
  // ...
return false;
}

배열로 다시 작성:

const isMammal = (creature) => {
  const mammals = ["human", "dog", "cat", /* ... */];
  return mammals.includes(creature);
}

깨끗한 JavaScript 작성: 많은 if...else...

그래서 if...가 많을 때... 그렇지 않으면... 코드에서 더 많은 것을 생각해 보고 코드를 "더 깔끔하게" 보이도록 몇 가지 변경 사항을 적용할 수 있는지 확인하십시오.

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

【관련 권장 사항: javascript 학습 튜토리얼】

위 내용은 깔끔한 JS 코드를 작성하는 방법은 무엇입니까? 공유할 수 있는 5가지 글쓰기 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!