JavaScript 3.2

코딩 스타일

문법

• 무조건 따라야하는 규칙은 없다.

중괄호

• 코드 블록을 사용하는 것을 가장 추천한다.

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

가로길이

• 가로 길이가 너무 길다면 여러 줄로 나눈다.
• 대개 80자나 120자로 제한한다.

들여쓰기

• 가로 들여쓰기 : 스페이스 두개 혹은 네개

show(parameters,
     aligned, // 스페이스 다섯 개를 이용해 들여쓰기 함
     one,
     after,
     another
  ) {
  // ...
}

• 세로 들여쓰기 : 논리 블록 사이에 넣어 코드를 분리해주는 새 줄

function pow(x, n) {
  let result = 1;
  //              <--
  for (let i = 0; i < n; i++) {
    result *= x;
  }
  //              <--
  return result;
}

세미 콜론

• 모든 구문의 끝에는 세미콜론을 쓰는 것이 좋다.

중첩레벨

• 너무 깊은 중첩문을 사용하지 않도록 한다.
• 반복문을 사용할 때 중첩문의 깊이가 깊어지면 continue 지시자를 쓰는게 좋은 대안이 될 수도 있다.

// if 문으로 조건 처리하는 예시
for (let i = 0; i < 10; i++) {
  if (cond) {
    ... // <- 중첩 레벨이 하나 더 늘어난다.
  }
}

// continue를 써서 중첩 레벨을 줄인다.
for (let i = 0; i < 10; i++) {
  if (!cond) continue;
  ...  // <- 추가 중첩 레벨이 추가되지 않는다.
}

• If/else와 return문 조합

// 예시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;
}

함수의 위치

• 헬퍼 함수 여러개를 만들어 사용하고 있다면 다음과 같은 방법을 사용해 코드 구조를 정돈할 수 있다.

// 함수 선언
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

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

• 코드를 먼저, 함수는 그 다음에 선언

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

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

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

• 두번째 방법을 선호한다.

스타일 가이드

• Google의 자바스크립트 스타일 가이드
• Airbnb의 자바스크립트 스타일 가이드
• Idiomatic.JS
• StandardJS
• 기타 등등

Linter

• 내가 작성한 코드가 스타일 가이드를 준수하고 있는지 자동으로 확인할 수 있고, 스타일 개선과 관련된 제안도 받을 수 있다.
• JSLint – 역사가 오래된 linter
• JSHint – JSLint보다 세팅이 좀 더 유연한 linter
• ESLint – 가장 최근에 나온 linter
• 플러그인 형태로 유명 에디터와 통합해서 사용할 수 있다.
• ESLint를 사용한다 가정했을 때 다음 절차를 따르면 에디터와 linter를 통합해 사용할 수 있다.
  • Node.js를 설치합니다.
  • npm(자바스크립트 패키지 매니저)을 사용해 다음 명령어로 ESLint를 설치합니다. npm install -g eslint
  • 현재 작성 중인 자바스크립트 프로젝트의 루트 폴더(프로젝트 관련 파일이 담긴 폴더)에 .eslintrc라는 설정 파일을 생성합니다.
  • 에디터에 ESLint 플러그인을 설치하거나 활성화합니다. 주요 에디터들은 모두 ESLint 플러그인을 지원합니다.