[Javascript] 스타일 가이드 #1

자바스크립트 스타일 가이드

1. 들여쓰기

 if(true){
    doSomething();
}

---

2. 줄 길이

• 한 줄은 최대 80자이다. 80자보다 길어지면 연산자(콤마, 더하기 기호 등)
  이후 줄을 끊어 다음 줄에 작성한다. 끊어서 하면 8줄 공백

 doSomething(argument1, argument2, argument3
            argument4);

---

3. 기본 리터럴

• 문자열은 반드시 작은따옴표가 아닌 큰따옴표를 사용하고 한 줄로 작성한다
  문자열을 역슬래시로 끊어 여러 줄에 걸쳐 작성하면 안된다.

좋은 예
- var name = "Nicolas"; 

나쁜 예
- var name = 'Nicolas';

• 숫자는 꼭 10진수 정수, 지수 표기법을 사용한 정수, 16진수 정수 또는 부동 소수점 10진수만 사용하고 소수점 뒤에 숫자가 최소 하나는 있어야 한다. 8진수는 절대 사용하면 안된다.

좋은 예 
- var count = 10;
- var count = 10.0;
- var count = 0xA2;

나쁜 예
- var count = 10.;
- var count = .1;
- var count = 010;

• null값은 반드시 다음 상황에서만 사용한다

1. 객체 값을 나중에 할당할 변수를 초기화 할 때
2. 초기화된 변수에 객체 값이 할당되었느지 비교할 때
3. 객체를 인자로 넘겨야 하는 함수를 호출할 때
4. 함수에서 객체를 반환해야 할 때

좋은 예
- var person = null;
- function getPerson(){
    if(condition){
        return new Person('Nicholas');
    } else{
        return null;
    }
}

나쁜 예 : 초기화되지 않은 변수를 null로 비교
- var person;
  if(person != null){
      doSomething();
  }

• undefined는 절대로 사용해서는 안된다.
  변수가 정의되었는지 확인하려면 typeof 연산자를 사용한다.

좋은 예
- if(typeof variable == "undefined"){
    //실행할 코드
}

나쁜 예 : undefined 사용
if(variable == undefined){
    //실행할 코드 
}

---

4. 연산자에 공백 넣기

• 연사자를 두 개의 피연산자에 사용할 때는 연산자 앞뒤에 공백을 하나식 추가해 표현식이 명확하게 보이도록 합니다. 할당 연산자와 논리 연산자를 의미합니다.

좋은 예
- var found = (values[i] === item);
- if (found && (count > 10)){
    doSomething();
}
- for (i = 0; i < count; i++){
    process(i);
}

나쁜 예
- var found = (values[i]===item);
- if(found&&(count>10)){
    doSomething();
}
- for(i=0; i<count; i++){
    process(i);
}

---

5. 괄호에 공백 넣기

• 괄호를 사용할 때 여는 괄호 바로 다음과 닫는 괄호 바로 앞에는 공백이 없어야 합니다

좋은 예
- var found = (values[i] === item);
- if (found && (count > 10)){
    doSomething();
}
- for (i = 0; i < count; i++){
    process(i);
}

나쁜 예
- var food =( values[i] === item);
- if(found&&(count>10) ){
    doSomething();
}
- for(i=0; i<count; i++){
    process( i );
}

---

6. 객체 리터럴

• 객체 리터럴은 다음 형식으로 작성합니다.
  • 여는 중괄호는 중괄호를 연 문장과 같은 줄에 있어야 한다
  • 각 프로퍼티-값 쌍은 여는 중괄호 다음 줄부터 작성하며 여는 중괄호가 있는 문장을 기준으로 한 단계 들여쓰기 한다.
  • 각 프로퍼티-값 쌍 형식은 따옴표로 감싸지 않고 프로퍼티 이름을 입력하고 그 다음에 공백 없이 콜론을 입력한 뒤 값을 입력한다.
  • 값이 함수라면 프로퍼티명 다음에 한 줄로 길게 입력하지 않고 또한 함수 이전 줄과
    다음 줄에 공백을 넣어야 한다.
  • 관련된 프로퍼틸르 묶거나 가독성을 높이기 위해 빈 줄을 추가해도 된다.
  • 닫는 중괄호는 별도의 줄에 있어야 한다.

 좋은 예
 - var object = {

     key1: value1,
     key2: value2,

     func: function(){
         //필요한 로직 수행
     },

     key3: value3
 };

 나쁜 예 : 잘못된 들여쓰기
 - var object = {
            key1: value1,
            key1: value2
 };

 나쁜 예 : 함수 앞 뒤에 빈 줄 없음
 var object={
     key1:value1,
     key1:value2,
     func: function(){
         //필요한 로직수행 중
     },
     key3: value3
 }

• 함수에 객체 리터럴을 전달할 떄 여는 중괄호는 변수를 전달할 때처럼 같은 줄에있어야 한다. 그 외 다른 형식은 방금 설명한 객체 리터럴 형식을 그대로 사용합니다.

- 좋은 예
doSomething({
    key1: value1,
    key2: value2
});

- 나쁜 예
doSomething({key1:value1, key2:value2});

---

 

참고문헌 : 읽기좋은 자바스크립트 코딩 기법 / Maintainable Javascript / 니콜라스 자카스