Javascript 코딩규칙

코딩 규칙은 코드의 일관성을 유지시켜 읽고 이해하기가 수월해지며, 새로운 개발자가 팀에 합류했을 때도, 코딩 규칙을 한번 훑어보면 다른 팀원이 작성한 코드에 보다 빨리 익숙해질 수 있으며, 상호간의 유지보수성도 향상됩니다.

[들여쓰기]

규칙은 간단하다. 중괄호 안에 있으면 들여써라. 즉 함수의 본문, 루프(do, while, for, for-in), if와 swich문, 객체 리터럴 표기법을 사용한 객체 프로퍼티들이 해당됩니다. 다음 코드는 들여쓰기를 사용한 예입니다. 

function outer(a, b) {
  var c = 1
    , d = 2
    , inner;
  
  if (a > b) {
    inner = function() {
      return {
        r: c - d
      };
    };
  } else {
    inner = function() {
      return {
        r: c + d  
      };
    };
  }
  return inner;
}
[중괄호]

중괄호는 생략할 수 있을 때도 항상 써야 합니다. 기술적으로는 if는 for문에 명령문이 한 줄 뿐일 경우 중괄호를 생략할 수 있지만, 그런 경우에도 중괄호를 써야 합니다. 이를 통해 코드에 일관성을 유지할 수 있고 수정하기도 쉬워집니다. 

// 명령문이 한 줄만 있는 for 루프가 있다고 하고, 중괄호를 생략해도 문법 오류는 발생하지 않습니다.
// 나쁜 습관
for (var i = 0; i < 10; i += 1)
  alert(i);

// 하지만, 루푸 본문에 두줄 이상이면, 두번째 루프부터는 구문 바깥으로 인식합니다.  
// 나쁜 습관
for (var i = 0; i < 10; i += 1)
  alert(i);
  alert(i + " is " + (i % 2 ? "odd" : "even"));
  
// 한 줄짜리 블록에도 항상 중괄호를 사용하는 것이 장기적으로는 최선책이라고 할 수 있습니다.
// 좋은 습관
for (var i = 0; i < 10; i += 1) {
  alert(i);
}

// if조건문도 마찬가지입니다.
// 나쁜습관
if (true)
  alert(1);
else
  alert(2);
  
// 좋은습관
if (true) {
  alert(1);
} else {
  alert(2);
}
[여는 중괄호의 위치]

여는 중괄호를 같은 줄에 둘지, 다음 줄에 둘지에 대해서도 개발자들마다 선호가 다른 경향이 있습니다. 

if (true) {
  alert("It's True!");
}

if (true) 
{
  alert("It's True!");
}

위의 예에 한정해서 말하자면 취향의 문제일 수 있지만, 중괄호의 위치에 따라 프로그램의 동작이 달라질 수도 있습니다. 이것은 세미콜론 삽입 장치 때문이다. 자바스크립트는 까다롭지 않아서 세미콜론을 쓰지 않고 행을 종료하면 알아서 대신 세미콜론을 추가해줍니다. 이러한 동작 방식은 함수의 반환 값이 객체 리터럴이고 이 객체의 여는 중괄호가 다음행에 올 경우 문제를 일이킬 수 있습니다. 

// 예상과 다른 반환 값이 나옵니다.
function func() {
  return {
    name: "Batman"
  };
}

이 함수가 name프로퍼티를 가진 객체를 반환하지 않습니다. 그 이유는 return뒤에 자동으로 추가된 세미콜론 때문에 이 함수는 undefined를 반환합니다. 위의 코드는 다음 코드와 동일합니다. 

// 예상과 다른 반환 값이 나옵니다.
function func() {
  return undefined; 
  
  // 이 다음에 나오는 코드는 실행되지 않습니다.
  {
    name: "Batman"
  };
}

결론적으로, 항상 중괄호를 쓰고, 여는 중괄호는 선행하는 명령문과 동일한 행에 두어야 합니다. 

// 좋은 습관
function func() {
  return {
    name: "Batman"
  };
}
[공백]

공백을 활용하는 것으로도 가독성과 코드의 일관성을 향상시킬 수 있습니다. 문어체 영어에서는 쉼표와 마침표 뒤에 공백을 둡니다. 자바스크립트에서도 똑같은 규칙을 따르면 됩니다. 표현식을 열거할 때 쉼표를 쓸 자리에 공백을 넣고, 명령문 끝에도 하나의 '생각'이 완결되었다는 의미로 공백을 넣습니다. 

// for 루프의 구성요소를 분리하는 세미콜론 다음.
for (var i = 0; i < 10; i += 1) {...}

// for 루프 내에서 여러 개의 변수(i와 max)를 초기화한 다음.
for (var i = 0, max = 10; i < 10; i += 1) {...}

// 배열의 원소들을 분리하는 쉼표 다음.
var a = [1, 2, 3];

// 객체의 프로퍼티를 분리하는 쉼표 다음, 프로퍼티의 이름과 값을 분리하는 콜론 다음.
var a = {a: 1, b: 2};

// 함수의 인자들을 분리할 때.
myFunc(a, b, c);

// 함수를 정의하는 중괄호 전.
function myFunc() {}

모든 연산자와 피연산자를 스페이스로 분리하는 것도 공백 활용의 좋은 예 중 하나입니다. 

// 공백을 일관되게 사용함으로써 코드의 가독성을 높이고, 코드가 "숨쉴 수 있게" 해줍니다.
var d = 0
  , a = b + 1;

if (a && b && c) {
  d = a % c;
  a += d;
}

// 안티패턴 : 공백을 빼먹거나 일관성 없이 사용하면 코드에 혼란을 가중시킬 수 있습니다.
var d= 0
  , a =b+1;

if (a&&b&&c) {
  d=a%c;
  a+=d;
}
[할당, 선언, 함수(일반, 표현식, 생성자)]
var foo = 'bar'
  , num = 1
  , undef;

// 리터럴 표기법:
var array = []
  , object = {};

함수 같은 유효 범위에 `var` 를 하나만 사용하면 가독성이 높아집니다.
이렇게 하면 선언 목록도 깔끔해집니다. 

// 나쁜 스타일
var foo = '';
var bar = '';
var qux;

// 좋은 스타일
var foo = ''
  , bar = ''
  , quux;

// 또는..
var // 아래 변수에 대한 설명
  foo = ''
, bar = ''
, quux;

지역 변수 선언 시 여러 변수에 값을 한번에 할당하는 경우 문제점

function() {
  var a = b = 1; // 변수 a는 지역변수로 선언되지만, b는 전역변수로 선언된다.
}

일반 함수 선언

// 일반 함수 선언
function foo(arg1, argN) {
}

// 사용법
foo(arg1, argN);

// 일반 함수 선언
function square(number) {
	return number * number;
}

// 사용법
square(10);
[조건문으로 확인 하는 코드]
// 배열에 뭔가가 들어있는지 여부를 확인하려는 거라면,
// 다음과 같이 코드를 작성하는 대신에:
if(array.length > 0) ...

// 다음과 같이 작성합니다.:
if(array.length) ...

// 배열이 비어있다는 것만을 확인할 때에는, 
// 아래처럼 작성하지 마시고:
if(array.length === 0) ...

// ...다음처럼 작성합니다.:
if(!array.length) ...

// 문자열이 비어있지 않다는 것을 확인할 때에는,
// 다음처럼 작성하지 마시고:
if(string !== '') ...

// ...다음과 같이 작성합니다.:
if(string) ...

// 문자열이 _비어있다는 것_을 확인만 하는 경우라면,
// 다음처럼 작성하지 마시고:
if(string === '') ...

// ...다음과 같이 작성해서, 거짓인지를 확인 합니다.:.. :
if(!string) ...

// 참조 변수가 true인지 확인하려면,
// 다음처럼 작성하지 마시고:
if(foo === true) ...

// ...그냥 아래처럼 써줍니다.
if(foo) ...

// 어떤 참조 변수가 false인지 판정할 때에는,
// 다음처럼 작성하지 마시고:
if(foo === false) ...

// ...true인지를 확인하도록 부정(!)을 사용합니다.
if(!foo) ...

// ...주의하세요. 이렇게 제안하면 foo의 값이 0, '', null, undefined, NaN인 경우에도 참을 반환합니다.
// foo가 불린값 false를 갖는지를 확인하는 경우라면, 아래와 같이 사용합니다.
if(foo === false) ...

// 어떤 변수가 있다고 가정하면
// 이 변수의 값은 null이나 undefined일 수는 있지만 false나 '', 또는 0의 값은 가지지 않습니다. 
// 이런 변수를 판정할 때에는, 아래처럼 작성하지 마시고:
if(foo === null || foo === undefined) ...

// ...강제형변환되는 ==를 사용합니다.
if(foo == null) ...

// == 를 사용하면, 판정하려는 변수의 값이 'null' 이나 'undefined' 일 때, 참을 반환합니다.
// 하지만 'false' 나 '' 나 0 값을 가질 때에는 거짓을 반환합니다.
null == undefined
History