Javascript 코드 작성규칙

Javascript 코드 작성규칙

함수

• 한문자 이름은 피하십시오. 이름에서 의도를 읽을 수 있도록 하십시오.

// bad
function q() {
// ...stuff...
}
// good
function query() {
// ..stuff..
}

소문자 낙타표기법(camelCase)을 사용하십시오.

 

function thisIsMyFunction() {};

 

• Class와 생성자에는 PascalCase를 사용하십시오.

function User(options) {
this.name = options.name;
}
var good = new User({
name: 'yup'
});

• private 메서드나 프로퍼티명에 접두어로 밑줄을 붙여 구별하기 쉽게 합니다.

// bad
var persion = {
getName: function() {
return this._getFirst() + ' ' + this._getLast();
},
_getFirst: function() {
//...
},
_getLast: function() {
//...
}
};

변수(Variable)

• 변수는 밑줄로 단어를 분리하여 사용하십시오. 이렇게 하면 함수와 함수가 아닌 나머지 식별자(즉 원시 데이터 타입과 객체)를 시각적으로 구별하는 데 도움이 됩니다.

var first_name, favorite_bands, old_company_name;

• 상수 및 전역 변수는 모든 글자를 대문자로 사용하십시오

var PI = 3.14,
  MAX_WIDTH = 960;

• 변수를 선언 할 때는 항상 var를 사용합니다. 그렇지 않으면 전역 변수로 선언됩니다.

// bad
superPower = new SuperPower();

// good
var superPower = new SuperPower();

• 여러 변수를 선언하려면 하나의 var를 사용하여 변수마다 줄바꿈하여 선언합니다.

// bad
var items = getItems();
var goSportsTeam = true;
var dragonball = 'z';

// good
var items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

• 정의되지 않은 변수를 마지막으로 선언합니다. 이것은 나중에 이미 할당된 변수 중 하나를 지정해야하는 경우에 유용합니다.

// bad
var i, len, dragonball,
items = getItems(),
goSportsTeam = true;
// bad
var i, items = getItems(),
dragonball,
goSportsTeam = true,
len;
// good
var items = getItems(),
goSportsTeam = true,
dragonball,
length,
i;

• 변수의 할당은 스코프의 시작 부분에서 해주십시오.

// bad
function() {
test();console.log('doing stuff..');
//..other stuff..
var name = getName();
if (name === 'test') {
return false;
}
return name;
}
// good
function() {
var name = getName();
test();
console.log('doing stuff..');
//..other stuff..
if (name === 'test') {
return false;
}
return name;
}
// bad
function() {
var name = getName();
if (!arguments.length) {
return false;
}
return true;
}// good
function() {
if (!arguments.length) {
return false;
}
var name = getName();
return true;
}

오브젝트(Objects)

• Object를 만들 때는 리터럴 구문을 사용합니다.

```js
// bad
var item = new Object();
// good var item = {};

* 소문자 낙타표기법(camelCase)을 사용하십시오.
```js
// bad
var OBJEcttsssss = {};
var this_is_my_object = {};
var this-is-my-object = {};
// good
var thisIsMyObject = {};

배열(Arrays)

• 배열을 만들 때 리터럴 구문을 사용합니다.

// bad
var items = new Array();
// good
var items = [];

문자열(Strings)

• 문자열은 작은 따옴표 '' 를 사용합니다.

// bad
var name = "Bob Parr";
// good
var name = 'Bob Parr';
// bad
var fullName = "Bob " + this.lastName;
// good
var fullName = 'Bob ' + this.lastName;

• 80 문자 이상의 문자열은 문자열 연결을 사용하여 여러 줄에 걸쳐 기술 합니다.

// bad
var errorMessage = 'This is a super long error that was thrown b
ecause of Batman. When you stop to think about how Batman had an
ything to do with this, you would get nowhere fast.';

// good
var 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.';

• 프로그램에서 문자열을 생성할 필요가 있는 경우 문자열 연결 대신 Array#join을사용합니다

var items,
messages,
length,
i;
messages = [{
state: 'success',
message: 'This one worked.'
},{
state: 'success',
message: 'This one worked as well.'
},{
state: 'error',
message: 'This one did not work.'
}];
length = messages.length;
// bad
function inbox(messages) {
items = '<ul>';
for (i = 0; i < length; i++) {
items += '<li>' + messages[i].message + '</li>';
}
return items + '</ul>';
}
// good
function inbox(messages) {
items = [];
for (i = 0; i < length; i++) {
items[i] = messages[i].message;
}
return '<ul><li>' + items.join('</li><li>') + '</li></ul>';
}

속성(Propertie)

• 속성에 액세스하려면 도트.를 사용합니다.

var luke = {
jedi: true,
age: 28
};
function getProp(prop) {
return luke[prop];
}
var isJedi = getProp('jedi');

• 변수를 사용하여 속성에 접근하려면 대괄호[]을 사용하십시오

var luke = {
jedi: true,
age: 28
};
function getProp(prop) {
return luke[prop];
}
var isJedi = getProp('jedi');

암묵적 타입캐스팅 피하기

• == 나 != 보다는 === 와 !== 를 사용합니다.

var zero = 0;
// bad
if (zero == false) {
// 이 블록은 실행된다.
}
// good
if (zero === false) {
// zero는 0이고 false가 아니기 때문에 이 블록은 실행되지 않는다.
}

블록(Blocks)

• 수행 블록은 중괄호 ({})를 사용합니다.

// bad
if (test)
return false;
// good
if (test) return false;
// good
if (test) {
return false;
}
// bad
function() { return false; }
// good
function() {
return false;
}

주석(Comments)

• 복수행의 코멘트는 / ... / 를 사용해 주십시오. 그 안에는 설명과 모든 매개 변수와 반환 값에 대한 형식과 값을 설명합니다.

// bad
// make() returns a new element
// based on the passed in tag name
//
// @param <String> tag
// @return <Element> element
function make(tag) {
// ...stuff...
return element;
}

// good
/**
* make() returns a new element
* based on the passed in tag name
*
* @param <String> tag
* @return <Element> element
*/
function make(tag) {
// ...stuff...
return element;
}

• 한 줄 주석에는 // 를 사용하십시오. 코멘트를 추가하고 싶은 코드의 상단에 작성하십시오. 또한 주석 앞에 빈 줄을 넣어주십시오

// bad
var active = true; // is current tab
// good
// is current tab
var active = true;

// bad
function getType() {
console.log('fetching type...');
// set the default type to 'no type'
var type = this._type || 'no type';
return type;
}

// good
function getType() {
console.log('fetching type...');
// set the default type to 'no type'
var type = this._type || 'no type';
return type;
}

문제를 지적하고 재고를 촉구하거나 문제에 대한 해결책을 제시하는 등 의견의 앞에 FIXME 나 TODO 를 붙이는 것으로 다른 개발자의 빠른 이해를 도울 수 있습니다. 이러한 어떤 액션을 동반한다는 의미에서 일반 코멘트와는 다릅니다. 액션은 FIXME - 해결책이 필요 또는 TODO - 구현이 필요합니다.

• 문제에 대한 코멘트로 // FIXME : 를 사용하십시오.

function Calculator() {
// FIXME: 전역 변수를 사용해서는 안됩니다.
total = 0;
return this;
}

• 문제 해결책에 대한 코멘트로 // TODO : 를 사용하십시오.

function Calculator() {
// TODO: total은 옵션 매개 변수로 설정되어야 함.
this.total = 0;
return this;
}

공백(Whitespace) 및 들여쓰기(indentation)

• 탭에는 공백 2개를 설정하십시오.

// bad
function() {
∙∙∙∙var name;
}
// bad
function() {
∙var name;
}
// good
function() {
∙∙var name;
}

• if-else, 객체 리터럴의 여는 중괄호({)전, 닫는 중괄호(})와 else 또는 while 사이에 공백하나를 입력합니다.

// if-else
if (a) {
...
} else {
...
}
// good
dog.set('attr', {
age: '1 year',
breed: 'Bernese Mountain Dog'
});

• for 루프의 여는 대괄호전, 쉼표, 피연산자와 구성요소를 분리하는 세미콜론 다음 공백을 하나 입력합니다.

   

for (var i = 0, max = 10; i < max; i += 1) {...}

• 배열의 원소들은 분리하는 쉼표다음 공백을 하나 입력합니다.

var a = [1, 2, 3];

 

• 객체의 프로퍼티를 분리하는 쉼표 다음, 프로퍼티의 이름과 값을 분리하는 콜론 다음 공백을 하나 입력합니다.

var o = {a: 1, b: 2};

• 함수의 인자들을 분리할 때 공백을 하나 입력합니다.

myFunc(a, b, c);

• 함수를 정의하는 중괄호 전에 공백을 하나 입력합니다.

   

function myFunc() {...};

• 익명 함수 표현식에서 function 다음에 공백을 하나 입력합니다.

var myFunc = function() {...};

• 모든 연산자와 피연산자 사이에 공백을 하나 입력합니다. 즉 +, - < , =, <,>, <==, >==, ===, !==, &&, ||, += 등의 앞뒤에 공백을 하나 입력합니다.

//bad
var d= 0,
a = b+1;
if (a&& b&&c) {
d=a $c;
a+=d;
}
//good
var d = 0,
a = b + 1;
if (a && b && c) {
d = a % c;
a += d;
}

• 메소드 체인이 길어지는 경우 적절히 들여쓰기(indentation) 합니다.

// bad
$('#items').find('.selected').highlight().end().find('.open').up
dateCount();

// good
$('#items')
.find('.selected')
.highlight()
.end()
.find('.open')
.updateCount();

// bad
var leds = stage.selectAll('.led').data(data).enter().append('sv
g:svg').class('led', true)
.attr('width', (radius + margin) * 2).append('svg:g')
.attr('transform', 'translate(' + (radius + margin) + ',' +
(radius + margin) + ')')
.call(tron.led);

// good
var leds = stage.selectAll('.led')
.data(data)
.enter().append('svg:svg')
.class('led', true)
.attr('width', (radius + margin) * 2)
.append('svg:g')
.attr('transform', 'translate(' + (radius + margin) + ',' +
(radius + margin) + ')')
.call(tron.led);

빈줄

• 파일의 마지막에는 하나의 빈줄을 넣어주세요.

// bad
(function(global) {
// ...stuff...
})(this);

// good
(function(global) {
// ...stuff...
})(this);

jQuery

• jQuery Object의 변수 앞에는 $을 부여해 주십시오.

// bad
var sidebar = $('.sidebar');

// good
var $sidebar = $('.sidebar');

• jQuery 쿼리결과를 캐시해주십시오.

// bad
function setSidebar() {
$('.sidebar').hide();
// ...stuff...
$('.sidebar').css({
'background-color': 'pink'
});
}

// good
function setSidebar() {
var $sidebar = $('.sidebar');
$sidebar.hide();
// ...stuff...
$sidebar.css({
'background-color': 'pink'
});
}