1. 파일 생성 원칙

• 소스파일의 이름은 알파벳 소문자, 하이픈( - ), 밑줄( _ ) 으로만 작성한다.
• 소스파일의 확장자명은 .jsx 으로 작성한다.
• 탭을 이용한 들여쓰기를 해도 상관없다.

2. 형식

1. 중괄호

   1. 중괄호는 하나의 구문만을 포함하고 있더라도 모든 제어문*(i.e. if, else, for, do, while..)*에 사용되어야 한다.
   2. 중괄호의 사용은 Kernighan and Ritchie Style에 따른다.

2. 들여쓰기

   1. 배열, 객체는 블록과 동일하게 들여쓴다.
   2. 함수 표현식을 작성할 대에는 함수를 이전 레벨보다 2칸 들여써 작성한다.
   3. **점( . )**을 이용하여 3개 이상 메소드 체인을 작성할 때는 각 메소드마다 들여쓴다.

   const leds = stage.selectAll('.led').data(data).enter()
   		.append('svg:svg').classed('led', true).attr('width', (radius + margin) * 2)
   	  .append('svg:g').attr('transform', `translate(${radius + margin},${radius + margin})`)
       .call(tron.led);
   

3. 공백

   1. 한 줄이 80자를 넘기지 않도록 한다.
   2. 줄 공백 (Vertical Whitespace)

      1. 줄 공백은 아래의 사항에서 나타날 수 있다.

         1. 각 구문 사이
         2. 클래스나 객체 리터럴 내의 연속적으로 작성된 메소드 사이
         3. 오브젝트 리터럴 내의 연속적으로 작성된 속성 사이에서는 선택적으로 빈 줄을 사용할 수 있다. 이는, 논리적 그룹을 만드는데 사용된다.
         4. 클래스나 객체 리터럴 내의 첫 메소드 전이나 마지막 메소드 다음에 빈 줄을 선택적으로 사용할 수 있다.
         5. 줄 공백으로 2줄 이상 연속으로 사용하지 않는다.

         // good
         if (foo) {
           return bar;
         }
         
         return baz;
         

         // good
         const obj = {
           foo() {
           },
         
           bar() {
           },
         };
         
         

   // good
   const arr = [
     function foo() {
     },
   
     function bar() {
     },
   ];
   
   return arr;
   

   3. 변수

   1. 지역 변수는 그 변수를 포함하는 블록 시작에서 선언하지 않고, 사용 범위를 최소화하기 위해 사용되는 지점과 가장 가까운 곳에서 선언한다.

      // good
      function() {
        test();
        console.log('doing stuff..');
      
        const name = getName();
      
        if (name === 'test') {
          return false;
        }
      
        return name;
      }
      

   2. 변수를 선언할 때는 const를 사용한다.단, 변수의 값이 바뀌는 경우 let을 사용한다.

   4. 배열

   1. 배열에 값을 넣을 때는 Array.push를 사용한다.

      const someStack = [];
      
      someStack.push('abracadabra');
      

   5. 객체

   1. 키는 **큰 따옴표( " )**를 씌운다.

   // good
   var my_object = {
     "key": "value",
     "key2": "value2",
   };
   

6. 클래스

1. prototype을 직접 조작하지 않고 class를 사용한다.

// good
class Queue {
  constructor(contents = []) {
    this._queue = [...contents];
  }
  pop() {
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
  }
}

1. 상속은 extends를 사용한다.

// good
class PeekableQueue extends Queue {
  peek() {
    return this._queue[0];
  }
}

1. toString() 메소드를 오버라이딩할 수 있지만 사이드 이펙트가 나타나지 않도록 해야한다.

class Jedi {
 constructor(options = {}) {
    this.name = options.name || 'no name'; // null이 반환되는 것을 방지
  }

  getName() {
    return this.name;
  }

  toString() {
    return `Jedi - ${this.getName()}`;
  }
}

7. 함수

1. 함수 내에 또다른 함수를 선언할 수 있다.

   // good
   function foo() { // 함수 전체가 hoist됨
   }
   

2. 함수식을 사용해야만한다면, 화살표 함수(Arrow Function)을 사용하라.

   // good
   [1, 2, 3].map((x) => {
     const y = x + 1;
     return x * y;
   });
   

8. 화살표 함수

1. 함수 바디가 하나의 식으로 구성된 경우, 중괄호와 return문을 생략할 수 있다. 중괄호를 생략하지 않을 경우, return문을 포함시켜야 한다.

// good
[1, 2, 3].map(number => `A string containing the ${number}.`);

// good
[1, 2, 3].map(number => {
  const nextNumber = number + 1;
  return `A string containing the ${nextNumber}.`;
});

1. 식이 여러 줄에 걸쳐있을 경우에 가독성을 위해 소괄호로 감싸 사용한다.

   // good
   [1, 2, 3].map(number => (
     `As time went by, the string containing the ${number} became much ` +
     'longer. So we needed to break it over multiple lines.'
   ));
   
   

9. 문자열

1. 80글자 이상의 긴 문자열을 여러 줄에 걸쳐 쓰기 위해서는 템플릿 리터럴 혹은 **문자열 연결( + )**을 사용한다.

   // good
   const errorMessage = 'This is a super long error that was thrown because ' +
     'of Batman. When you stop to think about how Batman had anything to do ' +
     'with this, you would get nowhere fast.';
   
   const errorMessage = `This is a super long error that was thrown because
     of Batman. When you stop to think about how Batman had anything to do
     with this, you would get nowhere fast.`;
   

2. 동적으로 문자열을 생성할 경우에는 문자열 연결이 아닌 템플릿 리터럴을 사용한다.

   // good
   function sayHi(name) {
     return `How are you, ${name}?`;
   }
   

10. 숫자

1. 숫자는 10진수, 16진수(0x), 8진수(0o), 2진수(0b)로 표현될 수 있다.x, o, b 바로 다음에는 불필요한 0을 포함시키지 않는다.

11. 제어

1. 반복문
   1. for문을 사용해도 상관없다.
2. 스위치문
   1. default문은 항상 마지막에 위치한다.
3. this
   1. this키워드는 클래스 생성자와 메소드, 혹은 그 안에서 선언된 화살표 함수 내에서만 사용한다.
4. 조건식, 등가식
   1. ===, **!==**를 사용하라.
   2. 조건식은 ToBoolean 메소드에 의한 강제 형변환으로 평가되어 아래의 규칙을 따른다.
      • 오브젝트는 true로 평가
      • undefined는 false로 평가
      • null 은 false 로 평가
      • 값은 true로 평가. 단, +0, -0, or NaN 의 경우는 false로 평가
      • 문자열은 true로 평가. 단, 빈문자( '' )의 경우는 false로 평가