JavaScript에서 깔끔한 코드를 작성하기 위한 5가지 팁

JavaScript에 대한 경험이 많아지면 알아야 할 깨끗한 코드를 작성하는 방법에 대한 팁과 원칙이 있습니다.

소프트웨어 엔지니어링 기술은 비교적 새로운 기술입니다. 의학 기술은 수천 년 동안 존재해 왔지만 소프트웨어 공학은 1960년대 초부터 존재했습니다. 우리 모두는 여전히 깨끗한 코드를 작성하는 방법을 배우고 있습니다. 커뮤니티에서 모범 사례로 널리 인정되는 몇 가지 원칙이 있습니다.

깨끗한 코드를 작성하기 위한 많은 원칙이 있지만 가장 중요한 다섯 가지에 집중하기로 했습니다. 이 팁은 권장 사항이며 엄격한 규칙이 아닙니다. 이러한 원칙을 연습하면 코드가 더 깔끔해집니다!

깨끗한 코드가 중요한 이유

초보자로서 당신의 초점은 깨끗한 코드를 작성하는 데 반드시 필요한 것은 아닙니다. 코드를 작동시키고 테스트를 통과하는 데 초점을 맞춰야 합니다. 경험이 쌓이면 깨끗한 코드 작성에 집중할 수 있습니다.

이 기사에서는 클린 코드를 다음과 같이 정의합니다.

읽기 쉬운

이해하기 쉬운

깨끗한 코드는 코드베이스를 최신 상태로 유지하고 유지하는 데 도움이 됩니다. 작성하는 데 시간이 오래 걸리더라도 코드를 더 깔끔하게 만드는 노력은 항상 가치가 있습니다!

JavaScript로 깨끗한 코드 작성

다른 언어와 마찬가지로 JavaScript에는 특별한 단점이 있습니다. 이러한 팁은 반드시 JavaScript에만 국한되지 않으며 다른 많은 언어에도 사용할 수 있습니다.

매직 넘버를 상수로 추출

"매직 넘버"는 컨텍스트 없이 코드에서 직접 사용되는 숫자를 말합니다. 의미가 없으며 의미 있는 변수 이름을 가진 상수로 추출해야 합니다.

나쁜:

const isOldEnough = (person) => {
  // What does 100 refer to? This is a so-called "magic number"
  return person.getAge() >= 100; 
}

좋은:

const AGE_REQUIREMENT = 100; // Now we know what 100 refers to

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

부울 함수 인수 피하기

부울 함수 인수는 일반적인 "코드 냄새"(기본 프로그래밍 표준 위반)입니다. 의미가 부족하기 때문입니다. 그리고 함수가 항상 피해야 하는 두 가지 이상의 작업을 수행함을 나타냅니다!

나쁜:

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

좋은:

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

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

조건 캡슐화

긴 조건문은 모두 머리 속에 저장해야 하기 때문에 읽기 어렵습니다. 함수나 변수로 캡슐화하면 코드를 추론하기가 더 쉬워집니다.

나쁜:

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

좋은:

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

if (isSimon) {
  // ...
}

// OR use a function

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

if (isSimon(person)) {
  // ...
}

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

부정 조건문("이중 부정")은 코드를 읽을 때 뇌에 추가 조건을 추가합니다. 당신은 "나는 졸리지 않습니다"라고 말하지 않을 것입니다. 당신은 "나는 졸리다"라고 말할 것입니다. 동일한 관행이 코드에도 적용됩니다!

나쁜:

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

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

좋은:

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

if (isCreatureHuman(creature)) {
  // ...
}

If 문을 사용하지 마십시오

미친 소리처럼 들릴지 모르지만 제 말을 들어주세요! If 문은 이해하기 쉽지만 확장되지 않습니다. 동일한 함수에 하나 또는 두 개 이상의 if 문이 있는 즉시 코드를 추론하기가 어려워집니다.

대신 switch 문을 사용하거나 가능한 경우 Array, Set 또는 Map과 같은 데이터 구조를 사용하십시오.

나쁜:

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) => {
  switch (creature) {
    case "human":
    case "dog":
    case "cat":
    // ...
      return true;
    default:
      return false;
  }
}

// OR even better, use a data structure

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

결론

이것이 JavaScript로 깔끔한 코드를 작성하기 위한 다섯 가지 중요한 원칙입니다. 연습은 완벽을 만들고 코드 작성도 마찬가지입니다. 오늘 이러한 원칙을 이미 따르고 있다면 계속 유지하십시오! 나는 당신이 코드 작성을 많이 연습했다고 확신합니다. 그렇지 않다면 낙담하지 마십시오! 우리 모두는 어딘가에서 시작합니다 🙂

요약하자면:

매직 넘버를 상수로 추출

부울 함수 인수를 피하십시오

조건 캡슐화

부정 조건문을 피하십시오

If 문을 사용하지 마십시오

.



, 또는 GitHub에서 나와 연결