파트 1 - 2) 코드 품질 - 2) 코딩스타일

코딩스티일 링크 : https://ko.javascript.info/coding-style

추천할만한 문법규칙

1. 함수명과 파라미터 괄호 사이에 띄어쓰기 X
2. 파라미터와 파라미터 괄호 사이에 띄어쓰기 O
3. 파라미터 괄호 닫고 같은 줄에 중괄호 열기. (이집션(Egyptian) 스타일)
4. 연산자 앞뒤로 띄어쓰기 O
5. 표현식 뒤에 꼭 세미콜론 쓰기.
6. 한줄에 너무 길게 쓰지 않기 (대개 80자 or 120자)
7. } else { : else 양옆 중괄호 줄바꿈 하지 않기
8. 중첩 호출 양옆에 띄어쓰기 O, ex) alert( paw(x,n) )
9. 논리 블록 (logical blocks) 사이 한 줄 띄기. (= 세로 들여쓰기)
   이런 세로 들여쓰기 없이 아홉줄 이상 연속으로 쓰지 않기.

ex) let x = prompt("x?", "");
let n = prompt("n?", "");

if(n < 0) { ~ }

10. for, if, while ... 뒤에는 한 칸 띄어쓰기.

ex) for (조건) {~}

11. 들여쓰기는 두 칸. 탭으로 띄어쓰는 방법이 있고 띄어쓰기로 띄어쓰는 방법이 있는데 요즘은 띄어쓰기로 쓰는 방법이 많이 쓰인다고 한다.

중첩 레벨

반복문을 이용할 때 중첩이 길어지면 continue를 사용하는 게 대안이 될 수 있다.

for (let i=0; i < 10; i++) {
  if (condition) {
  ... // => 중첩레벨 증가
  }
}

위 예시문을 아래와 같이 쓰는 방법이다.

for (let i=0; i < 10; i++) {
  if (!condition) continue;
  ... // => 중첩레벨이 추가 되지 않는다!
}

if문도 마찬가지로 if { ~ } else { ~ } 를 쓰기보다 if문에 return; 을 넣어 if문 바깥의 코드가 실행되도록 하는 것이 중첩레벨을 줄여 가독성을 높인다.

함수의 위치

대개는 헬퍼 함수를 여러 개 사용하고 있으면 헬퍼 함수를 사용하는 코드를 상단에 정의 하고 그 하단에 함수들을 선언하는 것을 선호한다.

스타일 가이드

스타일 가이드는 코드를 어떻게 작성할 것인지에 대한 전반적인 규칙을 담은 문서이다.
유명한 문서로는 Google의 자바스크립트 스타일 가이드, Airbnb의 자바스크립트 스타일 가이드 등이 있다.

1. 구글 자바스크립트 스타일 가이드.
2. 에어비앤비 자바스크립트 스타일 가이드

Linter

작성 코드들이 스타잉ㄹ 가이드를 준수하고 있는지 자동으로 확인, 스타일 개선 제안도 제공한다.
JSLint, JSHint, ESLint 등이 있다.
npm을 이용해 eslint 설치, 루트 폴더에 .eslintr 라는 설정파일 생성, (babel의 설정파일도 babelrc 이다.) .eslintrc에 "extends"; "eslint: recommended" 속성을 주면 기재한 린트를 기반으로 스타일 가이드를 확장할 수 있다.