3-2 코드 스타일링

Blackwidow·2020년 11월 9일
0
post-thumbnail

코드 스타일링이 중요한 이유(가독성이 좋은 코드)

  • 동료가 코드를 쉽게 이해할 수 없기 때문에 소통에 걸리는 시간이 증가(소통비용발생)
  • 코드에 에러가 있는 경우 쉽게 발견할 수 없다


1. 들여쓰기(Indentation)

if (condition) {
  action();
  
//종속된 code block는 주인 code block보다 두 칸 들여쓰기 한다.
//tap키보다는 space바를 권장
  
if (condition) {
  action();
}

//code block의 마지막 줄을 쓸 때 마지막 줄의 시작은, 시작할 때의 줄의 시작과 동일한 곳에서 쓰기.

2. 이름짓기(Naming)

  • 변수명은 값의 본질적인 의미를 가지고 있어야 한다.
  • 변수의 이름은 한 단어로 표현하는것이 가장 좋다.
  • 개발분야의 핵심을 잘 묘사해주는 단어일수록 좋다.
  • 예) 금융관련개발일 경우, 그 산업 분야에서 사용하는 용어를 가능하면 그대로 사용하는 것을 추천.
let interestRate = 0.1;

//이자율임을 쉽게 알 수 있다. 어떤 금융상품의 이자율인지 표기해보면 더 좋을것이다.

let interestRateSelfgiftDeposit = 0.1;

-변수에 할당되는 값의 형식이 아닌, 그 값의 의미가 변수이름에 반영되어야 한다.

let animals = ['cat', 'dog', 'fish']; //good
let targetInputs = ['cat', 'dog', 'fish']; //bad

-데이터의 모음(collection)이 할당된 변수의 이름을 복수 명사가 좋다.

let animals = ['cat', 'dog', 'fish']; //good
let animalList = ['cat', 'dog', 'fish']; //bad
let animal = ['cat', 'dog', 'fish']; //very bad

-boolean이 할당된 변수는 is혹은 are을 붙여서 참 혹은 거짓임을 분명히 표현한다.

let isDod = true; //good
let areEqual = true; //good
let pass = true; //bad

-함수의 이름은 동사로 시작하는게 좋다.

let countBlocks = function() {
} //벽돌을 세는 함수임을 쉽게 알 수 있다.
let countWaterBlocksBetweenTowers = function() {
} //타워 사이의 벽돌의 개수를 세는 함수임을 쉽게 알 수 있습니다.
let waterBlocks = function() {
} //어떤 기능을 하는 함수인지 단번에 파악하기 어렵다.

-변수 할당 값이 class인 경우에 주로 변수의 첫 글자를 대문자로 사용한다.

class Animal(){
// ES6 부터 사용 가능한 class가 할당되는 변수는 첫 글자를 대문자로 적는다.
}

-상수는 모두 대문자로 적는다

const MAX_ITEMS_IN_QUEUE = 100;
profile
javascript 공부하는 sumiindaeyo

0개의 댓글