Javascript 코드 작성규칙

Javascript 코드 작성규칙

함수

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

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

// 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' }); }

출처: https://hyunjai.tistory.com/452?category=718819 [분도의 일상]