자바스크립트-코딩 스타일

개발자는 가능한 간결하고 읽기 쉽게 코드를 작성해야 한다.

 

 

중괄호

-코드가 짧으면 중괄호 없이 한 줄에 써도 괜찮다.

if (n < 0) alert(`Power ${n} is not supported`);

 

-코드 블록 사용

if (n < 0) {
  alert(`Power ${n} is not supported`);
}

대부분의 코드는 코드 블록을 사용하는 것이 가독성이 좋다.

 

가로 길이

코드의 가로 길이가 길어지면 여러 줄로 나눠서 작성하는게 좋다.

 

// 백틱(`)을 사용하면 문자열을 여러 줄로 쉽게 나눌 수 있습니다.
let str = `
  ECMA International's TC39 is a group of JavaScript developers,
  implementers, academics, and more, collaborating with the community
  to maintain and evolve the definition of JavaScript.
`;

백틱을 사용하면 문자열을 여러 줄로 나눌 수 있다.

 

if (
  id === 123 &&
  moonPhase === 'Waning Gibbous' &&
  zodiacSign === 'Libra'
) {
  letTheSorceryBegin();
}

if 문이면 연산자를 활용할 수 있다.

 

=>최대 가로 길이는 팀원들과 합의하는게 좋다. 대부분 80이나 120자로 제한한다.

 

중첩 레벨

가능한 너무 깊은 중첩문은 사용하지 않는다. 반복문에서 중첩문의 길이가 깊어지면 continue를 쓰는 것이 좋은 대안이 될 수도 있다.

 

1번

function pow(x, n) {
  if (n < 0) {
    alert("'n'은 음수가 될 수 없습니다.");
  } else {
    let result = 1;

    for (let i = 0; i < n; i++) {
      result *= x;
    }

    return result;
  }
}

2번

 

function pow(x, n) {
  if (n < 0) {
    alert("'n'은 음수가 될 수 없습니다.");
    return;
  }

  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

1번과 2번 코드는 같은 결과이다. 하지만 2번 코드에서 return 문을 추가하니까 가독성이 더 좋아졌다. 특별한 상황인지 확인하고 조건을 통과하면 추가 중첩 없이 주요 코드 흐음으로 넘어가게 코드를 짰다.

 

함수의 위치

// 헬퍼 함수를 사용하는 코드
let elem = createElement();
setHandler(elem);
walkAround();

// --- 헬퍼 함수 ---
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

코드를 먼저, 함수는 그 다음에 선언하는 것이 좋다.

사람들은 이 코드가 무엇을 하는지 생각하며 코드를 읽어서 코드가 먼저 나오는 것이 자연스럽니다. 이름만 보고 헬퍼 함수의 역할을 쉽게 유추 가능하면 함수 본문을 읽을 필요가 없다.

 

주석

-주석에 들어가면 좋은 내용

1. 고차원 수준 아키텍처

2. 함수 용례

3. 당장 봐선 명확해 보이지 않는 해결 방법에 대한 설명

 

-주석에 들어가면 좋지 않은 내용

1. '코드가 어떻게 동작하는지’와 '코드가 무엇을 하는지’에 대한 설명
2. 코드를 간결하게 짤 수 없는 상황이나 코드 자체만으로도 어떤 일을 하는지 충분히 판단할 수 없는 경우에만 주석을 넣는다.