# :computer: Javascript 코딩 컨벤션

## 코딩 컨벤션

### 명명규칙

#### 파일명

- 기본: camel case(전부 소문자)

- 리액트 컴포넌트 파일 및 폴더: `PascalCase`

#### 네이밍

- 의미가 없거나 약어가 모호한 것은 쓰지 말자. ex) err, pc는 x
- (지역 변수 or private 변수)명은 '_'로 시작한다.
- URL, HTML 같은 범용적인 대문자 약어는 대문자 그대로 사용한다.

#### 식별자 유형별 규칙

- Pacakage names : `lowerCamelCase`
- Method names : `lowerCamelCase`
- Class names : `UpperCamelCase`
- Constant names ( 상수 ) : `CONSTANT_CASE`

### 들여쓰기

- space 2번으로 들여쓰기를 한다.

### 문장의 종료

- 한 줄에 하나의 문장만 허용하며, 문장 종료 시에는 반드시 세미콜론(;)을 사용한다.

### 전역 변수

- 암묵적 전역 변수를 사용하지 않는다. (최대한 지양하자)

### 선언과 할당

#### 변수

- 값이 변하지 않는 변수는 const를, 값이 변하는 변수는 let을 사용하여 선언한다. var는 절대로 사용하지 않도록 한다.
- const를 let 보다 위에 선언한다.
- const와 let은 사용 시점에 선언 및 할당을 한다.
- 외부 모듈과 내부 모듈을 구분하여 사용한다.

const lodash = require('lodash');
const $ = require(jquery);
const handlebars = require('handlebars');
const d3 = require('d3');

const pluginFactory from '../../factories/pluginFactory';
const predicate from '../../helpers/predicate';
const raphaelRenderUtil from '../../plugins/raphaelRenderUtil';

#### 배열과 객체

- 배열과 객체는 리터럴로 선언한다.

// Bad
const emptyArr = new Array();
const arr = new Array(1, 2, 3, 4, 5);

// Bad - 객체 생성자 사용
const emptyObj = new Object();
const obj = new Object();

// Good
const emptyArr = [];
const arr = [1, 2, 3, 4, 5];

// Good
const emptyObj = {};
const obj = {
  pro1: 'val1', 
  pro2: 'val2'
};

- 배열 복사 시 spread 연산자를 적극 사용한다.

const len = items.length;
let i;

// Bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// Good
const itemsCopy = [...items];

- 배열의 요소중 하나라도 줄 바꿈이 있다면 배열 안의 요소는 일관되게 모두 줄 바꿈을 해주어야 한다.
- 객체의 프로퍼티가 1개인 경우에만 한 줄 정의를 허용하며, 3개 이상일 경우에는 개행을 권장한다.
- 객체의 메서드 표현 시 축약 메소드 표기를 사용한다.

// Bad
const atom = {
  value: 1,

  addValue: function(value) {
    return atom.value + value;
  }
};

// Good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  }
};

- 메서드 문법 사용 시 메서드 사이에 개행을 추가한다.

#### 함수

- 함수 생성자를 사용하여 선언하지 않고, 함수는 함수 표현식으로 선언한다.
- 함수는 사용 전에 선언해야 하며, 함수 선언문은 변수 선언문 다음에 오도록 한다.

#### 화살표 함수

- arrow function의 매개변수는 1개여도 괄호를 사용한다.
- 함수 표현식 대신 화살표 함수를 사용한다.
- 암시적 반환을 최대한 활용한다.
- 암시적 반환을 사용할 경우 함수 본문 전에 개행을 하지 않는다.

    // good
    const calMax = (a,b) => max(a,b)

#### Destructuring

- 오브젝트의 프로퍼티에 접근할 때는 Destructuring을 이용한다.

#### 템플릿 문자열

- 변수 등을 조합해서 문자열을 생성하는 경우 템플릿 문자열(백틱)을 이용한다.

### 클래스와 생성자

- class와 extends를 이용해서 객체 생성 및 상속을 구현한다.
- 필요한 생성자는 우선적으로 선언해둔다. (초기 값이 없는경우 `undefined` 로 선언한다.)

### 모듈

- FE 개발에서는 항상 import와 export를 이용한다. (require는 사용하지 않는다.)
- import문으로부터 직접 export하지 않는다.

### 블록 구문

- 한 줄짜리 블록일 경우라도 {}를 생략하지 않으며 명확히 줄 바꿈 하여 사용한다.
- 키워드와 조건문 사이에 빈칸을 사용한다.
- switch-case 사용 시 첫 번째 case문을 제외하고 case문 사용 이전에 개행한다.
- switch-case 사용 시 각 구문은 break, return, throw 중 한 개로 끝나야 하며 default문이 없으면 // no default 표시를 해준다.

### 조건 확인하기

- 일치 연산자인 ===, !==을 권장한다.

### 반환하기

- 함수 내에서 반환은 한 번만 한다. 특정 값을 반환해야 하는 경우, 함수 맨 마지막에서 한 번만 반환한다. 단, 예외로 빠져나가는 경우는 제외한다. 코드를 예측하기 쉬우며 흐름이 간결한 함수를 작성할 수 있다.
- return문 바로 위는 한 칸 비워 놓는다.

// Bad
function getResult() {
  ...
  if (condition) {
    ...
    return someDataInTrue;
  }
  ...
  return someDataInFalse;
}

// Allow
function foo(isValid) {
  ...
  // 예외처리로 바로 빠져나감
  if (!isValid) {
    return;
  }
  ...
  
  return someDataInTrue;
}

// Good
function getResult() {
  let resultData;
  ...

  if (condition) {
    ...
    resultData = someDataInTrue;
  } else {
    ...
    resultData = someDataInFalse;
  }

  return resultData;
}

### 순회하기

- 반복문 사용은 일반화된 순회 메서드 사용을 권장한다.
- 반목문은 상황에 맞는 것을 선택한다. (for문, forEach 등)
- 반복을 위한 변수는 반복문에 선언한다.

### 콜백 함수의 스코프

- 콜백 등 익명 함수를 사용하는 경우, 최대한 클로저 사용을 피하고 각 스코프에 알맞게 변수를 선언한다.

### 주석

- 코드와 관련된 주석은 달지 않는다. 코드를 통해 최대한 내용을 표현하는 것에 집중한다.
- 단, 경고를 위한 주석이나 코드의 출처를 남기는 주석은 제외한다.
- 단, 로직이 너무 복잡한 것 같으면(게임 룰 같은 것)은 적어주어도 된다.
- TODO 주석은 작성이 가능하나 아래의 양식을 꼭 지켜야함.
- // TODO: 내용
- 개발이 완료되면 바로 지운다.

### 공백

- 키워드, 연산자와 다른 코드 사이에 공백이 있어야 한다.
- 시작 괄호 바로 다음과 끝 괄호 바로 이전에 공백이 있으면 안 된다.
- 콤마 다음에 값이 올 경우 공백이 있어야 한다.

###### tags: `project base`