이번에 팀 프로젝트를 하면서 코딩 스타일을 맞추는 것이 중요하다는 것을 느꼈다.
이제껏 혼자 코딩을 해왔기에 코딩 스타일을 신경쓸 필요가 없었지만 이제는 아니었다.
그래서 요즘 많이 사용하는 언어인 JavaScript의 코딩 컨벤션에 대해 알아보기로 했다.
파일의 기본 규칙
- 파일의 이름은 알파벳 소문자, 하이픈, 언더바로만 작성한다.
- 파일의 인코딩은 UTF-8을 이용한다.
2. 형식
1) 중괄호
- 중괄호는 모든 제어문(if, else, for, while...)에 사용되어야 한다.
- 중괄호는 Egyptian Style에 따라 사용한다.
- 여는 중괄호 전에는 줄을 바꾸지 않고 후에는 줄을 바꾼다.
- 닫는 중괄호 전과 후에는 줄을 바꾼다.
- 닫는 중괄호 후에 else, catch, while 등이 오는 경우에는 줄을 바꾸지 않는다.
- if문의 경우 만약 하나의 구문만 포함할 때는 중괄호를 생략할 수 있다.
- if문이나 try-catch문에서는 중괄호 안의 내용이 없더라도 줄을 바꾼다.
// good
if (condition) {
...
}
if (condition) {
...
} else {
...
}
if (condition) ...
try {
...
} catch (error) {
}
// bad
if (condition)
...
if (condition) { ... }
try {
...
} catch (error) {}2) 구문
- 모든 구문의 끝에는 세미콜론을 붙인다.
- 한 줄에는 하나의 구문만을 작성한다.
// good
console.log("Hello Wolrd!");
method1();
method2();
// bad
console.log("Hello Wolrd!")
method1(); method2();3) 공백
(1) 들여쓰기
- 새로운 블록이 나타날 때마다 두 칸의 공백을 통해 들여쓴다.
- 길이가 긴 메소드 체인을 작성할 때는 각 메소드마다 들여쓴다.
// good
if (condition) {
...
}
item.
method1().
method2().
method3().
method4().
method5();
// bad
if (condition) {
...
}
if (condition) {
...
}
item.method1().method2().method3().method4().method5();(2) 줄 공백
- 함수나 객체 등을 정의한 블록의 전과 후에는 줄 공백을 넣는다.
- 각 구문 사이에 논리적인 그룹을 만들기 위해 선택적으로 줄 공백을 사용할 수 있다.
- switch문에서 break와 다음 case 사이에 줄 공백을 넣는 것은 선택이다.
- 줄 공백을 2줄 이상 연속으로 사용하지 않는다.
// good
method1();
method2();
// bad
method1();
method2();(3) 칸 공백
- 구문의 끝에는 공백을 사용하지 않는다.
- if, for, catch와 같은 키워드와 소괄호 사이에는 공백을 사용한다.
- else, catch와 같은 키워드와 중괄호 사이에는 공백을 사용한다.
- 이항 연산자와 삼항 연산자의 양쪽에는 공백을 사용한다.
- 반점, 세미콜론과 오브젝트 리터럴 내의 콜론 다음에는 공백을 사용한다.
- 주석을 처리하는 키워드와 주석 사이에는 공백을 사용한다.
- 소괄호와 대괄호 사이에는 공백을 사용하지 않지만 중괄호 사이에는 공백을 사용한다.
// good
if (condition) {
...
} else {
}
const a = condition ? 1 : 2;
// Hello World!
const arr = [1, 2, 3];
// bad
if(condition){
...
}else{
}
const a = condition?1:2;
//Hello World!
const arr = [ 1, 2, 3 ];3. 변수
- 한 줄에 하나의 변수를 선언한다.
- var 대신 let과 const를 사용한다.
- const를 사용하는 변수를 먼저 작성하고 let을 사용하는 변수를 작성한다.
- 지역 변수는 사용되는 지점과 가장 가까운 곳에서 선언한다.
// good
let a = 1;
let b = 2;
// bad
let a = 1, b = 2;4. 객체
- 객체를 선언할 때는 생성자가 아닌 리터럴 구문을 사용한다.
- 객체로부터 값을 할당받을 때는 구조 분해 할당을 사용한다.
// good
const obj = {};
const { key1, key2, key3 } = obj
// bad
const obj = new Object();
const key1 = obj[key1];
const key2 = obj[key2];
const key3 = obj[key3];5. 기타
- 취약점이 많은 eval 함수를 사용하지 않는다.
- 숫자는 2, 8, 10, 16진수로 표기하고 b, o, x 이후에 불필요한 0은 표기하지 않는다.
- 일반적인 for문보다 for-of문을, for-of문보다 map과 같은 고차 함수를 사용해야 한다.
- ==, != 보다는 ===, !===을 사용해야 한다.
- 조건식은 ToBoolean 메소드에 의해 강제 형변환으로 평가된다.
- 객체는 true로 평가된다.
- undefined나 null은 false로 평가된다.
- 값은 true로 평가되나 0이나 NaN의 경우에는 false로 평가된다.
- 문자열은 true로 평가되나 빈 문자열의 경우에는 false로 평가된다.
