JavaScript 3.3

1 minute read

주석

  • 한줄은 // 여러줄은 /* … */ 을 쓴다.

좋지 않은 주석

  • 설명이 담긴 주석은 좋지 않다.
  • 주석 없이 코드 자체만으로 코드가 무슨 일을 하는지 쉽게 이해할 수 있어야 한다.

리팩토링 팁 : 함수 분리하기

  • 함수 내 코드를 새로운 함수로 옮겨서 분리하는 편이 가독성을 높일수도 있다.

  • 함수 이름 자체가 주석 역할을 하므로 코드를 쉽게 이해할 수 있다. 이런 코드를 자기 설명적인 코드라 부른다.

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

    // i가 소수인지를 확인함
    for (let j = 2; j < i; j++) {
      if (i % j == 0) continue nextPrime;
    }

    alert(i);
  }
}

// 후
function showPrimes(n) {

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

    alert(i);
  }
}

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

  return true;
}

리팩토링 팁 : 함수 만들기

// 전
// 위스키를 더해줌
for(let i = 0; i < 10; i++) {
  let drop = getWhiskey();
  smell(drop);
  add(drop, glass);
}

// 주스를 더해줌
for(let t = 0; t < 3; t++) {
  let tomato = getTomato();
  examine(tomato);
  let juice = press(tomato);
  add(juice, glass);
}

// ...


// 후
addWhiskey(glass);
addJuice(glass);

function addWhiskey(container) {
  for(let i = 0; i < 10; i++) {
    let drop = getWhiskey();
    //...
  }
}

function addJuice(container) {
  for(let t = 0; t < 3; t++) {
    let tomato = getTomato();
    //...
  }
}

좋은 주석

아키텍처를 설명하는 주석

  • 고차원 수준 컴포넌트 개요, 컴포넌트 간 상호작용에 대한 설명, 상황에 따른 제어 흐름 등.

함수 용례와 매개변수 정보를 담고 있는 주석

  • JSDoc이라는 특별한 문법을 사용하면 함수에 관한 문서를 쉽게 작성할 수 있다. 여기엔 함수 용례, 매개변수, 반환 값 정보가 들어간다.
// 예시
/**
 * x를 n번 곱한 수를 반환함
 *
 * @param {number} x 거듭제곱할 숫자
 * @param {number} n 곱할 횟수, 반드시 자연수여야 함
 * @return {number} x의 n 거듭제곱을 반환함
 */
function pow(x, n) {
  ...
}

문제를 해결한 방법을 설명하는 주석

  • 여러 문제 해결 방법 중에 왜 이 방법을 선택했는지 설명한다.

미묘한 기능이 있고 이 기능이 어디에 쓰이는지 설명하는 주석

Categories:

Updated: