코딩 컨벤션
코딩 컨벤션이란 내가 나의 코드를, 다른 사람이 나의 코드를 보고 원활하게 의사소통하고 해석하기 위한 규칙입니다. 코딩 컨벤션을 규정하는 이유느 사람마다 코딩 스타일이 제각각이기 때문입니다. 다음은 자바스크립트에서 if문을 사용하는 세 가지 방식입니다.
if() {
return;
}
if()
{
return;
}
if() return;이처럼 사람마다 제각각인 코딩 스타일들을 하나로 통일해서 가독성과 유지보수성을 높이고, 원만한 협업을 할 수 있게 미리 약속해둔 코딩 규칙을 코딩 컨벤션이라고 합니다.
자바스크립트의 코딩 컨벤션은 회사마다, 집단마다 조금씩 차이가 있기 때문에 저는 공통적인 코딩 컨벤션들을 가지고 소개해드리겠습니다. 따라서 제가 소개해드리는 컨벤션은 정형화된 정석이 아닙니다.
소스 파일
- 소스 파일명은 알파벳 소문자, 하이픈
-, 언더바_로만 작성한다. - 소스 파일의 확장자는
.js로 통일한다. - 소스 파일의 인코딩은
UTF-8을 사용한다. - 한 행에 하나의 명령만을 작성한다.
- 1행 당 문자 수는 80자 이내로 작성한다.
- 파일의 맨 끝은 개행한다.
- 세미콜론
;은 필수가 아닌 언어지만, 반드시 붙여준다.
공백
- 들여쓰기는 탭이 아닌 스페이스 2개를 사용한다.
- 공백에 스페이스와 탭을 섞지 않는다.
- 콤마
,와 세미콜론;의 뒤에 공백을 넣는다. - 함수나 객체 등을 정의한 블록의 전후에 공백 행을 넣는다.
- 공백 행을 연속으로 2개 이상 사용하지 않는다.
구문
명명규칙
- 대문자와 소문자를 엄격하게 구분한다.
- 변수명과 함수명은
CamelCase를 따른다. (예. getReady(), colorOfCar) - 상수명은 대문자의
언더 스코어방식을 이용한다. (예. PI, MAX_VERTEX) - 생성자와 클래스명은
PascalCase를 따른다. (예. Student, MyClass) - 프라이빗 멤버들은 언더바
_로 시작한다. (예. _id, _name) - 이벤트 핸들러 함수는
on으로 시작한다. (예. onClick, onMove) - 명명할 때 축약보다는 의미를 알기 쉽게 풀어쓴다.
//변수와 함수명
const PI = 3.14;
let number = 2;
let getSquare = (number) => {
return number * number;
};
//클래스 명명과 프라이빗 멤버
class StudentInfo {
let _name;
let _id;
constructor(name, id) {
this._name = name;
this._id = id;
}
}중괄호 블록 { }
- 블록은 열기 전에 개행하지 않는다.
- 중괄호 블록은 닫기 전에 개행한다.
if () //나쁜 작성
{
}
if () { //나쁜 작성
callFunction(); }
if () { //좋은 작성
callFunction();
}제어문
- 제어문 키워드 뒤에 한 칸의 공백을 가지고 괄호를 사용한다.
- 중괄호는 모든 제어문에서 한 줄의 명령을 갖더라도 반드시 써야하낟.
- 단,
if문에서는 구문이 한 줄의 명령을 가지면, 같은 라인에 명령을 작성하고 중괄호를 생략할 수 있다. - 조건문의 조건부는 가급적이면 간단하게 작성한다.
for (let i=0; i<3; i++) callFunction(); //나쁜 작성
for (let i=0; i<3; i++) { //종은 작성
callFunction();
}
//단, if문은 다음과 같은 작성을 허용
if () callFunction();
//조건부는 쓸데없이 길어지지 않도록 한다.
if (foo === true) //나쁜 작성
if (foo) //좋은 작성변수
- 변수 선언에서 var대신
let,const를 사용한다. - 한 번의 선언에서 하나의 변수만을 선언한다.
- 문자열은 큰 따옴표
"대신 작은 따옴표'를 사용한다.
var num1; //var 선언은 지양할 것. 블록 스코프와 관련한 문제가 있습니다.
let num2;
const num3;
let a, b; //한 번에 여러개의 선언보단,
let c;
let d; //나눠서 이용하기
//문자열은 작은 따옴표 이용하기
let str = "문자열입니다.";
let str = '문자열입니다.';기타 구문
==과!=대신===,!==를 사용한다.- 숫자는 2/8/10/16 진수로만 표기하며, 2진수의 b/8진수의 o/16진수의 x 이후 불필요한 0은 적지않는다.
- 문자열에서 eval() 함수는 사용하지 않는다.
- return문을 위한 불필요한 변수 선언을 자제한다.
if (a==b) //나쁜 작성
if (a===b) //좋은 작성
//나쁜 작성
function() {
let result;
result = 1+1;
return result;
}
//좋은 작성
function() {
return 1+1;
}