프론트엔드/JavaScript

[JavaScript] Clean Code - 11. 주석(Comments)

반응형

1. 주석을 다는 것은 로직이 복잡하다는 증명이다.

  • 좋은 코드는 코드 자체로 말한다.
// BAD
function hashIt(data) {
  // 이건 해쉬입니다.
  let hash = 0;

  // lengh는 data의 길이입니다.
  const length = data.length;

  // 데이터의 문자열 개수만큼 반복문을 실행합니다.
  for (let i = 0; i < length; i++) {
    // 문자열 코드를 얻습니다.
    const char = data.charCodeAt(i);
    // 해쉬를 만듭니다.
    hash = ((hash << 5) - hash) + char;
    // 32-bit 정수로 바꿉니다.
    hash &= hash;
  }
}

// GOOD
function hashIt(data) {
  let hash = 0;
  const length = data.length;

  for (let i = 0; i < length; i++) {
    const char = data.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;

    // 32-bit 정수로 바꿉니다.
    hash &= hash;
  }
}

 

2. 주석 처리한 코드를 남기지 않는다.

  • 버전 관리 도구를 활용하면 주석을 남길 이유가 없다.
// BAD
doStuff();
// doOtherStuff();
// doSomeMoreStuff();
// doSoMuchStuff();

// GOOD
doStuff();

 

3. 코드 기록은 주석으로 남기지 않는다.

  • 버전 관리 도구와 커밋을 적극 활용한다.
//BAD
/**
 * 2016-12-20: 모나드 제거했음, 이해는 되지 않음 (RM)
 * 2016-10-01: 모나드 쓰는 로직 개선 (JP)
 * 2016-02-03: 타입체킹 하는부분 제거 (LI)
 * 2015-03-14: 버그 수정 (JR)
 */
function combine(a, b) {
  return a + b;
}

// GOOD
function combine(a, b) {
  return a + b;
}

 

4. 코드의 위치를 설명하지 않는다.

  • 정말 쓸데 없는 일이다.
  • 함수명, 변수명으로 이 역할을 하는 것이 맞다!
// BAD

// 스코프 모델 정의
$scope.model = {
  menu: 'foo',
  nav: 'bar'
};

// actions 설정
const actions = function() {
  // ...
};

// GOOD
$scope.model = {
  menu: 'foo',
  nav: 'bar'
};

const actions = function() {
  // ...
};

원래 알고 있었지만 다시 보고 새로운 깨달음을 준 챕터였다.

개발자는 코드로 말한다.

크으으으 너무 명언이다.

반응형