[JavaScript] 코딩 컨벤션

나는 여태것 다른사람들과 협업할 일이 없었기 때문에 코딩 컨벤션이라는게 무엇인지도 몰랐으며 변수도 그냥 내가 원하는데로 만들었다. 그런데 이번 프로젝트를 진행하면서 각각의 변수명을 만들때에도 규칙이 있으며 무작정 코드를 줄이는것보다 코드를 늘리더라도 읽기 쉽게 만드는것이 더 중요하다는것을 알게 되었다. 그래서 적어본다

1. 들여쓰기

space와 tab을 섞어서 사용하지 않는다.

 

2. 문장의 종료

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

 

3. 명명 규칙

• 카멜 케이스을 사용한다. 참고사이트 : eslint.org/docs/rules/camelcase
• 생성자는 대문자 카멜 케이스를 사용한다.
• 상수는 영문 대문자 스네이크 표기법(Snake case)를 사용
• (지역 변수 or private 변수)명은 '_'로 시작한다.
• URL, HTML 같은 범용적인 대문자 약어는 대문자 그대로 사용한다.

카멜 케이스 규칙

// 숫자, 문자, 불린
let dog;
let variableName;

// 배열 - 배열은 복수형 이름을 사용
const dogs = [];

// 정규표현식 - 정규표현식은 'r'로 시작
const rDesc = /.*/;

// 함수
function getPropertyName() {
  ...
}

// 이벤트 핸들러 - 이벤트 핸들러는 'on'으로 시작
const onClick = () => {};
const onKeyDown = () => {};

// 불린 반환 함수 - 반환 값이 불린인 함수는 'is'로 시작
let isAvailable = false;

 

4. 전역 변수

전역 변수를 사용하지 않는다.

 

5. 선언과 할당

• 값이 변하지 않는 변수는 const를, 값이 변하는 변수는 let을 사용하여 선언한다. var는 절대로 사용하지 않도록 한다.
• const와 let은 사용 시점에 선언 및 할당을 한다.
• const를 let 보다 위에 선언한다.
• 외부 모듈과 내부 모듈을 구분하여 사용한다.(외부 모듈과 내부 모듈 선언 사이에 공백 삽입)
• 자기 참조 할당은 하지 않는다.(foo = foo;)
• var 사용 시 반드시 함수 스코프의 시작 지점에서 선언한다.
• var의 선언 시점과 사용 시점이 크게 떨어져 가독성이 낮아지는 경우에는 선언과 할당을 분리를 허용한다.
• 함수 중간에 예외처리가 있을때, 예외 처리 이후에 사용되는 var변수는 경우 선언만 집입부에서 하고 할당은 사용 시점에 수행한다. (ES5)
• 선언과 할당을 함께하는 변수와 선언만 하는 변수가 함께 사용될 때, 선언과 동시에 할당을 하는 변수를 그룹화하여 먼저 선언하는 것이 가독성에 좋다.

 

6. 배열과 객체

• 배열과 객체는 반드시 리터럴로 선언한다. (리터럴 표기법 : eslint.org/docs/rules/no-new-object)
• 배열 복사 시 순환문을 사용하지 않는다.
• ES5의 환경에서는 Array.prototype.slice를 사용한다. (ES5)
• 배열의 시작 괄호 안에 요소가 줄 바꿈으로 시작되었다면 끝 괄호 이전에도 일관된 줄 바꿈 해야한다.
• 객체의 프로퍼티가 1개인 경우에만 한 줄 정의를 허용하며, 2개 이상일 경우에는 개행을 강제한다.
• 객체 리터럴 정의 시 콜론 앞은 공백을 허용하지 않으며 콜론 뒤는 항상 공백을 강제한다.
• 객체의 메서드 표현 시 축약 메소드 표기를 사용한다.

 

7.  화살표 함수

• 함수 표현식 대신 화살표 함수를 사용한다.
• 화살표 함수의 파라미터가 하나이면 괄호를 생략한다.
• 암시적 반환을 최대한 활용한다.

8. Promise Executor 함수

Promise Executor 함수에 async 함수를 사용하지 않는다.

 

9. Destructuring

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

 

10. 템플릿 문자열

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

// Bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// Bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// Bad - 일반적인 경우, 홑따옴표를 사용
function sayHi(name) {
  return `How are you name?`;
}

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

 

11. 클래스와 생성자

class와 extends를 이용해서 객체 생성 및 상속을 구현한다.

 

 

 

 

 

 

 

출처 : ui.toast.com/fe-guide/ko_CODING-CONVENSION/