Javascript 코딩 컨벤션

 

1. 들여쓰기

1.1. space와 tab을 섞어 혼용해서 쓰지 않는다. 들여쓰기는 space 4개를 사용.

function getText(obj){
    return obj.value;
}

 

 

2. 문장의 종료

2.1. 한 줄에 한 문장만 허용한다. 문장 종료 시 반드시 세미콜론을 사용한다.

let systemCall;

 

 

3. 명명 규칙

3.1. 변수나 함수 이름은 낙타등 표기법을 사용한다.

let privateVariableName;

3.2. 상수는 모두 대문자로 하고 단어를 합성할 때는 언더스코어( _ )를 이용한 스네이크 표기법을 사용한다.

SYMBOLIC_CONSTANTS;

3.3 Boolean 변수는 is로 시작한다.

let isAvailable = false;

3.4. 범용적인 약어는 대문자 그대로 사용한다.

parseXML;

3.5. 지역 변수 나 private 변수는  '_' 으로 시작하는 것을 권장 한다.

_privateCustomObjectName._privatePropertyName;

 

 

 

4. 전역 변수

4.1. 암묵적인 전역 변수를 사용하지 않는다.

// Bad
function sum(x, y) {
  result = x + y;
  return result;
}

// Good
function sum(x, y) {
  let result = x + y;
  return result;
}

4.2. 전역 변수는 되도록 사용하지 않는다. 프로그램이 커질 경우 변수 명이 겹칠 확률이 커지기 때문이다.

 

 

 

5. 선언과 할당

5.1. 변수 선언은 let을 사용하여 블록 범위에서만 사용한다.

5.2. const 따로 let 따로 각각 묶어서 선언해서 가독성을 높인다.  한 줄에 하나의 상수나 변수만 선언한다.

const len = this._array.length;
const len2 = this._array2.length;
let i = 0;
let j = 0;
let foo, bar;

5.3. const와 let은 scope가 블록에서만 유효하므로 사용 시점에 선언 및 할당을 한다.

// Bad - 블록 스코프 밖에서 변수 선언
function foo() {
  const len = this._array.length;
  let i = 0;
  let j = 0;
  let len2, item;

  for (; i < len; i += 1) {
      ...
  }
}

// Good 
function foo() {
  const len = this._array.length;
  for (let i = 0; i < len; i += 1) {
      ...
  }
}

5.4. var 사용시 함수 시작 지점에서 선언하며 선언과 동시에 초기값을 할당한다. for문이나 if문 같은 블록 내부에서 선언하면 블록 내부에서만 scope가 적용된다고 착각할수 있기 때문이다.

function foo() {
  var bar = '';
  var quux = '';
  if(bar != ''){
  ...
  
}

5.5. var로 선언한 곳과 실제 사용하는 곳 사이가 너무 먼 경우 사용하는 곳 바로 앞에서 초기값을 할당 한다.

function foo() {
  var i;
  var j;

 ...

  // 선언은 진입부에서 하고, 할당은 사용 시점에 수행
  j = 0;
  for (; j < len2; j += 1) {
    item = this._array2[j];
    ...
  }
}

 

 

 

6. 배열과 객체

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

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

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

6.2. 객체의 프로퍼티가 1개인 경우에만 한 줄에 정의하는 것을 허용하며, 2개 이상일 때는 줄을 바꿔서 정의한다.

const obj = {foo: 'a'};

const obj = {
  foo: 'a'
  bar: 'b'
};

6.3. class와 extends를 이용해서 객체 생성 및 상속을 구현한다. prototype 기반으로 상속하는 경우 가독성이 떨어진다.

// Bad
function Queue(contents = []) {
  this._queue = [...contents];
}
Queue.prototype.pop = function() {
  const value = this._queue[0];
  this._queue.splice(0, 1);
  return value;
};

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

 

 

 

7. 함수

7.1. 메서드나 함수 사이에는 줄바꿈을 해준다.

class MyClass {
  foo() {
    //...
  }

  bar() {
    //...
  }
}

7.2. 함수는 new 생성자로 선언하지 않는다.

//생성자 사용 선언 금지
const doSomething = new Function('param1', 'param2', 'return param1 + param2;');

7.3. 함수는 선언 전에 사용하지 않는다. 반드시 선언 후에 사용한다.

7.4. 블록 scope 에서는 함수 선언식을 사용하지 않는다. 블록 scope에서 선언식으로 정의된 함수는 함수 scope이지만 블록 scope로 오해할 여지가 있으므로 사용하지 않는다.

// Bad
if (condition) {
  function someFunction() {
  
  }
} else {
  function someFunction() {
  
  }
}

// Good
var someFunction;

if (condition) {
  someFunction = function() {
    ...
  }
} else {
  someFunction = function() {
    ...
  }
}

7.5. 함수 표현식 대신 화살표 함수를 사용한다.

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

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

7.6. 화살표 함수의 파라미터가 하나면 괄호를 생략한다.

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

// Good
[1, 2, 3].map(x => x * x);

// Good
[1, 2, 3].reduce((y, x) => x + y);

7.7. 암시적 반환(return)의 경우 함수 본문 전에 줄을 바꾸지 않는다.

// Bad
(foo) =>
  bar;

// Good
(foo) => bar;
(foo) => (
  bar()
);

7.8. Promise Executor 함수에 async 함수를 사용하지 않는다. 비동기 함수가 throw한 오류를 잡을 수 없고 Promise가 reject되지 않아 디버깅이 어렵다.

// Bad
const result = new Promise(async (resolve, reject) => {
  resolve(await foo);
});

// Good
const result = new Promise((resolve, reject) => {
  readFile('foo.txt', function(err, result) {
    if (err) {
      reject(err);
    } else {
      resolve(result);
    }
  });
});

7.9. return 문 위에는 빈 줄을 추가해서 가독성을 높인다.

 

 

8. 블록 구문

8.1. 한 줄 짜리 블록일지라도 중괄호{ }를 생략하지 않는다. 그리고 가독성을 위해 중괄호 블록은 줄바꿈을 한다. 블록을 생략할 경우 오류 발생의 잠재적인 원인이된다.

// Bad
if (condition) doSomething();
else doAnything();

// Good
if (condition) {
  ...
} else {
  ...
}

8.2. 조건문에서 키워드 사이 공백을 추가하면 읽기 쉬워진다.

//Bad
var i = 0;
for(;i<100;i+=1) {
  someIterativeFn();
} 

// Good
var i = 0;
for(; i < 100; i+=1) {
  someIterativeFn();
}

8.3. do-while문에서 while문 끝에 세미콜론을 쓴다.

var i = 0;
for(;i<100;i+=1) {
  someIterativeFn();
} 

// Good
var i = 0;
for(; i < 100; i+=1) {
  someIterativeFn();
}

8.4. switch-case 사용시 case문 사이에 빈 줄을 추가하고 마지막 case를 제외하고 break; 를 생략하지 않는다.

switch (value) {
  case 1:
    doSomething1();
    break;

  case 2:
    doSomething2();
    break;

  case 3:
    return true;

  default:
    throw new Error('This shouldn\'t happen.');
}

8.5. 삼중 등호 연산자(===)로 비교한다. == 는 암묵적 캐스팅으로 타입에 관계없이 비교하므로 오류가 발생할 확률이 높다.

8.6. for-in 문에서는 hasOwnProperty 조건 검사를 수행하여 예상치 않게 상속받은 프로퍼티로 인해 문제가 생기는 것을 방지한다.

for (const prop in object) {
  if (object.hasOwnProperty(prop)) {
    ...
  }
}

8.7. 반복문을 위한 조건식에서 사용하는 변수는 조건식 앞에서 선언한다.

var i, len
for (i = 0, len = array.length; i < len; i += 1) ...

 

 

 

9. 콜백 함수의 scope

9.1. 콜백 등 익명 함수를 사용하는 경우 되도록 클로저 사용을 피하고 각 스코프에 맞게 변수를 선언한다.

// bad
let data1, data2, ...;

forEach(arr, function() {
  data1 = someFunction1();
  data2 = someFunction2();
  ...
});

// Good
function foo() {
  ...

  // 익명 함수의 스코프 안에서 변수 선언
  forEach(ary, function(data1, data2) {
    const data1 = someFunction1(data1);
    const data2 = someFunction2(data2);
  ...
  });
}

 

 

 

10. 주석과 공백

10.1. 주석은 설명하려는 것과 들여쓰기를 일치시켜야 한다.

10.2. 주석은 설명하려는 것 바로위에 작성한다. 한 줄 주석인 경우 설명하려는 것과 같은 줄에서 설명하려는 것 뒤에 작성해도 된다.

10.3. 콤마 다음엔 빈 공백을 넣는다.