주석 및 코드 리팩터링

코멘트

JavaScript에는 두 가지 유형의 주석이 있습니다.

인라인 주석( //... ) - 명령문, 표현식 등에 인라인

여러 줄 주석( /*...*/ ) - 여러 줄에 걸쳐 있습니다.

주석은 코드가 작동하는 방법과 이유를 설명하는 메모입니다. 이는 코드 작성자를 상기시키고 다른 개발자와 작업할 때 중요합니다.

코드에 미묘하고 직관에 어긋나는 것이 있다면 분명히 언급할 가치가 있습니다.

초보자가 잘못 사용하는 경우가 있습니다.

나쁜 댓글

많은 댓글은 나쁜 습관입니다. 이 예제는 나쁜 댓글에서 JavaScript에서 소수를 만드는 논리를 보여줍니다.

아래 예를 참조하십시오.

function showPrimes(n) {
  // nextPrime is just a label
  nextPrime:
  for (let i = 2; i < n; i++) {
    /* 
    The iteration starts at 2 through to n - 1. For example, if n is 
    10, iteration starts from iteration 2 to iteration 9. 9 is 
    less than 10    
    */

    for (let j = 2; j < i; j++) {
      // iteration from j = 2 to j < i in all j complete circles

      if (i % j === 0) continue nextPrime;
      /* if iteration of i and j modulus equals zero then it's not 
      a prime number */
    }

    console.log(i); // 2, 3, ...7
  }
}

showPrimes(10)

좋은 댓글

주석은 논리적이어야 하지만(필요한 경우) 짧아야 합니다.

아래 예를 참조하십시오.

const showPrimes = (n) => {
    nextPrime:
    for (let i = 2; i < n; i++) {
        // 2, 3, 4, 5, 6, 7, 8, 9

        for (let j = 2; j < i; j++) {
            // j2 = 2, 
            // j3 = (2, 3), 
            // j4 = (2, 3, 4), 
            // j5 = (2, 3, 4, 5), 
            // j6 = (2, 3, 4, 5 ,6), 
            // j7 = (2, 3, 4, 5 ,6, 7), 
            // j8 = (2, 3, 4, 5, 6, 7, 8)

            // i2
            // i3 : j2
            // i4 : j2, j3
            // i5 : j2, j3, j4
            // i6 : j2, j3, j4, j5
            // i7 : j2, j3, j4, j5, j6
            // i8 : j2, j3, j4, j5, j6, j7 
            // i9 : j2, j3, j4, j5, j6, j7, j8

            if (i % j === 0) continue nextPrime;
            // i2 => 2, 
            // i3 : j2 => (3 / 2) (3), 
            // i5 : j2, j3, j4 => ( 5 / (2, 3, 4) ) (5), 
            // i7 : j2, j3, j4, j5, j6 => ( 7 / (2, 3, 4, 5, 6) ) (7)
        }

        console.log(i); // 2, 3, 5, 7
    }
};

showPrimes(10);

위의 주석은 논리적으로 보이지만 남용되었습니다.







축소된 주석의 아래 예를 참조하십시오.

function showPrimes(n) {
  nextPrime:
  for (let i = 2; i < n; i++) {
    // i = i2, ...i(n-1)

    for (let j = 2; j < i; j++) {
      // in = j1, ...j(n-2)

      if (i % j === 0) continue nextPrime;
      // !R(i/j)
    }

    console.log(i); 
  }
}

showPrimes(10);

위의 설명은 짧을 뿐만 아니라 정확합니다.

좋은 의견에는 다음이 포함됩니다.

아키텍처 설명

함수 매개변수 및 사용법 문서화

/**
 * Returns x raised to the n-th power.
 *
 * @param {number} x The number to raise.
 * @param {number} n The power, must be a natural number.
 * @return {number} x raised to the n-th power.
 */

function pow(x, n) {
  // ...
}

위와 같은 주석은 코드를 보지 않고도 함수를 이해할 수 있도록 합니다

.

WebStorm과 같은 일부 편집자는 주석을 이해하여 자동 완성 기능을 제공하고 일부 자동 코드 검사를 통해 작업 흐름을 용이하게 합니다

.
주석에서 HTML 문서를 생성할 수 있는 JSDoc 3과 같은

도구. 공식 문서는 usejsdoc.org/

에 있습니다.

Most of the time comments are used in development only but removed in production especially when minified.

코드 리팩터링

코드 리팩토링은 가독성을 위해 기능에 영향을 주지 않고 코드 구조를 수정하는 프로세스입니다.

아래 예를 참조하십시오.

function showPrimes(n) {
  nextPrime:
  for (let i = 2; i < n; i++) {

    for (let j = 2; j < i; j++) {

      if (i % j === 0) continue nextPrime;
    }

    console.log(i); 
  }
}

showPrimes(10);

위의 코드를 리팩터링하거나 가독성을 높이려면 아래 예를 참조하십시오.

function showPrimes(n) {

  for (let i = 2; i < n; i++) {
    if (!isPrime(i)) continue;

    console.log(i);
  }
}

function isPrime(n) {
  for (let i = 2; i < n; i++) {
    if (n % i == 0) return false;
  }

  return true;
}

showPrimes(10);

위의 코드는 중첩이 적고 기능을 더 잘 분해했기 때문에 이해하기 더 쉬워 보입니다isPrime.

The function itself becomes the comment. Such code is called self-descriptive.

기능을 더 잘 이해할 수 있도록 분할 코드 구조를 리팩터링합니다.

즐거운 코딩하세요!

테크스택 미디어 | 도메인

최저 $9.99의 .com 도메인 이름을 구입하세요.

최저 $12.99의 .net 도메인 이름을 구매하세요.

최저 $3의 저렴한 도메인 이름을 얻으십시오.

쉽게 웹사이트를 구축하십시오.