본 스타일 가이드는 여러 개발자들이 협업을 통해서 자바스크립트 소스를 작성할때, 가장 깔끔하고 이해하기 쉬운 결과물을 생성하기 위해 권장하는 스타일을 모아보았다.

1. 들여쓰기는 공백(space)를 사용하고, 탭(tab)을 사용하지 않는다.

  • 소스편집기마다 탭으로 들여쓰는 깊이가 다르기 때문에, 다른 편집기들에서 작성한 문서를 불러들이면 들여쓰기 깊이가 깨지기 때문이다.
  • 들여쓰기는 공백 2문자를 권장으로 한다.

      //안좋은예
      function foo() {
              var val = 1;
      }
    
      //좋은예
      function foo() {
        var val = 1;
      }
    

2. 문장은 항상 세미콜론(;)으로 끝나야 한다.

  • 특정 스크립트 엔진에서는 문장 끝에 세미콜론을 생략해도 에러가 발생하지 않는 경우가 있지만, 문장의 끝은 항상 세미콜론으로 끝나는것을 권장한다.

      //안좋은예
      var test1 = "111"
      var test2 = "abc"
      print(test1)
    
      //좋은예
      var test1 = "111";
      var test2 = "abc";
      print(test1);
    

3. if, for 와 같은 제어문, 반복문 문단에는 항상 중괄호({})를 사용하도록 한다.

  • if, for 와 같은 제어문, 반복문 문단에서 한줄로 이루어진 문단은 중괄호({})를 생략해도 가능한 경우가 있지만, 이러한 문장에도 항상 중괄호({})를 사용하도록 한다.

      //안좋은예
      if (test == 1) print("aaa")
      else print("bbb")
    
      //좋은예
      if (test == 1) {
        print("aaa")
      } else {
        print("bbb")
      }
    

4. 객체(object)나 JSON문자열 작성시에 값(value)에 수직 정렬은 사용하지 않도록 한다.

  • 객체나 JSON문자열 작성시 값 부분에 수직 정렬을 넣는 경우가 있는데, 이는 편집기마다 들여쓰기 깊이가 깨지는 경우가 많으므로 권장하지 않는다.
  • 요즘 편집기들(Eclipse, VS Code, IntelliJ 등)은 컬러 스타일링으로 키:값 구분을 확실히 해주므로 예전과 같이 값 수직 정렬은 필요하지 않다.

      //안좋은예
      {
        age:       35,
        firstName: 'Chris',
        lastName:  'Evans',
        sex:       'Male'
      }
    
      //좋은예
      {
        age: 35,
        firstName: 'Chris',
        lastName: 'Evans',
        sex: 'Male'
      }
    

5. 문자열 선언시에 이중따옴표(“)보다는 작은따옴표(‘)를 사용하도록 한다.

  • 문자열 선언시에 작은따옴표(‘)를 사용하도록 권장하며, 자바스크립트 ES2015 이상에서 사용하는 템플릿 문자열 선언시에는 백틱(`)을 사용도록 한다.

      //안좋은예
      var message = "Hello " + username;
    
      //좋은예
      var message = 'Hello ' + username;
      var message = `Hello ${username}`;
    

JavaScript StyleGuide

Blog Logo

HeeHun Kang


Published