코드스타일링 📖
코드 스타일링은 왜 중요한가?
- 동료가 코드를 쉽게 이해할 수 없기 때문에 소통에 걸리는 시간 증가
- 코드에 에러가 있는 경우 쉽게 발견을 할 수 없다.
- 개발자에게 시간은 굉장히 중요한데 알아보기 힘든 코드를 작성하게 되면 이에 대한 소통 비용이 발생하게 되는데 이는 시간낭비가 되게 된다.
- 그렇기에 코드 스타일링을 통해 알아보기 쉬운 코드, 정돈된 코드가 필요하다.
Indentation – 들여쓰기
- 들여쓰기를 할 때 탭이 아닌 스페이스 사용(2칸)을 권장
- 스페이스와 탭을 혼용하여 쓰는 것은 좋지 않다.
Naming – 이름 짓기
- 변명은 값의 본질적인 의미를 가지고 있어야 한다.
- 변수의 이름은 한 단어(Descriptive word)로 표현하는 것이 가장 좋습니다. 개발 분야(domain)의 핵심을 잘 묘사해주는 단어일수록 좋습니다. 예를 들어 금융 관련 개발을 하는 경우, 그 산업 분야에서 사용하는 용어를 가능하면 그대로 쓰는 것이 좋습니다.
boolean이 할당된 변수는 is 혹은 are을 붙여서 참 혹은 거짓임을 분명히 표현
이미 많은 개발자들이 boolean이 할당된 변수 이름을 is 혹은 are로 사용
"케리는 강아지입니다"라는 사실을 코드로 가장 쉽게 표현하는 방법이기 때문입니다. "강아지입니다"가 참(true)인지 거짓(false)인지 명확하게 보여주고 있죠.
let isDog = true;
let 강아지입니다 = true;Good:
let areEqual = true;Bad:
let pass = true;JavaScript의 문자열 표시를 위해서 작은 따옴표를 권장합니다.
- HTML과 구분하기 위해 문자열 표기 시 작은 따옴표 권장
Good:
let dog = 'dog';
let cat = 'cat';Acceptable:
let dog = "dog";
let cat = "cat";
// 큰 따옴표도 괜찮습니다. Bad:
let dog = 'dog';
let cat = "cat";
// 띄어쓰기와 tab과 같이 혼용은 최악의 코드 스타일입니다.줄 바꿈이 필요한 문자열을 정의할 때는 `(백틱, backtick) 사용을 권장
Good:
let multilineText = `this is line one
this is line two
this is line three`;
// 엔터가 명확하게 보입니다.Bad:
let multilineText = 'this is line one' + '\n' + 'this is line two' + '\n' + 'this is line three';
// 엔터가 명확하게 보이지 않습니다.if, for, while문의 끝에는 세미콜론을 사용하지 않아야 한다.
- 중괄호로 끝나는 Statement는 이미 종료가 암시되어 있기에, 세미콜론을 사용하지 않는다.
Good:
if (condition) {
response();
}Bad:
if (condition) {
response();
};함수 표현식의 끝에는 세미콜론을 사용
- if, for, while 구문의 끝처럼 보일지라도 코드 끝에 세미콜론을 써야한다.
Good:
let greet = function () {
alert('hi');
};Bad:
let greet = function () {
alert('hi');
}연산자와 키워드
엄격하지 않은 동치 연산(loose equality, ==, !=)는 엄밀하지 않기 때문에 반드시 엄격한 동치 연산(strict equality, ===, !==)을 사용
3항 연산자(?)는 간결하고 가독성이 좋은 경우만 사용 (장황한 경우 가독성이 떨어진다)
not 연산자(!)는 바로 앞에 붙여서 사용합니다.
Good:
if (!isEqual) {Bad:
if (! isEqual) {짤고 간결하게 쓰기
코드는 뜻이 분명하고 실행 되는 한, 되도록 짧게
부정의 의미가 명확한 곳에만 NOT 연산자를 사용
Good:
if(equalSizes && equalValues) {
// 사이즈가 같고, 값이 같은 경우
} else {
}Bad:
if(!equalSizes || !equalValues) {
// 사이즈가 같지 않거나 값이 값지 않은 경우
} else {
}
// 이 조건문은 불필요하게 조건에 대해 고민을 해야 합니다.
- Boolean으로 평가되는 표현문은 바로 return
Good:
return charSet.size > text.length;Bad:
if(charSet.size < text.length) {
return false;
}
return true;
// 비교문은 무조건 true 혹은 false로 평가되기 때문에 장황하게 조건문을 작성하지 않습니다.코드 문장과 구문 사이 공간
한 번에 더 많은 코드를 읽기 위해서, 줄 바꿈은 최소로 사용
들여쓰기는 일관성있게, 최소화하여 사용
같은 라인에 값을 보기 위해 하는 들여쓰기는 지양
Good:
let firstItem = getFirst();
let secondItem = getSecond();
let thirteenthItem = getThirteenth();Bad:
let firstItem = getFirst();
let secondItem = getSecond();
let thirteenthItem = getThirteenth();
// 불필요한 들여쓰기가 너무 많아졌습니다.
- 콤마(,) 사이는 한 칸 띄어씁니다.
- 연산자 사이는 한 칸 띄어씁니다.
Good:
'Failed [' + testName + ']'...
Good:
if(actual === expected){
// action
} else {
// alternate action
}Bad:
'Failed ['+testName+']'...
Bad:
if(actual===expected){
// action
}else{
// alternate action
}주석
- 꼭 필요한 경우에만 작성
- 주석을 적기 전에, 변수 이름과 구조로 코드의 목적이 명확히 표현되면 주석을 적을 필요가 없다
- 주석으로 코드의 작동을 설명하는 것은 지양한다. 코드를 보고 바로 이해할 수 있을 만큼 가독성이 좋게 코드 작성
- 공부 목적으로 활용하는 것은 좋으나, 숙달되어 이해할 수 있는 코드에 주석을 다는 것은 가독성이 떨어지기에 점차 줄여간다.
camelCase vs. snake_case
- JavaScript에서는 변수의 이름을 지정할 때 'Camel Casing'으로 지정, 이것은 Ruby 같은 다른 프로그래밍 언어에서 사용하는 'Snake Casing'과 다릅니다.
Good:
let camelCased = 'Used in javascript';Bad:
let snake_cased = 'Used in other languages';
JavaScript에서 '뱀 모양'을 사용하는 경우는, 상수 이름을 지을 때입니다.
const MAX_ITEMS_IN_QUEUE = 100;
Loding...